<!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'/>
<!-- Load Leaflet from CDN -->
<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>
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资源评论
7oWin2022-10-15总算找到了想要的资源，搞定遇到的大问题，赞赞赞！
追夢人生2022-06-14用户下载后在一定时间内未进行评价，系统默认好评。
FeHMo2022-06-21用户下载后在一定时间内未进行评价，系统默认好评。
真的笨2021-07-27用户下载后在一定时间内未进行评价，系统默认好评。
