leaflet常用插件

leafletjs地图框架,在地图这块功能还是强大,而且支持插件扩展和自定义开发。虽然leafletjs源码很小,功能精简,但是框架优势在于,插件自定义开发和扩展这部分设计,而且开源。
        现在发现只要项目用得到的,在leaflet插件中都可找到应用或者类似应用,给开发带来很大方便。以下是整理的部分插件    
1、常用地图切换加载(osm、google、baidu、gaode、tianditu.etc)

https://github.com/htoooth/Leaflet.ChineseTmsProviders
2、切片地图加载(wmts)(支持矢量切片)

https://github.com/mylen/leaflet.TileLayer.WMTS
3、wms地图服务加载

https://github.com/heigeo/leaflet.wms
4、视窗范围框定(只容许查看和编辑给定范围地图)

https://github.com/aparshin/leaflet-boundary-canvas
5、地图要素显示比例尺控制(不同比例尺要素渲染)(根据屏幕坐标控制)(非常重要,常用)

https://github.com/GreenInfo-Network/L.TileLayer.PixelFilter/
6、卷帘对比(卷积运算)(历史对比)(非常重要)

https://github.com/digidem/leaflet-side-by-side
7、webGL地图要素渲染(适用于三维要素绘制)(非常重要ÿ

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]中提到了清空测绘图层和取消监听方法的代码片段,但是没有提到具体的Leaflet测距插件。在Leaflet中,有一个常用的测距插件叫做Leaflet.MeasureControl。这个插件可以用于在地图上进行距离和面积的测量。你可以通过引入该插件的库文件,并在地图上添加相应的控件来实现测距功能。 以下是一个使用Leaflet.MeasureControl插件的示例代码: ```javascript // 引入LeafletLeaflet.MeasureControl库文件 import L from 'leaflet'; import 'leaflet-measure'; // 创建地图实例 const map = L.map('map'); // 添加底图图层 const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', }).addTo(map); // 添加测距控件 const measureControl = new L.Control.Measure({ position: 'topright', primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters', secondaryAreaUnit: 'hectares', }); measureControl.addTo(map); ``` 在上述代码中,我们首先引入了LeafletLeaflet.MeasureControl库文件。然后创建了一个地图实例,并添加了一个底图图层。接下来,我们创建了一个测距控件实例,并设置了控件的位置和单位。最后,将测距控件添加到地图上。 通过以上代码,你可以在Leaflet地图上使用测距插件进行距离和面积的测量。请注意,你需要根据自己的项目需求进行相应的配置和样式调整。 #### 引用[.reference_title] - *1* [如何在React和Vue框架中实现leafLet.js测距和测面工具](https://blog.csdn.net/weixin_44733660/article/details/120173108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值