1. leaflet使用

1. leaflet 使用

yarn add leaflet

import "leaflet/dist/leaflet.css";
import L from "leaflet";

PS： 获取不到this._map，原因是vue3 的变量深监听所导致的，vue2就没有此类的问题发生
解决方法： 加 toRow() 代理变量

import  {toRow} from 'vue'

2. 引入天地图瓦片

let one = new L.tileLayer(
    'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=您的key', {
      zoomControl: true,
      attributionControl: false
    })
let two = new L.tileLayer(
    'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=您的key', {
      zoomControl: true,
      attributionControl: false
    })
let three = new L.tileLayer(
    'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=您的key', {
      zoomControl: true,
      attributionControl: false
    })
let four = new L.tileLayer(
    'http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=您的key', {
      zoomControl: true,
      attributionControl: false
    })
let normal = L.layerGroup([one, three])
let normal_ying = L.layerGroup([two, four])

let map = L.map("map", {
    center: [30.40, 120.22],
    zoom: 11,
    layers: [normal],
    attributionControl: false,
    preferCanvas: true,
  });

3. 引入腾讯地图

const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
const options = {
  subdomains: '0123',
  getUrlArgs: function (tilePoint) {
    return {
      z: tilePoint.z,
      x: tilePoint.x,
      y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y
    };
  }
};

const txLayer = L.tileLayer(txUrl,{subdomains: '0123',tms:true}).addTo(map);

4. 高德地图

卫星图

L.layerGroup([
         L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
           maxZoom: 20,
           maxNativeZoom: 18,
           minZoom: 3,
           // attribution: "高德地图 AutoNavi.com",
           subdomains: "1234"
         }),
         L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
           maxZoom: 20,
           maxNativeZoom: 18,
           minZoom: 3,
           attribution: "高德地图 AutoNavi.com",
           subdomains: "1234",
           opacity: 0.5
         })
       ]).addTo(map), //DEFAULT MAP

街道图

new L.tileLayer(
           'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
             // zoomControl: true,
             // attributionControl: false
           }).addTo(map), //DEFAULT MAP
       icon: '',
       name: '街道地图'
     },

5. marker数据量大使用 leaflet-canvas-marker

yarn add leaflet-canvas-marker
import 'leaflet-canvas-marker'

  let canvansLayer = L.canvasIconLayer({
    pane: 'markerPane'
  }).addTo(map);

pane 设置图层层级

6. 地图切换 leaflet-switch-basemap

yarn add leaflet-switch-basemap
import 'leaflet-switch-basemap'

 new L.basemapsSwitcher([
     {
       layer: L.layerGroup([
         L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
           maxZoom: 20,
           maxNativeZoom: 18,
           minZoom: 3,
           // attribution: "高德地图 AutoNavi.com",
           subdomains: "1234"
         }),
         L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
           maxZoom: 20,
           maxNativeZoom: 18,
           minZoom: 3,
           attribution: "高德地图 AutoNavi.com",
           subdomains: "1234",
           opacity: 0.5
         })
       ]).addTo(map), //DEFAULT MAP
       icon: '',
       name: '卫星地图'
     },
     {
       layer: new L.tileLayer(
           'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
             // zoomControl: true,
             // attributionControl: false
           }).addTo(map), //DEFAULT MAP
       icon: '',
       name: '街道地图'
     },
   ], { position: 'topright' }).addTo(map);

7. 添加和清除图层

let LPTownLayer
let LPTownMarkersGroup
let LPTownMarkersLayers = []
const addLPTownLayer = () => {
  removeLPTownLayer()

  Map.getGeojsonLPTown().then(res=>{
    LPTownLayer = L.geoJSON(res.data, {
      style: function (feature) {
        return {color: '#333'};
      }
    }).addTo(mapContent.map);
    //     .bindPopup(function (layer) {
    //   return layer.feature.properties.FNAME;
    // }).addTo(map);

    Object.values(LPTownLayer._layers).forEach(item=>{
      //显示文字
      let content = `<view>${item.feature.properties.FNAME}</view>`;

      // marker的icon文字
      let myIcon = L.divIcon({
        html: "<div style='color:#fff;'>"+content+"</div>",
        className: 'my-div-icon',
        // iconSize: 50
      });
      let marker = L.marker(item.getBounds().getCenter(), { icon: myIcon});
      LPTownMarkersLayers.push(marker)
    })

    LPTownMarkersGroup = L.layerGroup(LPTownMarkersLayers)
    mapContent.map.addLayer(LPTownMarkersGroup)
  })
}

const removeLPTownLayer = () => {
  if(LPTownMarkersGroup){
    LPTownMarkersGroup.clearLayers()
  }
  if(LPTownLayer){
    mapContent.map.removeLayer(LPTownLayer)
  }
}