VUE+Iclient for leaflet实现长度量算

VUE+Iclient for leaflet实现长度量算

VUE+Iclient for leaflet实现长度量算

变量定义

data() {
return {
resultLayer: null, //长度量测结果图层
TempLayer: null //长度量测临时图层
}
},

添加到地图

this.resultLayer = new L.FeatureGroup()
this.TempLayer = new L.FeatureGroup()
this.resultLayer.addTo(mapUtil.localMap.map)
this.TempLayer.addTo(mapUtil.localMap.map)

长度量测代码

measureLength() {
mapUtil.localMap.map.off(‘click’)
mapUtil.localMap.map.off(‘dblclick’)

		var locIcon = L.icon({
			iconUrl: require('../assets/images/marker-icon.png'), //icon阴影图片路径
			shadowUrl: require('../assets/images/marker-shadow.png'), //icon阴影图片路径

			iconSize: [24, 32], // size of the icon
			// shadowSize: [0, 0], // size of the shadow
			iconAnchor: [12, 32] // point of the icon which will correspond to marker's location
			// shadowAnchor: [0, 0], // the same for the shadow
			// popupAnchor: [-0, -32] // point from which the popup should open relative to the iconAnchor
		})

		var isFirstPoint = true //判断是否是起始点
		var latLngTemp = null //存储上一点击点临时变量
		var resultDis = 0 //总距
		var that = this

		mapUtil.localMap.map.on('click', function (ev) {
			that.TempLayer.clearLayers()
			var polyLine
			if (isFirstPoint) {
				var texticon = L.divIcon({
					//定义图标
					html: '起点',
					className: 'my-div-icon',
					iconSize: [30, 20],
					iconAnchor: [15, 0]
				})

				L.marker([ev.latlng.lat, ev.latlng.lng], {
					icon: locIcon
				}).addTo(that.resultLayer) //marker实现文本框显示

				L.marker([ev.latlng.lat, ev.latlng.lng], {
					icon: texticon
				}).addTo(that.resultLayer) //marker实现文本框显示

				latLngTemp = ev.latlng //存储上一点击点
				isFirstPoint = false
			} else {
				if (!latLngTemp.equals(ev.latlng)) {
					//避免出现结束双击，导致距离为0
					polyLine = L.polyline(
						[
							//与上一点连线
							[latLngTemp.lat, latLngTemp.lng],
							[ev.latlng.lat, ev.latlng.lng]
						],
						{
							color: 'red'
						}
					)
					that.resultLayer.addLayer(polyLine)
					latLngTemp = ev.latlng //更新临时变量为新点
					let geo = transform(polyLine, L.CRS.EPSG4326, L.CRS.EPSG3857)
					var distanceMeasureParam = new MeasureParameters(geo)
					new MeasureService(gis_config.network_URL_using).measureDistance(distanceMeasureParam, function (serviceResult) {
						resultDis += serviceResult.result.distance
						var content = '距上点：' + Number(serviceResult.result.distance / 1000).toFixed(2) + '千米' + '<br>总距:' + Number(resultDis / 1000).toFixed(2) + '千米'
						var texticon = L.divIcon({
							html: content,
							className: 'my-div-icon',
							iconSize: [110, 40],
							iconAnchor: [55, -5] //设置标签偏移避免遮盖
						})
						L.marker([ev.latlng.lat, ev.latlng.lng], {
							icon: locIcon
						}).addTo(that.resultLayer)
						L.marker([ev.latlng.lat, ev.latlng.lng], {
							icon: texticon
						}).addTo(that.resultLayer)
					})
				}
			}
			mapUtil.localMap.map.on('mousemove', function (ev) {
				that.TempLayer.clearLayers()
				var TempLine = L.polyline(
					[
						//虚线临时线段
						[latLngTemp.lat, latLngTemp.lng],
						[ev.latlng.lat, ev.latlng.lng]
					],
					{
						color: 'red',
						dashArray: '5,5'
					}
				)
				that.TempLayer.addLayer(TempLine)
				let geo = transform(TempLine, L.CRS.EPSG4326, L.CRS.EPSG3857)
				var distanceMeasureParam = new MeasureParameters(geo)
				new MeasureService(gis_config.network_URL_using).measureDistance(distanceMeasureParam, function (serviceResult) {
					that.TempLayer.clearLayers() //避免服务端延迟导致文本重叠
					var texticon = L.divIcon({
						html: Number(serviceResult.result.distance / 1000).toFixed(2) + '千米',
						iconSize: 90,
						className: 'my-div-icon',
						iconAnchor: [45, -5]
					})

					that.TempLayer.addLayer(TempLine)
					L.marker([ev.latlng.lat, ev.latlng.lng], {
						icon: locIcon
					}).addTo(that.TempLayer)

					L.marker([ev.latlng.lat, ev.latlng.lng], {
						icon: texticon
					}).addTo(that.TempLayer)
				})
			})
		})
		mapUtil.localMap.map.on('dblclick', function (ev) {
			mapUtil.localMap.map.off('click')
			mapUtil.localMap.map.off('dblclick')
			mapUtil.localMap.map.off('mousemove')
		})
	}