vue2 +leaflet平台添加天地图方法

Leaflet 地址（中文）

所用到的方法还是比较全面滴：https://leafletjs.cn/

下载安装

npm install @leaflet@1.9.3 @leaflet.chinatmsproviders@3.0.4

天地图申请key

注：2019年1月1日起天地图API及服务接口调用都需要获得开发授权,需要申请Key
网址:https://www.tianditu.gov.cn/

代码及实现

HTML部分：

 <div class="map_box">
    <div id="map"></div>
    <!--鼠标滑动的经纬度-->
    <p class="lng_lat">
      经度: {{ mouseCoordinates.lng }}，纬度: {{ mouseCoordinates.lat }}
    </p>
  </div>

javascript部分：

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.wmts";
//全局变量
let map = null;

export default {
  name: "MapComponent",

  props: {
    // 地图ID，默认值为 'map'
    mapId: {
      type: String,
      default: "map",
    },
    // 坐标系，默认为 'EPSG4326'（WGS84）
    crs: {
      type: [String, Object],
      default: "EPSG4326",
    },
    // 是否加载底图，默认为 true
    addBaseLayer: {
      type: Boolean,
      default: true,
    },
    // 底图列表，默认为空数组
    baseLayers: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      map: null,
      mouseCoordinates: {
        lat: 0,
        lng: 0,
      },
      baseMapLayer: [
        {
          name: "天地图影像底图",
          url: "http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=这里就是申请到的key",
          able: true,
          options: {
            zoomOffset: 1,
            unlimited: true,
            maxZoom: 20,
            minZoom: 6,
            maxNativeZoom: 16,
            subdomains: ["smap1", "smap2", "smap3", "smap4", "smap5"],
          },
        },
        {
          name: "天地图底图注记",
          url: "http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=这里就是申请到的key",
          able: true,
          options: {
            zoomOffset: 1,
            unlimited: true,
            maxZoom: 20,
            maxNativeZoom: 16,
            minZoom: 6,
            subdomains: ["smap1", "smap2", "smap3", "smap4", "smap5"],
          },
        },
      ],
    };
  },
  methods: {
    initMap() {
      let crs = typeof this.crs === "string" ? L.CRS[this.crs] : this.crs;
      if (crs === undefined) {
        throw new Error("不支的持坐标系：" + this.crs);
      }
      let layers = this.baseMapLayer
        .filter((l) => l.able)
        .map((layer) => {
          let l = L.tileLayer(layer.url, layer.options);
          l.name = layer.name;
          l.baseLayer = 1;
          return l;
        });
      let options = {
        crs,
        center: [23.359457, 104.224783],
        zoom: 7,
        layers,
        attributionControl: null,
        preferCanvas: true,
        editable: true,
        maxZoom: 18,
        minZoom: 7,
      };
      if (this.options) {
        Object.assign(options, this.options);
      }
      //console.log("地图初始化options：" + options);
      map = L.map(this.mapId, options);
      this.updateGeoJsonLayer();
      layers.forEach((l) => {
        map.addLayer(l);
      });
      // 创建水印图层
      L.Control.Watermark = L.Control.extend({
        onAdd: function (map) {
          var img = L.DomUtil.create("img");
          img.src = "https://ts1.cn.mm.bing.net/th/id/R-C.a04573a78c9d5630bb05152005405fcc?rik=1S6dcUPW0pb7ow&riu=http%3a%2f%2ffile.digitaling.com%2feImg%2fuimages%2f20161209%2f1481256067506462.jpg&ehk=EY5HlThkrplNQKDTCu9FUPS%2bf8Bpl%2f66To%2bgCYfsJRQ%3d&risl=&pid=ImgRaw&r=0";
          img.style.width = "200px";
          img.style.bottom = "25px";
          return img;
        },
      });

      L.control.watermark = function (opts) {
        return new L.Control.Watermark(opts);
      };

      L.control.watermark({ position: "bottomleft" }).addTo(map);
      map.on("mousemove", (event) => {
        this.mouseCoordinates.lat = event.latlng.lat.toFixed(4);
        this.mouseCoordinates.lng = event.latlng.lng.toFixed(4);
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      //console.log('DOM已经更新完成');
      this.initMap();
    });
  },
 
};
</script>

css部分：这里用到了scss需要安装一下
npm i -D node-sass sass-loader
//vue2.5.2需要降级安装
npm i -D node-sass@4.14.1 sass-loader@7.3.1

.map_box {
  height: 100%;
  position: relative;
  z-index: 0;
  left: 0;
  top: 0;

  .lng_lat {
    position: absolute;
    left: 10px;
    bottom: 5px;
    z-index: 999;
    color: white;
    font-weight: bold;
  }
}

最终效果如下：

需要什么样的底图可以更换这个链接：http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=这里就是申请到的key