.
This commit is contained in:
Iruka
parent
00b9275927
commit
c427138970
@ -11,6 +11,7 @@
|
||||
:change:centerPoint="leaflet.centerPointEmitHandler" :landMap="mapObj.landMap"
|
||||
:change:landMap="leaflet.drawEmitHandler" :davice="mapObj.davice" :change:davice="leaflet.markerEmitHandler"
|
||||
:updateMarker="mapObj.updateMarker" :change:updateMarker="leaflet.updateMarkerEmitHandler"
|
||||
:ranging="mapObj.ranging" :change:ranging="leaflet.rangingEmitHandler">
|
||||
</view>
|
||||
|
||||
<!-- 工具 -->
|
||||
@ -23,9 +24,12 @@
|
||||
<view @click="mapToCenterPoint">
|
||||
<i class="iconfont icon-dingwei"></i>
|
||||
</view>
|
||||
<view @click="navigation">
|
||||
<view @click="mapNavigation">
|
||||
<i class="iconfont icon-luxian"></i>
|
||||
</view>
|
||||
<view @click="mapRanging" :style="mapObj.ranging ? 'background: deepskyblue;':''">
|
||||
<i class="iconfont icon-ceju"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tdt">
|
||||
<image src="../static/images/map/logo.png"></image>GS（2024）0568号 - 甲测资字1100471
|
||||
@ -495,6 +499,7 @@
|
||||
showMapType: false, //图层选择弹框
|
||||
mapType: "img_w", //默认图层
|
||||
centerPoint: 0, //用于中心点点击
|
||||
ranging: false, //测距
|
||||
},
|
||||
pop: {
|
||||
show: false,
|
||||
@ -700,7 +705,7 @@
|
||||
this.mapObj.centerPoint++;
|
||||
},
|
||||
//导航
|
||||
navigation() {
|
||||
mapNavigation() {
|
||||
this.$showConfirm(`导航至"${this.title}"？`).then(res => {
|
||||
if (res.confirm) {
|
||||
const centerPoint = JSON.parse(this.mapObj.landMap.centerPoint);
|
||||
@ -713,7 +718,6 @@
|
||||
if (uni.getSystemInfoSync().platform === 'android') { // Android 平台
|
||||
url =
|
||||
`androidamap://route/plan/?sourceApplication=${appName}&sid=BGVIS1&did=BGVIS2&dlat=${lat}&dlon=${lng}&dname=${encodeURIComponent(name)}&mode=driving`;
|
||||
// `androidamap://route/plan/?sourceApplication=${appName}&sid=BGVIS1&did=BGVIS2&dlat=${lat}&dlon=${lng}&mode=driving`;
|
||||
} else if (uni.getSystemInfoSync().platform === 'ios') { // iOS 平台
|
||||
url = `iosamap://path?sourceApplication=${appName}&mldl=${lat},${lng}`;
|
||||
}
|
||||
@ -730,8 +734,18 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
toNavigation() {
|
||||
|
||||
// 测距
|
||||
mapRanging() {
|
||||
if (this.mapObj.ranging) {
|
||||
this.mapObj.ranging = false;
|
||||
this.$toast("测距已关闭")
|
||||
return;
|
||||
}
|
||||
this.$showConfirm(`开启测距，开启后再次点击关闭。`).then(res => {
|
||||
if (res.confirm) {
|
||||
this.mapObj.ranging = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
//设备状态更新
|
||||
mapUpdateMarker(e) {
|
||||
@ -900,6 +914,9 @@
|
||||
_imgs: null,
|
||||
_device: null,
|
||||
_markers: {},
|
||||
drawing: {
|
||||
ranging: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
@ -953,6 +970,16 @@
|
||||
}
|
||||
this.updateMarkerColor(e);
|
||||
},
|
||||
//测距
|
||||
rangingEmitHandler(e) {
|
||||
if (e == true || e == false) {
|
||||
if (e) {
|
||||
this.ranging(1);
|
||||
} else {
|
||||
this.ranging(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//初始化地图
|
||||
initMap() {
|
||||
@ -1352,6 +1379,100 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
// 测距
|
||||
ranging(type) {
|
||||
const that = this;
|
||||
if (type == 1) { //开始
|
||||
that.drawing.ranging = {
|
||||
latlngs: [],
|
||||
gap: [],
|
||||
pop: [],
|
||||
item: null,
|
||||
}
|
||||
|
||||
that.map.off('click');
|
||||
that.map.on('click', (e) => {
|
||||
//记录坐标
|
||||
that.drawing.ranging.latlngs.push(e.latlng);
|
||||
if (that.drawing.ranging.latlngs.length > 1) {
|
||||
if (that.drawing.ranging.item) {
|
||||
that.drawing.ranging.item.setLatLngs(that.drawing.ranging.latlngs);
|
||||
} else {
|
||||
that.drawing.ranging.item = L.polyline(that.drawing.ranging.latlngs, {
|
||||
color: "red"
|
||||
});
|
||||
that.map.addLayer(that.drawing.ranging.item);
|
||||
}
|
||||
//计算距离
|
||||
const prev = that.drawing.ranging.latlngs[that.drawing.ranging.latlngs.length - 2];
|
||||
const gap = L.latLng(prev).distanceTo(e.latlng);
|
||||
that.drawing.ranging.gap.push(gap);
|
||||
let sumgap = that.drawing.ranging.gap.reduce((acc, curr) => acc + curr, 0);
|
||||
|
||||
if (sumgap > 1000) {
|
||||
sumgap = (sumgap / 1000).toFixed(2);
|
||||
let marker = L.marker(e.latlng, {
|
||||
icon: L.divIcon({
|
||||
html: `<span>${sumgap}公里</span>`,
|
||||
className: 'my-div-icon'
|
||||
})
|
||||
}).addTo(that.map);
|
||||
that.drawing.ranging.pop.push(marker);
|
||||
} else {
|
||||
let marker = L.marker(e.latlng, {
|
||||
icon: L.divIcon({
|
||||
html: `<span>${Math.round(sumgap)}m</span>`,
|
||||
className: 'my-div-icon'
|
||||
})
|
||||
}).addTo(that.map);
|
||||
that.drawing.ranging.pop.push(marker);
|
||||
}
|
||||
} else {
|
||||
//创建marker
|
||||
let marker = L.marker(e.latlng, {
|
||||
icon: L.divIcon({
|
||||
html: '<span>起点</span>',
|
||||
className: 'my-div-icon'
|
||||
})
|
||||
}).addTo(that.map);
|
||||
that.drawing.ranging.pop.push(marker);
|
||||
}
|
||||
});
|
||||
} else if (type == 2) { //删除
|
||||
if (that.drawing.ranging.latlngs.length) {
|
||||
that.drawing.ranging.latlngs.pop();
|
||||
}
|
||||
if (that.drawing.ranging.pop.length) {
|
||||
let pop = that.drawing.ranging.pop.pop();
|
||||
that.map.removeLayer(pop);
|
||||
}
|
||||
if (that.drawing.ranging.item) {
|
||||
that.drawing.ranging.item.setLatLngs(that.drawing.ranging.latlngs);
|
||||
// if (that.drawing.ranging.latlngs.length > 1) {
|
||||
// //计算距离
|
||||
// let start = that.drawing.ranging.latlngs[0];
|
||||
// let end = that.drawing.ranging.latlngs[that.drawing.ranging.latlngs.length - 1];
|
||||
// const gap = L.latLng(start).distanceTo(end);
|
||||
// }
|
||||
}
|
||||
} else { //结束
|
||||
if (!that.drawing.ranging) {
|
||||
return;
|
||||
}
|
||||
that.drawing.ranging.latlngs = null;
|
||||
if (that.drawing.ranging.pop && that.drawing.ranging.pop.length) {
|
||||
that.drawing.ranging.pop.forEach(x => {
|
||||
that.map.removeLayer(x);
|
||||
});
|
||||
}
|
||||
that.drawing.ranging.pop = null;
|
||||
if (that.drawing.ranging.item) {
|
||||
that.map.removeLayer(that.drawing.ranging.item);
|
||||
}
|
||||
that.drawing.ranging.item = null;
|
||||
that.map.off('click');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1404,6 +1525,20 @@
|
||||
.device-orange span {
|
||||
color: #fbc902;
|
||||
}
|
||||
|
||||
/* 测距 */
|
||||
.my-div-icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.my-div-icon span {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
width: fit-content;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user