leaflet.js-vue使用心得

初始化地图

// minZoom:最小地图缩放等级
// minZoom:最大地图缩放等级
// center:地图加载完成中心点位置
// zoom:地图加载完成出师地图等级
// zoomControl:是否打开地图放大缩小工具
// crs:坐标系
    let map = L.map('map', {
      minZoom: 3,
      maxZoom: 14,
      center: [24.59, 116.114129],
      zoom: 8,
      zoomControl: true,
      crs: L.CRS.EPSG3857,
    })
    this.map = map
    // 加载谷歌地图
	// L.tileLayer(瓦片地图地址)
	// addTo:将远程瓦片地图添加进地图中
	L.tileLayer('xxxxx').addTo(this.map)//这是官方加载远程地图写法
	//chinaProvider,第三方地图资源包,主要用于加载不同类型的地图
	L.tileLayer.chinaProvider('Geoq.Normal.Map', { maxZoom: 18, minZoom: 5 }).addTo(this.map)//第三方

chinaProvider GITHub地址: link.

Marker单独标记使用

//L.marker(坐标点)
 L.marker([24.26, 118.04]).addTo(this.map)

Marker多个标记使用

    var latlng2 = [
      { lat: 24.59, lng: 118.305319, info: 'ssss1' },
      { lat: 24.568004, lng: 118.536865, info: 'ssss1' },
      { lat: 24.538535, lng: 118.554931, info: 'ssss1' },
      { lat: 24.538535, lng: 118.524931, info: 'ssss5' },
      { lat: 24.538535, lng: 118.534931, info: 'ssss6' },
      { lat: 24.538535, lng: 118.564931, info: 'ssss9' },
      { lat: 24.538535, lng: 118.574931, info: 'ssss10' },
      { lat: 24.538535, lng: 118.584931, info: 'ssss1' },
      { lat: 24.538535, lng: 118.594931, info: 'ssss1' },
    ]
// L.markerClusterGroup 创建marker集合
// L.icon:设置自定义marker图标
// bindPopup:设置显示弹窗，点击marker图标
    let greenIcon = L.icon({
      iconUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2474014982,2446291431&fm=15&gp=0.jpg',
      iconSize: [25, 25],
    })
    var layers = []
    this.markers = L.markerClusterGroup()
    for (let i = 0; i < latlng2.length; i++) {
      var tipContent = '<p>'
      tipContent += 'lat:'
      tipContent += latlng2[i].lat + '</br>'
      tipContent += 'lng:'
      tipContent += latlng2[i].lng + '</br>'
      tipContent += ' <button style="cursor: pointer;" onClick="trackPath()">轨迹回放</button>'
      tipContent += '</p>'
      var layer = new L.marker([latlng2[i].lat, latlng2[i].lng], { icon: greenIcon }).bindPopup(tipContent).openPopup()
      layers.push(layer)
      this.markers.addLayer(layer)
    }
    this.markerGroup = L.layerGroup(layers)
    this.map.addLayer(this.markers)

虚线

    // 虚线
    //官方没有提供绘画虚线的方法。需要调用第三方封装好的api
    this.decorator = L.polylineDecorator(
      [
        [32, -130],
        [22, -120],
        [13, -100],
        [24.26, 118.04],
      ],
      {
        patterns: [
          // defines a pattern of 10px-wide dashes, repeated every 20px on the line
          { offset: 0, repeat: 20, symbol: L.Symbol.dash({ pixelSize: 10 }) },
        ],
      }
    ).addTo(this.map)

gitHub:polylineDecorator

绘画圆，矩形，不规则图形

//绘画不规则图形这里主要运用的是leaflet-draw组件
// mouseover：鼠标悬浮事件，
// mouseout：鼠标离开事件
// contextmenu:鼠标右击事件
    var drawnItems = new L.FeatureGroup()
    this.map.addLayer(drawnItems)
    var drawControl = new L.Control.Draw({
      edit: {
        featureGroup: drawnItems,
      },
    })
    this.map.addControl(drawControl)
    this.map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer
      event.layer.on('mouseover', function () {
        layer.bindTooltip('右键删除')
        layer.setStyle({
          weight: 5,
          color: '#000',
          dashArray: '',
          fillOpacity: 0.2,
        })
      })
      event.layer.on('mouseout', function () {
        layer.setStyle({
          weight: 5,
          color: '#3388ff',
          dashArray: '',
          fillOpacity: 0.2,
        })
      })
      event.layer.on('contextmenu', function () {
        for (let n = 0; n < _this.roundList.length; n++) {
          if (_this.roundList[n].layer._leaflet_id == layer._leaflet_id) {
            _this.roundList.splice(n, 1)
            _this.map.removeLayer(layer)
            return
          }
        }

        // console.log(layer)
      })
      drawnItems.addLayer(layer)
      _this.roundList.push(event)
      console.log(event)
    })

gitHub：leaflet-draw