作者:lly
我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标点击进行多点距离测量。先来看一看是什么效果:
说明:
本文使用的数据为iServer自带的范例数据World地图;代码中提供了服务端与客户端两种量算方式(客户端量算使用turf实现),本文主要介绍服务端量算。
一.开发包引入及初始化底图
取消地图默认双击事件,如需使用客户端量算,需include turf
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" include="turf" src="../leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "http://localhost:8090";
var map, url = host + "/iserver/services/map-world/rest/maps/World";
var corner1 = L.latLng(-90, -180),
corner2 = L.latLng(90, 180);
var bounds = L.latLngBounds(corner1, corner2);
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
zoom: 2,
doubleClickZoom: false,
maxBounds: bounds
});
L.supermap.tiledMapLayer(url).addTo(map);
二、绘制起始点
使用icon的方式将文本标记绘制到指定位置
TempLayer.clearLayers();
$("#tips").css('display', 'none');
var polyLine;
if(isFirstPoint) {
L.marker([ev.latlng.lat, ev.latlng.lng]).addTo(resultLayer); //起始点
var texticon = L.divIcon({ //定义图标
html: "起点",
iconSize: [30, 20],
iconAnchor: [15, 0]
});
L.marker([ev.latlng.lat, ev.latlng.lng], {
icon: texticon
}).addTo(resultLayer); //marker实现文本框显示
latLngTemp = ev.latlng; //存储上一点击点
isFirstPoint = false;
}
三、绘制后续点并展示
获取上次点击与后续点击点并连线,通过接口请求到距离值并展示到地图
if(!latLngTemp.equals(ev.latlng)) { //避免出现结束双击,导致距离为0
polyLine = L.polyline([ //与上一点连线
[latLngTemp.lat, latLngTemp.lng],
[ev.latlng.lat, ev.latlng.lng]
], {
color: "red"
});
resultLayer.addLayer(polyLine);
L.marker([ev.latlng.lat, ev.latlng.lng]).addTo(resultLayer); // 最后点击点经纬度
latLngTemp = ev.latlng; //更新临时变量为新点
var distanceMeasureParam = new SuperMap.MeasureParameters(polyLine);
L.supermap.measureService(url).measureDistance(distanceMeasureParam, function(serviceResult) {
resultDis += serviceResult.result.distance;
var content = "距上点:" + Number(serviceResult.result.distance / 1000).toFixed(1) + "千米" + "<br>总距:" + Number(resultDis / 1000).toFixed(1) + "千米";
var texticon = L.divIcon({
html: content,
iconSize: [110, 40],
iconAnchor: [55, -5] //设置标签偏移避免遮盖
});
L.marker([ev.latlng.lat, ev.latlng.lng], {
icon: texticon
}).addTo(resultLayer);
});
}
四、动态虚线效果实现
监听鼠标移动事件,并绘制临时虚线与距离(因需频繁请求服务器可能出现显示不及时的情况,可换成客户端量算)
map.on("mousemove", function(ev) {
//clientMeasure(latLngTemp.lat,latLngTemp.lng,ev.latlng.lat, ev.latlng.lng); //使用客户端量算
TempLayer.clearLayers();
var TempLine = L.polyline([ //虚线临时线段
[latLngTemp.lat, latLngTemp.lng],
[ev.latlng.lat, ev.latlng.lng]
], {
color: "red",
dashArray: "5,5"
});
TempLayer.addLayer(TempLine);
var distanceMeasureParam = new SuperMap.MeasureParameters(TempLine);
L.supermap.measureService(url).measureDistance(distanceMeasureParam, function(serviceResult) {
TempLayer.clearLayers(); //避免服务端延迟导致文本重叠
var texticon = L.divIcon({
html: Number(serviceResult.result.distance / 1000).toFixed(1) + "千米",
iconSize: 90,
className: 'my-div-icon',
iconAnchor: [45, -5]
});
TempLayer.addLayer(TempLine);
L.marker([ev.latlng.lat, ev.latlng.lng], {
icon: texticon
}).addTo(TempLayer);
});
});
五、结束绘制
监听鼠标双击事件,取消响应事件绑定
map.on('dblclick', function(ev) {
map.off('click');
map.off('dblclick');
map.off('mousemove');
});
结语
至此,iClient for Leaflet鼠标点击进行多点距离测量已实现,完整项目可通过如下链接下载: https://download.csdn.net/download/supermapsupport/11865506.