自学leaflet1

leaflet在vue项目中的引入

• 1 首先在component中创建map文件夹， 再创建index.vue

<template>
  <div id="the-map" class="the-map"></div>
</template>

<script lang='ts'>
import { Component, Vue, Emit } from 'vue-property-decorator'
import L, { LatLngLiteral, FeatureGroup } from 'leaflet';

@Component
export default class CMap extends Vue {
  pointsLayer: any = {}
  getMap!: () => L.Map  // 初始化地图
  mapReady: boolean = false  // 地图实例是否ready
  zoomLevel: number = 12  // 初始缩放
  ele: any = null  // 自制鼠标移入显示经纬度标签

  get tileLayers() {
    const options = {
      subdomains: ['1', '2', '3', '4'],
      maxZoom: 20,
      minZoom: 1,
      maxNativeZoom: 18,
      attribution: '&copy map-fe'
    } // 地图属性
    const txLayer = new L.TileLayer('http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0', {
      ...options,
      tms: true,
      subdomains: ['0', '1', '2', '3']
    }) // 腾讯地图
    const gaodeLayer = new L.TileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', options) // 高德地图
    const didiBaseMap = new L.TileLayer('http://tile{s}.map.xiaojukeji.com/{z}/{x}/{y}.png', {
      ...options,
      tms: true
    }) // 滴滴地图
    const googleLayer = new L.TileLayer('http://mt0.google.cn/vt/lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga', {
      maxZoom: 20,
      maxNativeZoom: 18,
      minZoom: 1,
      attribution: '&copy map-fe'
    }) // 谷歌地图
    const gaodeSate = new L.TileLayer('https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
      maxZoom: 20,
      minZoom: 1,
      maxNativeZoom: 18,
    }) // 高德卫星
    const googleState = new L.TileLayer('http://www.google.cn/maps/vt?lyrs=s@729&gl=cn&x={x}&y={y}&z={z}', {
      maxZoom: 20,
      minZoom: 1,
      maxNativeZoom: 18,
    }) // 谷歌卫星
    return {
      '滴滴': didiBaseMap,
      '腾讯': txLayer,
      '高德': gaodeLayer,
      '谷歌': googleLayer,
      '高德卫星': gaodeSate,
      // '谷歌卫星': googleState,
    }
  }
  // 检测地图ready修改对应属性
  @Emit('map-ready')
  onMapReady(getMap: () => L.Map) {
    this.mapReady = true
    return getMap
  }
  // 
  @Emit('open-pano')
  openPano(e: { latlng: LatLngLiteral }) {
    return e.latlng
  }

  init() {
    // const center = Math.floor(lines.length / 2);
    const layer = this.tileLayers['滴滴']
    const CMap: any = new L.Map('the-map', {
      layers: [layer],
      // center: lines[center],
      center: [39.928953, 116.389129],
      attributionControl: true,
      zoomControl: false,
      zoom: this.zoomLevel,
      renderer: L.canvas(),
    })
    const CLayerGroup = new FeatureGroup()
    CMap.addLayer(CLayerGroup)
    CMap.on('zoom', (e: any) => {
      this.zoomLevel = e.target._zoom
    })
	// 自制鼠标移入显示经纬度
    CMap.on('mousemove', (e: any) => {
      this.ele && document.body.removeChild(this.ele)
      if (this.isActive || this.activeChange) {
        this.ele = null
        return
      }
      let latlng = e.latlng;
      const lat = latlng.lat.toFixed(5);
      const lng = latlng.lng.toFixed(5);
      this.ele = document.createElement('div')
      this.ele.innerHTML = `lng: ${lng}, lat: ${lat}`
      this.ele.style.position = 'fixed';
      this.ele.style.left = `${e.originalEvent.clientX}px`;
      this.ele.style.top = `${e.originalEvent.clientY + 10}px`;
      this.ele.style.zIndex = 1000;
      this.ele.style.backgroundColor = '#fff';
      this.ele.style.color = '#000';
      this.ele.style.padding = '5px';
      this.ele.style.borderRadius = '3px';
      document.body.appendChild(this.ele);
    });
	// 鼠标移出地图删除元素
    CMap.on('mouseout', (e: any) => {
      this.ele && document.body.removeChild(this.ele)
      this.ele = null
    })
	// 鼠标点击复制经纬度
    CMap.on('click', (e: any) => {
      if (this.isActive || this.activeChange) {
        return
      }
      let latlng = e.latlng;
      const lat = latlng.lat.toFixed(5);
      const lng = latlng.lng.toFixed(5);
      this.copyToClip(`${lng},${lat}`, 1)
    })
    CMap.ifGlLayerInitiated = () => {}
    CMap.getGlLayerInitState = () => {}
	// 控制地图控件的位置
    L.control.scale({ position: 'bottomright', imperial: false}).addTo(CMap);
    L.control.layers(this.tileLayers, {}, { position: 'bottomleft' }).addTo(CMap);
    L.control.zoom({ position: 'topleft' }).addTo(CMap);
    (CMap as any).NAME = 'the-map'
    const getMap = this.getMap = () => CMap
    this.onMapReady(getMap)
    // 最后把地图挂载到window，实现全局调用地图
    window.CMap = CMap
    window.CLayerGroup = CLayerGroup
    return CMap
  }
  // 复制经纬度函数
  copyToClip(content: string, message: any) {
    const aux = document.createElement('input');
    aux.setAttribute('value', content);
    document.body.appendChild(aux);
    aux.select();
    document.execCommand('copy');
    document.body.removeChild(aux);
    if (message) {
      this.$Message.success(`复制成功, ${content}`);
    } else {
      this.$Message.error('复制失败');
    }
  }

  /* hooks */
  async mounted() {
    this.init()
  }
}
</script>

<style scoped lang='less'>
#the-map {
  // width: 100%;
  height: 100%;
  position: relative;
}
</style>

完