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')
})
}