leaflet使用插件汇总

已于 2022-08-26 14:59:38 修改
阅读量1k 收藏 6
点赞数
分类专栏： 地图系列 文章标签： 前端 javascript github
于 2022-08-23 18:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyril_96/article/details/126483510
版权

1. 鹰眼图

插件leaflet-minimap
github：leaflet-minimap
示例

2. 点线几何绘制/覆盖物

插件leaflet-geoman，由原leaflet.pm迁移过来更新
github：leaflet-geoman
dist：{
js：https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js
css： https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css
}
示例

3. 点聚合

插件leaflet-markercluster
github：leaflet-markercluster
示例
示例2

4. 路径轨迹回放

插件leaflet-movingmarker
github： leaflet-movingmarker
示例

5. 搜索定位

插件leaflet-search
github： leaflet-search
示例

6. 地图Marker点击显示图片或视频

在自定义marker的基础之外，还可以通过给marker添加popup弹窗，并设置popup的content达到自定义弹窗内容的效果。

示例

7. 距离与面积计算

插件leaflet-measure-path
github： leaflet-measure-path
示例

8. 船舶路线回放

https://github.com/linghuam/Leaflet.TrackPlayBack

999. 地图3D服务

未完待续…

cyril_96
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
leaflet-plugins：Leaflet库的插件
02-21
传单插件 什么 ？ 杂项Leaflet插件，用于需要显示路线信息并需要来自不同提供商的卫星图像的服务。 当前它包括： 向量层（ layer/vector/ ）： GPX KML TOPOJSON 关于使用条款（ layer/tile ）实施的提供者： 使用Yandex Maps API v2； -具有适当的出处。 控制（ control/ ）： 永久链接-与OpenLayers兼容的永久链接，支持在哈希部分中存储位置数据（#lat = ...）； 兼容性 经过测试：Leaflet 1.0.x 与Leaflet 0.7.x一起使用，请参阅v2分支 在哪里 ？ 主页： : 下载： : npm： ://www.npmjs.org/package/leaflet-plugins cdnjs： ://cdnjs.com/libraries/leaflet-p
leaflet-geosearch:地理编码地址查找库，支持各种api提供程序
05-01
Leaflet.GeoSearch 演示和文档： 安装 更多文档@ 使用npm： npm install --save leaflet-geosearch 或纱线： yarn add leaflet-geosearch 浏览器支持/ Polyfills 更多文档@ 该库是在考虑最新技术的情况下编写的。 因此，当您希望支持较旧的浏览器时，需要包括一些polyfill。 建议将这些polyfill用于IE和Safari支持： array.includes ，用于array.includes支持。 ，用于fetch请求。 关于 该库为您的（网络）应用程序添加了对地址编码（地址查找，也称为地理搜索）的支持。 它带有嵌入在地图中的控件。 查看了解各种可能性。 该库使用所谓的“提供程序”来构建正确的服务URL，并将检索到的数据解析为统一格式。 由于有了这种体系结构，添加您
Leaflet地图实现定位搜索
m0_65720832的博客
07-30 2373
我用的是天地图里的api，因为是使用leaflet框架混合天地图开发的，功能也不是特别完善，也不是最优方案，有机会学习一下leaflet框架中定位搜索的api。地图搜索分为五级吧在我理解中，最后两个没搞，感觉用处不大并且费事，先实现最基本的功能。...
Leaflet教程，英文/国际版地图，vue项目集成Leaflet
最新发布
qq_16785561的博客
05-07 1596
Leaflet是一个轻量级的Web地图库，它支持多种平台和浏览器，并具有广泛的功能、良好的性能以及易用性。轻量级：Leaflet的文件大小较小，加载速度快，特别适合在移动设备和低带宽环境下使用。易用性：Leaflet提供了简单直观的API，使开发者能够快速上手并创建交互式地图。可定制性：Leaflet支持自定义图层、标记样式和交互行为，开发者可以根据自己的需求进行定制。跨平台兼容性：Leaflet可以在各种现代浏览器和移动设备上运行，并且与多种前端框架（如React、Vue等）兼容。
leaflet 插件使用
qq_37550440的博客
07-14 4769
效果图： 插件Leaflet.ChineseTmsProviders（中国底图底图）我代码中命名为china，放在leaflet.js 同级目录 L.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProvider.providers; .
leaflet使用draw插件测量距离和面积
qq_34736893的博客
02-01 2178
leaflet使用插件测量距离和面积
Leaflet-Geoman 帮助文档
DI_ID的博客
06-19 9717
Leaflet-Geoman 使用文档 安装 迁移 Leaflet.PM npm uninstall leaflet.pm npm i @geoman-io/leaflet-geoman-free 通过npm安装 npm i @geoman-io/leaflet-geoman-free 手动安装 下载leaflet-geoman.css 和leaflet-geoman.min.js ，然后把它们包含在工程中。 通过CDN安装 CSS <link rel="stylesheet" href="htt
Leaflet-Geoman学习笔记
qq_38436431的博客
10-18 1104
自定义绘制图层的样式，可以在调用 enableDraw 方法是，通过 options 进行设置，也可以通过如下代码方式手动设置：},{ignoreShapes: ["Circle", "Rectangle"], // 忽略的几何类型});
leaflet椭圆绘制插件
04-02
leaflet没有直接绘制椭圆的接口，引用此插件可以方便的绘制椭圆。
leaflet 开发插件，网络地图资源
10-29
Leaflet插件：用于提供来自不同提供商的图块图层，包括* OpenStreetMap *，* Stamen *，* Esri *和* OpenWeatherMap *。可以免费使用层的完整列表（预览）...
VUE 使用 leaflet
11-04
在vue中使用leaflet，底图引入了天地图,高德,Google等，对leafletApi做了简单封装，可以方便的调用相关Api。 封装的常用方法有： 测距、测面、地图切换、画多边形、画矩形、在地图中添加arcgis服务等
Leaflet.AnimatedSearchBox:一个简单的 Leaflet 插件，提供可折叠的搜索框
05-30
Leaflet.AnimatedSearchBox 一个简单的 Leaflet 插件，提供可折叠的搜索框。 用法 在文档的 head 部分包含文件： < link href =" src/AnimatedSearchBox.css " rel =" stylesheet " > 在您的文档中包含文件： < script src =" src/AnimatedSearchBox.js " > </ script > 将图片文件添加到img/search_icon.png 创建一个新的L.Control.Searchbox并将其添加到地图中： var searchbox = L . control . searchbox ( { position : 'topright' , expand : 'left' } ) . addTo ( map ) ; 选项 p
Leaflet实现路径轨迹回放
11-07
基于Leaflet实现路径轨迹回放功能，另外对Leaflet.Marker类进行扩展，支持设置图标旋转角度
leaflet_test.rar
05-14
此为html代码，为第一个由leaflet源码，编写html后标识杭州的代码文件夹，略有参考价值。
leaflet子图层控制.rar
10-30
SuperMap iClient for Leaflet子图层控制的范例代码，直接运行html即可看到效果
leaflet 地图插件整合 idea环境
09-12
在Leaflet中，可以使用Control.Layers或Leaflet.zoompancontrol这样的插件来实现这一功能。 至于"自定义坐标系"，这可能是指开发者可以根据需求定义自己的坐标系，通过设置合适的投影方式。Leaflet允许用户自定义...
leaflet动态风场插件
07-01
leaflet风场插件，可在前端页面中实现动态风场特效，与leaflet库配合使用
【笔记】Leaflet-MiniMap简单应用
程序边界
05-27 1069
文章目录安装设置 Leaflet-MiniMap：一个用于Leaflet的小地图控件插件 leaflet-minimap - npm https://leafletjs.com/reference-1.7.1.html#path Leaflet-MiniMap，也就是我们常说的小地图或 鹰眼 ： 安装 npm i leaflet-minimap 设置 new L.Control.MiniMap(this.img, { zoomAnimation: true, // 动画缩放 a
vue+leaflet笔记之热力图
fungis
06-21 4979
本文介绍了Web端使用Leaflet开发库展示热力图方法 ，结合leaflet.heat插件可以很容易的做出热力图，通过调整其配置参数可以优化热力图的显示，以达到最佳的可视化效果
leaflet curve插件
07-12
Leaflet Curve是一个Leaflet地图库的插件，用于在地图上绘制曲线路径。它可以用来绘制平滑的曲线，使地图路径更加自然和流畅。要使用Leaflet Curve插件，您需要在项目中引入Leaflet库和Leaflet Curve插件的JavaScript文件。然后，您可以使用Leaflet的API来创建和添加曲线到地图上。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-curve/dist/leaflet.curve.js"></script> <style> #map { height: 400px; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([51.505, -0.09], 13); 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); var path = [ [51.505, -0.09], [51.51, -0.1], [51.51, -0.12], [51.505, -0.09] ]; var curve = L.curve(path, { color: 'red', smoothFactor: 0.5 }).addTo(map); </script> </body> </html> ``` 在上面的示例中，我们创建了一个Leaflet地图，并在地图上绘制了一个曲线路径。路径由一系列经纬度坐标点组成，通过`L.curve()`方法创建曲线对象，并使用`addTo()`方法将曲线添加到地图上。您可以根据需要调整路径的坐标点和曲线的样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值