欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

leaflet的一些常用用法及插件用法(持续更新)

程序员文章站 2024-01-22 19:53:22
...

首先创建地图

var map = L.map('map'.setView([35, 105], 5)

实现定位

map.setView([31.99, 120.26], 13)

定义地图事件

  	map.off('click');//取消点击事件
    map.on('click', '方法名'); //点击地图
    map.on('dblclick', '方法名'); //双击完成
    map.on('mousemove',  '方法名');//地图移动

确定屏幕四角坐标

 		map.getBounds().getSouthWest().lng + ' ' + map.getBounds().getSouthWest().lat + ','
        //右下角:东南方
        +
        map.getBounds().getSouthEast().lng + ' ' + map.getBounds().getSouthEast().lat + ','
        //右上角坐标(东北方向)
        +
        map.getBounds().getNorthEast().lng + ' ' + map.getBounds().getNorthEast().lat + ','
        //左上角:西北方
        +
        map.getBounds().getNorthWest().lng + ' ' + map.getBounds().getNorthWest().lat + ',' +
        map.getBounds().getSouthWest().lng + ' ' + map.getBounds().getSouthWest().lat +

leaflet-measure的用法:

var options = {
      primaryLengthUnit: 'kilometers',
      secondaryLengthUnit: 'miles',
      primaryAreaUnit: 'sqmeters',
      secondaryAreaUnit: undefined
    }
    var measureControl = L.control.measure(options);
    measureControl.addTo(map);

绘制点:

      map.on('click', function (e) {
        console.log(e)
        L.marker(e.latlng, {
          name: "pointer"
        }).addTo(map);
      })

绘制面:

 var points = []
      var lines = new L.polyline([])
      var tempLines = new L.polygon([])
      map.on('click', onClick); //点击地图
      map.on('dblclick', onDoubleClick); //双击完成
      map.on('mousemove', onMove)

      function onClick(e) {

        points.push([e.latlng.lat, e.latlng.lng])
        lines.addLatLng(e.latlng)
        lines.options.name = 'polygon';
        map.addLayer(lines)
        map.addLayer(L.circle(e.latlng, {
          color: '#ff0000',
          name: 'polygon',
          fillColor: 'ff0000',
          fillOpacity: 1
        }))

      }

      function onMove(e) {
        if (points.length > 0) {
          ls = [points[points.length - 1],
            [e.latlng.lat, e.latlng.lng]
          ]
          tempLines.setLatLngs(ls);
          tempLines.options.name = 'polygon';
          map.addLayer(tempLines);
        }
      }

      function onDoubleClick(e) {
        L.polygon([points], {
          name: 'polygon'
        }).addTo(map)
        points = []
        lines = new L.polyline([])
      }