自学leaflet1

╰半夏微凉° 2022-10-31 12:09 153阅读 0赞

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>

# 完 #