iClient for Leaflet实现多点距离测量

作者：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.youkuaiyun.com/download/supermapsupport/11865506.