八、openlayers官网示例Bing Maps解析——加载Bing地图

先翻译一下这段话。

Bing Maps地图使用Aerial和OrdnanceSurvey样式时在放大到一定层级，没有与之匹配的瓦片加载出来时就会显示“占位符”默认图片，如下：

设置placeholderTiles: true时

如果在加载地图时设置placeholderTiles为false那地图就会拉伸图片来替代默认图片。

设置placeholderTiles: false后

接下来来看一下如何加载BingMaps，首先需要去申请一个key，我申请了一下，流程不难，这里贴一个别人写的申请流程

图文详解申请必应地图API密钥 - krpano教程

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>