基本信息

---

下载

   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

---

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

支付宝支付

微信支付

   源码介绍

---

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>

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

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