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

本文详细介绍了使用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([])
      }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值