leaflet的一些常用用法及插件用法（持续更新）

最新推荐文章于 2025-06-23 17:15:48 发布

Miyagi.Z

最新推荐文章于 2025-06-23 17:15:48 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： leaflet gis 前端 leaflet绘制

本文链接：https://blog.youkuaiyun.com/weixin_42476786/article/details/97390411

本文详细介绍了使用Leaflet JavaScript库进行地图操作的方法，包括创建地图、定位、定义地图事件、获取屏幕四角坐标以及如何使用leaflet-measure进行测量。此外，还提供了绘制点和面的具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建地图

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([])
      }