vue 使用leaflet 加载地图服务 （可切换天地图 影像地图）（一）

// 下载 
npm install leaflet 
// 引入 main.js
import L from "leaflet";
import "leaflet/dist/leaflet.css";
// HTML
<div id="map"></div>
 created() {
   let _that = this;
    //面信息初始化
    _that.normal = new L.layerGroup();
    _that.factoryLandPolygon = new L.layerGroup();
    _that.activePolygon = new L.layerGroup();
    },
          // 初始化图层
      loadgraymapnew() {
        let _that = this;
        let southWest = [29.1304, 118.1217]; //地图西南点坐标
        let northEast = [30.6191, 120.7753]; //地图东北点坐标
        let bounds = L.latLngBounds(southWest, northEast); //地图边界
        let a = "http://t4.tianditu.gov.cn/DataServer?T=ter_c&x={x}&y={y}&l={z}&tk="
        let b = "http://t4.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk="
        let c =
          "http://t4.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=" //影像
        let d = "http://t4.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk="
        let e = "http://t4.tianditu.gov.cn/DataServer?T=cta_c&x={x}&y={y}&l={z}&tk="
        let f = "http://t4.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk="
        let normalm = L.tileLayer.chinaProvider("TianDiTu.Normal.Map", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          }),
          normala = L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          }),
          imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          }),
          imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          });
        let normal = L.layerGroup([normalm, normala]);
        let image = L.layerGroup([imgm, imga]);
        _that.normal = normal
        _that.image = image
        let baseLayers = {
          地图: normal,
          影像: image
        };
        const ret = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
          resolutions: [
            1.40625, // Level 0
            0.703125, // Level 1
            0.3515625, // Level 2
            0.17578125, // Level 3
            0.087890625, // Level 4
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            0.0006866455078125,
            0.00034332275390625,
            0.000171661376953125,
            8.58306884765625e-5,
            4.29153442382813e-5,
            2.14576721191406e-5,
            1.07288360595703e-5,
            5.36441802978516e-6,
            2.68220901489258e-6,
            1.34110450744629e-6,
          ],
          origin: [-180, 90]
        });

        _that.map = L.map("map", {
          center: [31.59, 120.29],
          zoom: 12,
          maxZoom: 18,
          minZoom: 5,
          layers: [normal],
          zoomControl: false
        });
        L.control.scale({
          maxWidth: 200,
          metric: true,
          imperial: false
        }).addTo(_that.map);
        // 如果想自定义那就可以用这个
       /** this.$axios.get('') // 转义
          .then((res) => {
            console.log(res);
            // _that.initPolygons(res.data, _that.factoryLandPolygon);
          }).catch((err) => {
            console.log(err);
          })*/
        _that.map.setView([30.3, 120.1769], 12); 
        //设置比例尺和中心点级别
        _that.factoryLandPolygon = esri.dynamicMapLayer({// 这个是GIS服务已经把颜色配置好  这边直接使用该API就可以渲染
          url: 'https://************/arcgis/rest/services/KGDK/MapServer', // GIS地址
          opacity: .6,
          useCors: true,
          maxZoom: 20,
          minZoom: 9,
        })
        this.map.addLayer(_that.factoryLandPolygon);
        _that.factoryLandPolygon.bindPopup(
          function(err, featureCollection, response) {
            _that.initPolygons(response.results[0], _that.factoryLandPolygon)
            _that.strings(JSON.stringify(response.results[0]))
            _that.actualityshow = true
          });
      },
        //   渲染面  由于自己业务逻辑所以有涉及到点击地图上面的面需要有选中状态  以及对应显示其信息
      initPolygons(aData, aDataScore) {
        console.log(aData);
        console.log(aDataScore)
        let self = this;
        let featureCollection = aData;
        let coor = featureCollection.geometry.rings;
        let item = featureCollection;
        //取面中第一个点此处需要考虑单面多面的情况
        let position = coor[0][0];
        let endPosition = coor[0][0];
        if (coor.length > 1) {
          position = coor[0][0][0];
          endPosition = coor[0][0][parseInt(coor[0][0].length / 2)];
        } else {
          if (parseInt(coor[0].length / 2) > 1) {
            endPosition = coor[0][parseInt(coor[0].length / 2)];
          }
        }
        let plang = self.revert(coor)
        let polygon = L.polygon(plang, {
          color: 'red', //表示边框颜色
          weight: 2, // 边框的宽度
          fillColor: "#000000", //表示填充颜色
          fillOpacity: 0 //表示透明度
        });
        polygon.addTo(self.activePolygon);// 把视图添加给面
        self.map.addLayer(self.activePolygon)// 把这个面加到地图里面
        self.map.setView([centerPoint[1], centerPoint[0]], 15); // 把视角转化到点击位置
      },
      revert(points) {
        //绘制元素
        // console.log(points)
        //由于返回的点是以经度，纬度格式，需要重新组织成纬度，经度格式
        var latlogs = [];
        for (var i = 0; i < points.length; i++) {
          var p = points[i];
          var path = [];
          for (var j = 0; j < p.length; j++) {
            if (p[j].length <= 2) {
              path.push([p[j][1], p[j][0]]);
            } else {
              for (var l = 0; l < p[j].length; l++) {
                if (Object.prototype.toString.call(p[j][l]) == "[object Array]") {
                  path.push([p[j][l][1], p[j][l][0]]);
                } else {
                  path.push([p[j][1], p[j][0]]);
                }
              }
            }
          }
          latlogs.push(path);
        }
        //   console.log(latlogs, "latlogs");
        return latlogs;
      },
      // 地图放大
      addZoom(zoom) {
        let _that = this;
        _that.map.zoomIn();
      },
      // 地图缩小
      subtractZoom(zoom) {
        let _that = this;
        _that.map.zoomOut();
      },
// 切换显示 直接removeLayer你初始化属性 即可达到隐藏目的
 _that.map.removeLayer(_that.activePolygon);
  // 如果你不只是想要隐藏 而是彻底删除 当下次渲染的时候是一个新的属性则需要 先removeLayer然后再初始化layerGroup
   _that.map.removeLayer(_that.activePolygon);
   _that.activePolygon = new L.layerGroup();
  

// 切换显示  天地图影像地图
HTML
    <el-drawer :visible.sync="drawer" id="swMap" :modal="false">
      <div class="demo-image__placeholder">
        <div class="block" :class="isactive == 'normal' ? 'active' : ''" @click="isyput()">
          <el-image class="imgSize" :src="mapType.nMap"></el-image>
          <span class="demonstration">标准地图</span>
        </div>
        <div class="block" :class="isactive == 'image' ? 'active' : ''" @click="isyingx()">
          <el-image class="imgSize" :src="mapType.iMap"></el-image>
          <span class="demonstration">影像地图</span>
        </div>
      </div>
    </el-drawer>
// JavaScript
    fun(){
      let normalm = L.tileLayer.chinaProvider("TianDiTu.Normal.Map", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          }),
          normala = L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          }),
          imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          }),
          imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {
            maxZoom: 18,
            minZoom: 5,
            key: _that.mapKey,
          });
        let normal = L.layerGroup([normalm, normala]);
        let image = L.layerGroup([imgm, imga]);
        _that.normal = normal
        _that.image = image
}
// 方法
      isyingx() {
        this.map.removeLayer(this.image)
        this.map.addLayer(this.image);
      },
      isyput() {
        this.map.removeLayer(this.normal)
        this.map.addLayer(this.normal);
      },