道路经纬度

src/views/sound/road/dict/place.vue

@@ -44,7 +44,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -64,7 +64,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="年份" name="year">
-                        <a-input-number  v-model:value="form.year" :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
           </a-form-item>
           <a-form-item label="测点名称" name="placeName">
             <a-input v-model:value="form.placeName" placeholder="请输入测点名称" allow-clear/>
@@ -90,6 +90,27 @@
           <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>
+              <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"
+                   >
+            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+            <template #footer>
+              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
+            </template>
+          </a-modal>
           <a-form-item label="点位等级" name="regionLevel">
             <a-input v-model:value="form.regionLevel" placeholder="请输入点位等级" allow-clear/>
           </a-form-item>
@@ -194,6 +215,8 @@ import {DownOutlined} from '@ant-design/icons-vue';
 import XLSX from "xlsx";
 import {Modal} from "ant-design-vue";
 // import moment from "moment";
+// eslint-disable-next-line no-undef
+const BBMap = BMap;
 export default {
   name: "RoadNoisePlace",
   components: {DownOutlined},
@@ -205,15 +228,15 @@ export default {
       selection: [],
       // 表格列配置
       columns: [
-                {title: "年份",dataIndex: "year",sorter: true,},
+        {title: "年份", dataIndex: "year", sorter: true,},
-                {title: "测点名称",dataIndex: "placeName",sorter: true,},
+        {title: "测点名称", dataIndex: "placeName", sorter: true,},
-                {title: "点位编码",dataIndex: "placeCode",sorter: true,},
+        {title: "点位编码", dataIndex: "placeCode", sorter: true,},
-                {title: "所属城区",dataIndex: "area",sorter: true,},
+        {title: "所属城区", dataIndex: "area", sorter: true,},
-                {title: "所属路段",dataIndex: "road",sorter: true,},
+        {title: "所属路段", dataIndex: "road", sorter: true,},
-                {title: "路长",dataIndex: "roadLength",sorter: true,},
+        {title: "路长", dataIndex: "roadLength", sorter: true,},
-                {title: "路宽",dataIndex: "roadWidth",sorter: true,},
+        {title: "路宽", dataIndex: "roadWidth", sorter: true,},
-                {title: "测点经度",dataIndex: "placeLng",sorter: true, },
+        {title: "测点经度", dataIndex: "placeLng", sorter: true,},
-                {title: "测点纬度",dataIndex: "placeLat",sorter: true,},
+        {title: "测点纬度", dataIndex: "placeLat", sorter: true,},
         {
           title: "操作",
           key: "action",
@@ -231,10 +254,13 @@ export default {
       // 表格选中数据
       selectionList: [],
       // 是否显示编辑弹窗
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
+      roadMapPoint: {},
       showEdit: false,
-            showNYear:false,
+      showNYear: false,
       cYear: undefined,
-            nYear:undefined,
+      nYear: undefined,
       // 表单数据
       form: {},
       loading: false,
@@ -247,6 +273,7 @@ export default {
     };
   },
   mounted() {
+
     this.getOptions();
   },
   methods: {
@@ -257,7 +284,74 @@ export default {
         where: this.where,
       });
     },
-        getOptions(){
+    showRoadMap(roadAttr,lng,lat) {
+      this.visibleRoadMap = true
+      if(roadAttr === "start"){
+        this.roadMapTitle = "选择道路起点"
+      }else {
+        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实例
+        // eslint-disable-next-line no-undef
+        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);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        var marker = new BBMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+
+        var gc = new BBMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        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
+          }
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs){
+          var opts = {
+            width : 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title : ""  //信息窗口标题
+          }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+
+          var infoWindow = new BBMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
+    handleRoadMapOk() {
+
+    },
+    getOptions() {
       getColumnOptions("year").then(res => {
         console.log(res)
         if (res.data.code == 0) {
@@ -359,13 +453,13 @@ export default {
         hide();
       })
     },
-        setCYear(e){
+    setCYear(e) {
       this.cYear = e.key;
       this.showNYear = true;
     },
-        copyBatch(){
+    copyBatch() {
       const hide = this.$message.loading('请求中..', 0);
-            copyBatchPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchPlace({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
         if (res.data.code === 0) {
           this.$message.success(res.data.msg);
           this.reload();
@@ -380,8 +474,8 @@ export default {
         hide();
       })
     },
-        exportData(){
+    exportData() {
-            const columns = this.columns.filter(item=>item.dataIndex);
+      const columns = this.columns.filter(item => item.dataIndex);
       const arr = [];
       const th = columns.map((item) => item.title);
       arr.push(th);
@@ -416,18 +510,18 @@ export default {
           );
 
           // 解析成对象数组
-                    const billData = roadNoiseList.map(item=>{
+          const billData = roadNoiseList.map(item => {
             return {
-                            year:item[0],
+              year: item[0],
-                            placeCode:item[1],
+              placeCode: item[1],
-                            placeName:item[2],
+              placeName: item[2],
-                            road:item[3],
+              road: item[3],
-                            area:item[4],
+              area: item[4],
-                            roadLength:item[5],
+              roadLength: item[5],
-                            roadWidth:item[6],
+              roadWidth: item[6],
-                            placeLng:item[7],
+              placeLng: item[7],
-                            placeLat:item[8],
+              placeLat: item[8],
-                            regionLevel:item[9],
+              regionLevel: item[9],
             }
           });