使用轻量级leaflet地图开源JavaScript库

最新推荐文章于 2024-05-28 09:35:39 发布

冰清-小魔鱼

最新推荐文章于 2024-05-28 09:35:39 发布

阅读量2k

点赞数 1

分类专栏： GIS

本文链接：https://blog.csdn.net/lijie45655/article/details/101484225

版权

GIS 专栏收录该内容

70 篇文章 50 订阅

订阅专栏

Leaflet是一个用于移动端渲染交互式地图开源JavaScript库。其体积只有约38KB，比起一般的地图API，如openlayers，小了太多太多，轻量简洁，支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。LeafLet js 结构层次如下：

创建一个简单的地图API 网页：

<!DOCTYPE html>
<html>
<head>
   <title>Quick Start - Leaflet</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
   var mymap = L.map('mapid').setView([22.81, 108.89], 6);
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
       maxZoom: 18,
       attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
           '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
           'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
       id: 'mapbox.streets'
   }).addTo(mymap);
</script>
</body>
</html>

以上代码运行如下：

其中head 部分为引用leaflet javascript 库体，后面script为加载openstreetmap地图。

可在LeafLet js 官网： https://leafletjs.com/download.html，下载最新的leaflet包

LeafLet js 官网demo： http://leafletjs.com/examples.html ，查看相关示例教程

LeafLet js 官网API：https://leafletjs.com/reference-1.5.0.html ，最新的api说明。

LeafLet js 基本功能：

地图加载（底图类型、切换）：
地图操作（缩放、平移、定位/书签、动画）：
图层管理（加载、移除、调整顺序）：
要素标绘（点/聚簇、线、面，符号化/静态动态）：
属性标注（字段可选、样式定制）：
专题地图（点、线、面，渲染）：
查询定位（属性查询、空间查询/周边搜索/缓冲区/面查点线面/点线查面、图属互查、综合查询）：
信息窗口（入口、Popup、定制）：
坐标转换（地理与投影、不同地理坐标系）：
空间运算（长度面积测量、点取坐标、缓冲区、相交包含关系）：
动态监控（固定点状态切换、车辆监控）。

附件：案例

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地图要素渲染（适用于三维要素绘制）（非常重要）
https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL

8、快速重新渲染地图要素，动态修改地图样式（适用于矢量切片）(不用二次发布服务)（很实用）
（颜色获取） https://github.com/frogcat/leaflet-tilelayer-colorpicker

（样式调整）https://github.com/hnrchrdl/leaflet-tilelayer-colorizr

9、快速获取要素范围和属性信息（tootip方式）
https://github.com/consbio/Leaflet.UTFGrid

10、缓冲区（不推荐，存在bug，推荐使用geotools api后台生成缓冲区，需要坐标转换）
https://github.com/TolonUK/Leaflet.EdgeBuffer https://github.com/skeate/Leaflet.buffer

11、要素图层组加载过程数据获取（支持FeatureGroup loading和load事件）
https://github.com/Outdooractive/Leaflet.FeatureGroup.LoadEvents

12、地图要素移除，动态重新渲染底图（动画效果，缓冲效果）
https://gitlab.com/IvanSanchez/Leaflet.GridLayer.FadeOut

13、地图矢量切片服务加载和渲染（非常重要）
https://github.com/Leaflet/Leaflet.VectorGrid

（mapbox切片渲染）https://github.com/SpatialServer/Leaflet.MapboxVectorTile

（geojson格式渲染）https://github.com/mapbox/geojson-vt

14、常用格式地理数据加载（WKT、GeoJSON、KML、GPX、CSV、MDB、Shp等）
https://github.com/mapbox/leaflet-omnivore

https://github.com/makinacorpus/Leaflet.FileLayer

https://github.com/calvinmetcalf/leaflet.shapefile

15、地图WFS服务操作，数据增删改查（Inert、Update、Delete、Query、Transaction）（重中之重，WFS服务封装，结合oracle或者postgis数据库，arcgis server或者geoserver后台服务搭建）
https://github.com/Flexberry/Leaflet-WFST

存在bug，需要修改，已在github issues中为作者留言，希望尽快解决；

如果geoserver搭建服务端：

typeNS表示工作区间， typeName表示图层名称（表名一致）

16、自定义label标签（Marker，polygon）
https://github.com/Leaflet/Leaflet.label

17、自定义marker
https://github.com/marslan390/BeautifyMarker

18、聚合数据
https://github.com/Leaflet/Leaflet.markercluster

https://github.com/MazeMap/Leaflet.LayerGroup.Collision

https://github.com/SINTEF-9012/PruneCluster

19、热力图
https://github.com/Leaflet/Leaflet.heat

http://ursudio.com/webgl-heatmap-leaflet/

20、加载echarts图（聚合图、迁徙图、热力图）（非常实用）
https://github.com/wandergis/leaflet-echarts.git

21、要素编辑（面合并、分割、创建要素等）（结合leaflet.wfst）(非常实用)
https://github.com/Leaflet/Leaflet.toolbar

https://github.com/Leaflet/Leaflet.draw

https://github.com/Leaflet/Leaflet.Editable

https://github.com/codeofsumit/leaflet.pm

https://github.com/willfarrell/Leaflet.Clipper

22、图层切换，要素显示隐藏
https://github.com/ismyrnow/leaflet-groupedlayercontrol

23、地图导航条、全屏控件
https://github.com/turbo87/sidebar-v2/

https://github.com/kartena/Leaflet.Pancontrol

https://github.com/kartena/Leaflet.zoomslider

https://github.com/Leaflet/Leaflet.fullscreen

https://github.com/brunob/leaflet.fullscreen

24、鹰眼图
https://github.com/Norkart/Leaflet-MiniMap

25、测量控件
https://github.com/ljagis/leaflet-measure

26、控件按钮样式设置
https://github.com/CliffCloud/Leaflet.EasyButton

https://github.com/aratcliffe/Leaflet.contextmenu

27、地图打印插件
https://github.com/rowanwins/leaflet-easyPrint

https://github.com/Igor-Vladyka/leaflet.browser.print

28、定位当前位置
https://github.com/domoritz/leaflet-locatecontrol

29、坐标转换插件（与缓冲区、测量配合使用）（非常实用）
https://github.com/kartena/Proj4Leaflet

30、空间位置分析（非常实用）
（点是否在面内）https://github.com/kartena/Proj4Leaflet

（计算面积、距离）https://github.com/makinacorpus/Leaflet.GeometryUtil/blob/master/src/leaflet.geometryutil.js

31、路径分析（纠偏，地图匹配算法）
https://github.com/perliedman/leaflet-routing-machine

https://github.com/Project-OSRM/osrm-frontend

32、poi模糊查询
https://github.com/smeijer/leaflet-geosearch

https://github.com/perliedman/leaflet-control-geocoder

33、等势线、等势面
https://github.com/timwis/leaflet-choropleth

冰清-小魔鱼

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用轻量级leaflet地图开源JavaScript库

Leaflet是一个用于移动端渲染交互式地图开源JavaScript库。其体积只有约38KB，比起一般的地图API，如openlayers，小了太多太多，轻量简洁，支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。LeafLet js 结构层次如下：创建一个简单的地图API 网页：<!DOCTYPE html><html>&lt...
复制链接

扫一扫