接上次我们所说的地图展示之后,后续一些我自己学习到的功能及应用,有什么不对的地方还希望大家指出来
先介绍一下我这边想做的功能把,这里有两个按钮,在按到按钮的时候做出响应的方法
第一个按钮呢功能是画点,第二个功能呢就是实现简单的画线
-
首先呢,我们还是在做这些功能之前,分析一个大体的方向
-
我们要找到Leaflet.js中的画点,画线功能,封装成我们自己的方法
-
在标记之前我们要清空上一次的点击事件,因为在同一个容器中,注册不一样的点击事件,会存在冒泡发生
好了话不多说了,我们看代码吧
首先我们看画点的代码
// 标记绘画
function DrawPoint() {
map.on('click', function (e) {
var lat = e.latlng.lat;
var lng = e.latlng.lng;
var marker = L.marker([lat, lng], {
draggable: true // 允许点位拖拽
}).addTo(map);
//拖拽结束
marker.on('dragend', function (event) {
console.log('实时坐标:' + marker.getLatLng());
})
});
}
其次在看我们画线的代码
//线绘画
function DrawLine() {
var points = [] // 定义一个空数组
var lines = new L.polyline(points) //给数组点位信息添加到地图上绘制折线叠加层的类中
var tempLines = new L.polyline([]) // 多点绘制的折线
map.on('click', onClick); //绑定单击事件
map.on('dblclick', onDoubleClick); //绑定双击事件
// 鼠标单击事件
function onClick(e) {
points.push([e.latlng.lat, e.latlng.lng]) //把用户操作的经纬度添加到定义的空数组中
lines.addLatLng(e.latlng) // 给数据添加到折线中。
map.addLayer(lines) //给数组信息添加到图层中
map.addLayer(L.polyline(e.latlng)) //把折线添加到数组中
map.on('mousemove', onMove) // 绑定鼠标移动事件(单击后可以观察到线条)
// 实时打印出来点位信息
console.log(e.latlng.lat, e.latlng.lng);
}
// 移动过程中可视化线条
function onMove(e) {
if (points.length > 0) {
ls = [points[points.length - 1],
[e.latlng.lat, e.latlng.lng]
]
tempLines.setLatLngs(ls)
map.addLayer(tempLines)
}
}
//鼠标双击事件
function onDoubleClick(e) {
L.polyline(points).addTo(map) //把最后绘制完成的折线添加到图层
points = [] // 清空数组信息(准备下一次绘制)
lines = new L.polyline(points) // 从新定义绘制折线叠加层的点位信息
map.off('mousemove') // 双击完成后移除鼠标移动事件
console.log('结束点' + e.latlng.lat, e.latlng.lng);
}
}
然后我们在上面做出调用,在这里要注意,map.off("click") 在从新注册事件之前清空上一次的点击事件
//动态标记
$("#tourpoint").click(function () {
// 在点击标记事件之前清空上一次的点击事件
map.off('click');
DrawPoint();
});
//动态绘制线
$("#linepatrol").click(function () {
// 在点击标记事件之前清空上一次的点击事件
map.off('click');
DrawLine();
});
这个功能也就算了完成了,有什么不对的地方希望大家指出来