gxwebsoft/jczxw-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

点位修正

Browse Source
This commit is contained in:
weicw
2022-02-03 17:22:31 +08:00
parent 535ef79624
commit 53db46f90a
3 changed files with 218 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/sound/road/dict/place.vue
View File

@@ -21,7 +21,8 @@
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
<a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
</a-button>
</a-space>
</a-col>
</a-row>
@@ -90,22 +91,18 @@
<a-form-item label="测点纬度" name="placeLat">
<a-input v-model:value="form.placeLat" placeholder="请输入测点纬度" allow-clear/>
</a-form-item>
<a-form-item label="道路起点" name="roadStartLng">
<a-input-search @search="showRoadMap('start',form.roadStartLng,form.roadStartLat)" :value="`[${form.roadStartLng},${form.roadStartLat}]`" placeholder="请选择道路起点" allow-clear>
<a-form-item label="修正位置" name="correctLocation">
<a-input-search @search="showRoadMap(form)"
:value="`[${form.correctLng},${form.correctLat}]`" placeholder="`[${form.placeLng},${form.placeLat}]`" allow-clear>
<template #enterButton>
<a-button>选择位置</a-button>
</template>
</a-input-search>
</a-form-item>
<a-form-item label="道路终点" name="roadEndLat">
<a-input-search @search="showRoadMap('end',form.roadStartLng,form.roadStartLat)" :value="`[${form.roadEndLng},${form.roadEndLat}]`" placeholder="请选择道路终点" >
<template #enterButton>
<a-button>选择位置</a-button>
</template>
</a-input-search>
</a-form-item>
<a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}" v-model:visible="visibleRoadMap" :title="roadMapTitle"
>
<a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
v-model:visible="visibleRoadMap" :title="roadMapTitle"
>
<div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
<template #footer>
<a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
@@ -167,7 +164,8 @@
>
<a-button>导入</a-button>
</a-upload>
<a-button @click="exportData" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出</a-button>
<a-button @click="exportData" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出
</a-button>
</a-space>
</template>
<template #action="{ record }">
@@ -284,15 +282,11 @@ export default {
where: this.where,
});
},
showRoadMap(roadAttr,lng,lat) {
showRoadMap(form) {
const {placeLng,placeLat,correctLng,correctLat} = form
this.visibleRoadMap = true
if(roadAttr === "start"){
this.roadMapTitle = "选择道路起点"
}else {
this.roadMapTitle = "选择道路终点"
}
this.roadMapTitle = "选择修正后的道路坐标"
this.$nextTick(() => {
console.log(lat,lng)
console.log(this.$refs.roadMap)
// eslint-disable-next-line no-undef
var map = new BBMap.Map(this.$refs.roadMap); // 创建Map实例
@@ -300,22 +294,18 @@ export default {
map.addControl(new BBMap.NavigationControl()); //初始化地图控件
map.addControl(new BBMap.ScaleControl());
map.addControl(new BBMap.OverviewMapControl());
var point = new BBMap.Point(lng?lng:108.33, lat?lat:22.84);
var point = new BBMap.Point(correctLng?correctLng:placeLng?placeLng:108.33,correctLat?correctLat:placeLat?placeLat:22.84);
// var point = new BBMap.Point(form.placeLng ? form.placeLng : 108.33, form.placeLat ? form.placeLat : 22.84);
map.centerAndZoom(point, 13);//初始化地图中心点
var marker = new BBMap.Marker(point); //初始化地图标记
marker.enableDragging(); //标记开启拖拽
var gc = new BBMap.Geocoder();//地址解析类
//添加标记拖拽监听
marker.addEventListener("dragend", (e)=> {
marker.addEventListener("dragend", (e) => {
//获取地址信息
if(roadAttr === "start"){
this.form['roadStartLng'] = e.point.lng
this.form['roadStartLat'] = e.point.lat
}else {
this.form['roadEndLng'] = e.point.lng
this.form['roadEndLat'] = e.point.lat
}
this.form['correctLng'] = e.point.lng
this.form['correctLat'] = e.point.lat
gc.getLocation(e.point, function (rs) {
showLocationInfo(e.point, rs);
@@ -332,11 +322,11 @@ export default {
map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
map.addOverlay(marker); //将标记添加到地图中
//显示地址信息窗口
function showLocationInfo(pt, rs){
function showLocationInfo(pt, rs) {
var opts = {
width : 250, //信息窗口宽度
width: 250, //信息窗口宽度
height: 100, //信息窗口高度
title : "" //信息窗口标题
title: "" //信息窗口标题
}
var addComp = rs.addressComponents;
var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";