先翻译一下这段话。
Bing Maps地图使用Aerial
和OrdnanceSurvey
样式时在放大到一定层级,没有与之匹配的瓦片加载出来时就会显示“占位符”默认图片,如下:
设置placeholderTiles: true时
如果在加载地图时设置placeholderTiles为false那地图就会拉伸图片来替代默认图片。
设置placeholderTiles: false后
接下来来看一下如何加载BingMaps,首先需要去申请一个key,我申请了一下,流程不难,这里贴一个别人写的申请流程
this.styles装了几个样式,这里循环把每个样式的图层都加载到地图上了,都设置了图层不显示visible: false,并且给每一个图层设置了一个name,方便后面切换。
for (let i = 0; i < this.styles.length; i++) {
this.layers.push(
new TileLayer({
visible: false,
preload: Infinity,
source: new BingMaps({
key: "你的key",
imagerySet: this.styles[i],
placeholderTiles: true,
}),
zIndex: i + 1,
name: this.styles[i],
})
);
}
加一个下拉框绑定事件,选择某一个样式时把其他图层隐藏,只显示当前这一个。
<select id="layer-select" @change="onChange" v-model="styleValue">
<option :value="item" v-for="(item, index) in styles" :key="index">
{{ item }}
</option>
</select>
onChange() {
for (let i = 0; i < this.layers.length; i++) {
let item = this.layers[i];
item.setVisible(false);
if (item.get("name") == this.styleValue) {
item.setVisible(true);
}
}
},
完整代码:
<template>
<div class="box">
<h1>BingMaps</h1>
<div id="map"></div>
<select id="layer-select" @change="onChange" v-model="styleValue">
<option :value="item" v-for="(item, index) in styles" :key="index">
{{ item }}
</option>
</select>
</div>
</template>
<script>
import BingMaps from "ol/source/BingMaps.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
export default {
name: "",
components: {},
data() {
return {
map: null,
styleValue: "RoadOnDemand",
layers: [],
styles: [
"RoadOnDemand",
"Aerial",
"AerialWithLabelsOnDemand",
"CanvasDark",
"OrdnanceSurvey",
],
};
},
computed: {},
created() {},
methods: {
onChange() {
for (let i = 0; i < this.layers.length; i++) {
let item = this.layers[i];
item.setVisible(false);
if (item.get("name") == this.styleValue) {
item.setVisible(true);
}
}
},
},
mounted() {
for (let i = 0; i < this.styles.length; i++) {
this.layers.push(
new TileLayer({
visible: false,
preload: Infinity, //预加载
source: new BingMaps({
key: "你的key",
imagerySet: this.styles[i],//图像类型
placeholderTiles: true,//没有切片时是否显示默认占位符
}),
zIndex: i + 1,
name: this.styles[i],
})
);
}
const map = new Map({
layers: this.layers,
target: "map",
view: new View({
center: [-6655.5402445057125, 6709968.258934638],
zoom: 13,
}),
});
this.onChange();
},
};
</script>
<style lang="scss" scoped>
#map {
width: 100%;
height: 500px;
}
.box {
height: 100%;
}
</style>