5.（leaflet篇）leaflet点采集与点编辑.zip资源-CSDN文库

共14个文件

png：7个

js：5个

html：1个

版权申诉

5星 · 超过95%的资源 188 浏览量 2021-05-24 10:27:06 上传评论 1 收藏 209KB ZIP 举报

Leaflet是一款轻量级的JavaScript库，专门用于创建交互式的地图应用。在“5.（leaflet篇）leaflet点采集与点编辑.zip”这个压缩包中，我们很显然将要探讨如何在Leaflet地图上添加、收集和编辑点数据。这篇教程可能包含一系列步骤和技术，帮助开发者或地理信息系统（GIS）爱好者在网页上实现这些功能。让我们深入了解一下Leaflet的基本概念和点操作的相关知识。 1. Leaflet基础： Leaflet设计简洁，易于上手，适用于各种规模的项目。它支持多种地图源，如OpenStreetMap、Mapbox等，并提供丰富的API供开发者进行自定义。Leaflet的核心对象包括地图（Map）、图层（Layer）、控件（Control）等。 2. 添加地图：在网页中集成Leaflet地图，首先需要创建一个`L.Map`实例，指定容器元素和初始中心点。例如： ```javascript var map = L.map('mapid').setView([51.505, -0.09], 13); ``` 这行代码会在ID为'mapid'的DOM元素中创建地图，并将其视图中心设置在伦敦附近。 3. 添加图层： Leaflet中的图层可以是瓷砖图层（TileLayer）、GeoJSON图层、标记（Marker）等。要添加地图服务，可以使用`L.tileLayer`，例如： ```javascript L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); ``` 4. 添加点标记：点标记（Marker）常用于表示地图上的特定位置。创建一个标记并添加到地图： ```javascript var marker = L.marker([51.5, -0.09]).addTo(map); ``` 标记可以通过拖动来改变位置，也可以添加点击事件监听器。 5. 点采集：要实现点的采集，可以监听地图的`click`事件，当用户点击地图时获取点击位置的经纬度。这可以用来记录用户的点击点，创建新的标记，或者将位置数据存储在后台数据库。 6. 点编辑：对于点的编辑，通常涉及到移动标记或修改其属性。Leaflet本身不直接支持编辑模式，但可以借助插件如Leaflet.Draw实现。Leaflet.Draw提供了一个全面的绘图工具集，包括点、线、多边形的绘制和编辑功能。 7. Leaflet.Draw的使用：首先需要引入Leaflet.Draw的CSS和JS文件，然后在地图实例上初始化Draw控制： ```javascript var drawControl = new L.Control.Draw(); map.addControl(drawControl); ``` 通过监听`draw:created`事件，我们可以获取到用户绘制的几何对象，并进行后续处理。 8. 存储与加载数据：为了保存和加载点数据，你可以选择使用GeoJSON格式，它是一种轻量级的数据交换格式。数据可以通过Ajax请求发送到服务器，或从服务器获取后动态渲染在地图上。 9. 提高用户体验：可以添加交互式控件，如搜索框、弹出窗口等，让用户更方便地查找、编辑点信息。例如，使用Leaflet的InfoBox插件创建信息框，或者使用Geocoding服务搜索地址。 “5.（leaflet篇）leaflet点采集与点编辑.zip”这个资源可能涵盖了以上所有内容，帮助你创建一个功能完善的地图应用，让用户能够添加、编辑地图上的点数据。通过实践和学习这些技术，你将能够开发出具有高度互动性和实用性的GIS应用。

资源推荐

资源详情

资源评论

收起资源包目录

5.（leaflet篇）leaflet点采集与点编辑.zip （14个子文件）

map

images

red.png 4KB

add.png 4KB

5.（leaflet篇）点采集与点编辑.html 4KB

lib

proj4

proj4.js 72KB

proj4leaflet.js 7KB

proj4-compressed.js 72KB

leaflet

images

marker-icon-2x.png 4KB

marker-icon.png 2KB

layers.png 1KB

layers-2x.png 3KB

marker-shadow.png 797B

leaflet.js 136KB

leaflet-src.js 415KB

leaflet.css 13KB

<!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>  <link rel="stylesheet" href="lib/leaflet/leaflet.css"/> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } </style> <script src="lib/leaflet/leaflet-src.js"></script> <script src="lib/proj4/proj4.js"></script> <script src="lib/proj4/proj4leaflet.js"></script> </head> <body> <input type="button" value="点采集" onclick="gatherPoint()" style="cursor:pointer;position:absolute;left:100px;top:50px;z-index:9999;background:blue;color:white;border:none"> <input type="button" value="添加可编辑点" onclick="editPoint()" style="cursor:pointer;position:absolute;left:100px;top:100px;z-index:9999;background:blue;color:white;border:none"> <input type="button" value="可编辑点进入编辑模式" onclick="startEditMarker()" style="cursor:pointer;position:absolute;left:100px;top:130px;z-index:9999;background:blue;color:white;border:none"> <input type="button" value="可编辑点结束编辑模式" onclick="endEditMarker()" style="cursor:pointer;position:absolute;left:100px;top:160px;z-index:9999;background:blue;color:white;border:none"> <div id="map"></div> <script> //L.CRS.EPSG4326 var map = L.map('map'); //高德、google图层，地图服务地址可替换成爬取离线部署的地图服务，如：http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png //高德URL：http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z} //openstreetmap：https://tile.openstreetmap.org/{z}/{x}/{y}.png //以上地址如果不能访问到新版地图URL，可通过访问新版地图，通过F12-->network获取 new L.TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, minZoom: 1, attribution: 'ⓒ 2012 Daum' }).addTo(map); var center_point = [24.522422570142833, 118.11471659369913]; map.setView(center_point, 12); function gatherPoint() { map.on('click', mapEvent, "gatherClick"); } function mapEvent(e) { var iconJson = {}; iconJson.option = {}; iconJson.option.iconUrl = "images/add.png"; iconJson.option.iconAnchor = [21, 42];//坐标固定在图标的哪个点，[0,0]表示图标的左上角 iconJson.option.iconSize = [42, 42]; var gatherIcon = L.icon(iconJson.option); var gather_marker_layer = new L.marker([e.latlng.lat, e.latlng.lng], { icon: gatherIcon, draggable: false }); gather_marker_layer.addTo(map); gather_marker_layer.xy = gather_marker_layer._latlng; markerReceiver(gather_marker_layer); } function markerReceiver(markerObj) { console.log("上图的对象", markerObj); console.log("采集坐标：", markerObj.xy); map.off('click', mapEvent, "gatherClick");//移除地图点击事件 } var editMarker = null; function editPoint() { var iconJson = {}; iconJson.option = {}; iconJson.option.iconUrl = "images/red.png"; iconJson.option.iconAnchor = [21, 42];//坐标固定在图标的哪个点，[0,0]表示图标的左上角 iconJson.option.iconSize = [42, 42]; var gatherIcon = L.icon(iconJson.option); editMarker = new L.marker([24.522422570142833, 118.11471659369913], { icon: gatherIcon, draggable: false }); editMarker.addTo(map); } function startEditMarker() { editMarker.dragging.enable(); } function endEditMarker() { editMarker.dragging.disable(); editMarker.off('drag'); console.log("结束采集的坐标点：", editMarker._latlng); } </script> </body> </html>

评论收藏

内容反馈

版权申诉