可以选择使用自己的颜色设置 BingMap 的样式: https://www.bing.com/api/maps/sdk/mapcontrol/isdk/custommaptilestylesandhexcolor#TS
具有预定义样式的 Openlayers 中的 BingMap 代码: 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();
如何在 Openlayers 中使用自己的 BingMaps 样式/颜色?可能吗?
最佳答案
您需要一个自定义图 block 加载函数来将额外的设置添加到图 block URL 上。您需要监视该示例中的网络流量,以了解每个设置如何更改 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://learn.microsoft.com/en-us/bingmaps/articles/custom-map-styles-in-bing-maps看起来更简单的方法可能是将它们添加到 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'
关于javascript - 如何在 openlayers 中使用 bing map 自己的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60849441/