Как использовать собственный стиль карт bing в openlayers - PullRequest
Новая
       38

Как использовать собственный стиль карт bing в openlayers

0 голосов
/ 25 марта 2020

Существует возможность стиля BingMaps с собственными цветами: https://www.bing.com/api/maps/sdk/mapcontrol/isdk/custommaptilestylesandhexcolor#TS

Код BingMaps в Openlayers с предопределенными стилями: https://codesandbox.io/s/bing-maps-oj97i

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import BingMaps from "ol/source/BingMaps";

var styles = [
  "RoadOnDemand",
  "Aerial",
  "AerialWithLabelsOnDemand",
  "CanvasDark",
  "OrdnanceSurvey"
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
  layers.push(
    new TileLayer({
      visible: false,
      preload: Infinity,
      source: new BingMaps({
        key: "[BingMaps KEY]",
        imagerySet: styles[i],
        maxZoom: 19
      })
    })
  );
}
var map = new Map({
  layers: layers,
  target: "map",
  view: new View({
    center: [-6655.5402445057125, 6709968.258934638],
    zoom: 13
  })
});

var select = document.getElementById("layer-select");
function onChange() {
  var style = select.value;
  for (var i = 0, ii = layers.length; i < ii; ++i) {
    layers[i].setVisible(styles[i] === style);
  }
}
select.addEventListener("change", onChange);
onChange();

Как я могу использовать собственные стили / цвета BingMaps в Openlayers? Возможно ли это?

1 Ответ

1 голос
/ 25 марта 2020

Чтобы добавить дополнительные параметры в URL-адрес плитки, вам потребуется пользовательская функция загрузки плитки. В этом примере вам нужно будет отслеживать сетевой трафик c, чтобы определить, как каждый параметр изменяет URL-адрес. 

layers.forEach(function(layer){
  layer.getSource().setTileLoadFunction(function(tile, src) {
    tile.getImage().src = src + '&c4w=1&cstl=rd&src=h&st=ar|fc:b5db81_wt|fc:a3ccff_tr|fc:50a964f4;sc:50a964f4_ard|fc:ffffff;sc:ffffff_rd|fc:50fed89d;sc:50eab671_st|fc:ffffff;sc:ffffff_g|lc:dfdfdf';
  });
})

Настройка описана здесь https://docs.microsoft.com/en-us/bingmaps/articles/custom-map-styles-in-bing-maps Похоже, более простой способ - добавить их к ключу API 

key: "[BingMaps KEY]" + '&c4w=1&cstl=rd&src=h&st=ar|fc:b5db81_wt|fc:a3ccff_tr|fc:50a964f4;sc:50a964f4_ard|fc:ffffff;sc:ffffff_rd|fc:50fed89d;sc:50eab671_st|fc:ffffff;sc:ffffff_g|lc:dfdfdf'
...