openlayers地图底图切换

【实例简介】openlayers地图底图切换

最近领导让研究，用openlayers实现自定义上传背景图及不同坐标点的显示 的例子，目前还没研究出来，但是通过网上搜索实现了地图底图切换的例子，所以在这里记录一下。

首先呢，先把div写出来

<div class="tianditu">
  <div class="ol-map" id="olMap"></div>
  <button @click="handleClick" style="position:relative">切换</button>
</div>

div这块没有难度，接着我们引入ol相关代码：

import Map from "ol/Map";
import View from "ol/View";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { XYZ, OSM, Vector as VectorSource } from "ol/source";
import { fromLonLat } from "ol/proj";
import {defaults as defaultInteractions, DragRotateAndZoom,} from "ol/interaction";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Style, Icon } from "ol/style";

下来附上我们的js

data() {
    return {
      layers: [],
      config: [],
      num: 0,
      map: null
    };
  },
  mounted() {
    this.inits();
  },
  methods: {
    inits() {
      var imageURL = "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
      const imageURL2 = "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"; //高德地图
      const imageURL3 = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"; //ChinaOnlineStreetPurplishBlue
      var lay = new TileLayer({source: new XYZ({url: imageURL})});
      var lay2 = new TileLayer({source: new XYZ({url: imageURL2})});
      var lay3 = new TileLayer({source: new XYZ({url: imageURL3})});
      this.layers = [lay2, lay3, lay];
      this.config = [this.layers[this.num]]
      this.map = new Map({
        target: 'olMap', // DOM容器
        view: new View({
          // projection: 'EPSG:4326',
          // center: [120.771441, 30.756433],
          center: fromLonLat([108.938832,34.346721]),
          zoom: 3, // 缩放级别
          minZoom: 3.7, // 最小缩放级别
          maxZoom: 18, // 最大缩放级别
        }),
        layers: this.config,
        // layers: [
        //   new TileLayer({
        //     source: new OSM(),
        //   }),
        // ],
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]), //按住shift键时通过鼠标来进行旋转地图。
      });
      // 实例化要素
      let feature = new Feature({
        geometry: new Point(fromLonLat([108.938832,34.346721])), // 地理几何图形选用点几何
      });
      // 设置样式，这里就是显示一张图片icon
      feature.setStyle([
        new Style({
          image: new Icon({
            anchor: [1, 1],    // 设置图标位置
            src: require("../../assets/images/ship.png"),
            // size: [32, 32],// 尺寸
          })
        }),
      ]);
      // 实例化的时候也可以不添加feature，后续通过方法添加：source.addFeatures([feature])
      // 清空feature：source.clear()
      // 设置图层
      let vector = new VectorLayer({
        source: new VectorSource({
          features: [feature],
        })
      });
      this.map.addLayer(vector);
    },
    handleClick(){
      if(this.num === 0){
        this.num = 1;
        this.inits();
      }else if(this.num === 1){
        this.num = 2;
        this.inits();
      }else if(this.num === 2){
        this.num = 0;
        this.inits();
      }
    }
  },

最后怎么能少了样式呢

<style lang="scss" scoped>
.ol-map {
  /* width: 70%; */
  height: 500px;
  /deep/ :last-child{
    display: block !important;
  }
}
/deep/ .ol-viewport{
  display: none;
}
</style>

以上就是我写的一个简单的底图切换的例子，代码可能不是特别的规范，但是实现是没问题的，在这里还是希望大佬提出点意见，我好像你们靠拢哦。 

最最最最重要的是希望能碰见大佬帮我解答实现自定义上传背景图并设置标注点的问题哦，如果有小伙伴用了我的例子感觉没什么问题或者有问题的都可以留言哦，我很期待你们的留言

【实例截图】