如何在openlayers中使用自己的bing地图样式

Question

There is an option to style BingMaps with own colors: https://www.bing.com/api/maps/sdk/mapcontrol/isdk/custommaptilestylesandhexcolor#TS

Code of BingMaps in Openlayers with predefined styles: 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();

How can I use own BingMaps styles/colors in Openlayers? Is it possible?

Answer 1

You would need a custom tile load function to add the extra settings onto the tile url. You will need to monitor network traffic in that example to work out how each setting changes the 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';
  });
})

The setting are described here https://docs.microsoft.com/en-us/bingmaps/articles/custom-map-styles-in-bing-maps It looks like an easier method might be to add them to the API key

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'