From 6c786ec3cbccd1b80e9467a1fb54101286c90e7e Mon Sep 17 00:00:00 2001
From: jevononlie <728254585@qq.com>
Date: Wed, 22 May 2024 13:38:03 +0800
Subject: [PATCH] map

---
 .../src/views/stationarea/areaDialog.vue      | 449 +++++++++++-------
 1 file changed, 275 insertions(+), 174 deletions(-)

diff --git a/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue b/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
index 2ed8cfe..7445804 100644
--- a/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
@@ -6,13 +6,15 @@
         <p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束;&nbsp;&nbsp;
           3、中断：绘制过程中按下esc键可中断该过程</p>
       </div>
-      <div id="mapFencecontainer" class="mapBox">
-        <div class="mapBtn">
-          <el-button size="small" type="danger" @click="delpolygon()">删除多边形</el-button>
-          <el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
-          <el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
-          <!-- <el-button size="small" type="primary" @click="sendMsg">返回</el-button> -->
+      <div class="addpolygon">
+        <div id="mapFencecontainer">
+            <div class="mapBtn">
+              <el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
+              <el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
+              <el-button size="small" type="primary" @click="sendMsg">返回</el-button>
+            </div>
         </div>
+        <div class="loadMap" v-if="loadMapFlag">稍等，拼命加载地图中...</div>
       </div>
       <!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> -->
     </div>
@@ -20,206 +22,285 @@
 </template>
 
 <script>
-let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
+let  marker, polygon, drawingManager, lngLat,ap, map;
+let path = [];// 设置回显数据参数
+import axios from 'axios'
+// let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
 let overlaysArray = []; // 标注点集合,绘制多边形时的集合
 let path4 = [];// 设置回显数据参数
 // 默认展示假数据回显参数
-let arr = [
-  {
-    name: '商户1',
-    editable: true,
-    mapInfo: [
-      {
-        mapName: '区域1',
-        areaDot: [
-        {
-          "lat": 34.81183810359681,
-          "lng": 113.64705095998943
-        },
-        {
-          "lat": 34.81134040998215,
-          "lng": 113.64699731580913
-        },
-        {
-          "lat": 34.81148135007192,
-          "lng": 113.64640722982585
-        },
-        {
-          "lat": 34.811912977597295,
-          "lng": 113.646434051916
-        }
-        ]
-      },
-    ]
-  },
-  {
-    name: '商户2',
-    editable: false,
-    mapInfo: [
-      {
-        mapName: '区域1',
-        areaDot: [
-          {
-            "lat": 34.811776442604156,
-            "lng": 113.64557038061321
-          },
-          {
-            "lat": 34.81182048617505,
-            "lng": 113.64621411077678
-          },
-          {
-            "lat": 34.81198344718268,
-            "lng": 113.64581714384258
-          }
-        ]
-      }
-    ]
-  }
-]; // 用于数据回显的假数据  后期会调用接口返回数据
 export default {
   props: ['position', 'areaMapInfo'],
   data() {
     return {
       longitude: '',
       latitude: '',
-      lngLatData: [] // 绘制多边形坐标点
+      lngLatData: [], // 绘制多边形坐标点
+      polygonPath: [
+          {
+            provider: '',
+            polygonsVOS: [
+                {
+                    lat: '',
+                    lng: '',
+                }
+            ]
+          }
+      ],
+      editor: null,
+      loadMapFlag: true
     };
   },
   mounted() {
     this.$nextTick(() => {
-      this.init();
+      // this.init();
+      this.getMyLocation();
     })
   },
   methods: {
     handleClose() {
-      this.$emit('areaVisibleChange', false);
+      this.$emit('areaVisibleChange', false)
     },
-    // 子组件给父组件传值(返回按钮)
-    sendMsg() {
-      // func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
-      this.$emit('areaVisibleChange', false);
+    clearOverlays() {
+       polyline.setMap(null);
     },
-    // 子组件给父组件传值(确认按钮)
     sendLngLat() {
 
-      if (lngLat == undefined) {
-        lngLat = path4;
-      }
-      console.log('确认', lngLat)
-      this.$emit('areaVisibleChange', false, lngLat);
     },
-    // 地图初始化
-    init() {
-      const lat = '34.81098454894641' || this.position.lat
-      const lng = '113.64789962768555' || this.position.lng
-      map = new qq.maps.Map(document.getElementById('mapFencecontainer'), {
-        center: new qq.maps.LatLng(lat, lng), // 暂时默认郑州
-        zoom: 22
-      });
-      qq.maps.event.addListener(map, "click", function (event) {
-        console.log('您点击的位置为: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']');
-      });
-      // 多边形绘制及回显
-      // 设置多边形路径以便回显
-     
-
-      arr.forEach(item => {
-        // 商户
-        item.mapInfo.forEach(e => {
-          // 多个区域
-          path4 = [];
-          e.areaDot.forEach(q => {
-             path4.push(new qq.maps.LatLng(q.lat, q.lng));
-          }) 
-          this.showpolygon(path4, item.editable);
-          console.log(JSON.stringify(path4, null, 2))
-        })
-      });
+    sendMsg() {
 
-      // 绘制,操作
-      this.addpolygon();
     },
     /**
- * 多边形绘制
-*/
-    // 绘制
+     * //定位获得当前位置信息
+     */
+    getMyLocation() {
+        var geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
+        geolocation.getLocation(this.showPosition, this.showErr);
+    },
+    showPosition(position) {
+        this.loadMapFlag = false
+        console.log(position);
+        this.position.latitude = position.lat;
+        this.position.longitude = position.lng;
+        this.position.city = position.city;
+        this.setMapData();
+    },
+    //定位失败再请求定位，测试使用
+    showErr() {
+        console.log("定位失败，请重试！");
+        this.getMyLocation();
+    },
+    /**
+     * 位置信息在地图上展示
+     */
+    setMapData() {
+      var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
+      console.log("当前位置："+this.position.latitude, this.position.longitude, myLatlng)
+      var myOptions = {
+          zoom: 16, 
+          center: myLatlng, 
+          mapTypeId: qq.maps.MapTypeId.ROADMAP  
+      }
+      console.log(myOptions)
+      //获取dom元素添加地图信息
+      map = new qq.maps.Map(document.getElementById('mapFencecontainer'), myOptions)
+      //给定位的位置添加图片标注
+      marker = new qq.maps.Marker({
+          position: myLatlng,
+          map: map,
+      })
+      this.mouseClick()
+      /**绘制围栏 */
+      this.addpolygon();
+      //查询所有后台围栏
+      this.getAllPolygons()
+    },
+    
+     /**
+     * 鼠标点击获取标记位置事件
+     */
+    mouseClick () {
+        const _this = this 
+        qq.maps.event.addListener(map, 'click', function (event) {
+            if(!marker) {
+                marker=new qq.maps.Marker({
+                    position: event.latLng,
+                    map:map
+                })
+                return
+            }
+            marker.setPosition(event.latLng) 
+            console.log("鼠标点击位置:"+event.latLng)
+            _this.position.latitude = event.latLng.getLat();
+            _this.position.longitude = event.latLng.getLng();
+            _this.existsPolygon();
+        })
+    },
+    /**绘制围栏 */
     addpolygon() {
-      drawingManager = new qq.maps.drawing.DrawingManager({
-        drawingMode: qq.maps.drawing.OverlayType.POLYGON, // 默认选中多边形绘制
-        drawingControl: true,
-        drawingControlOptions: {
-          position: qq.maps.ControlPosition.TOP_CENTER,
-          // 表头显示区域
-          drawingModes: [
-            qq.maps.drawing.OverlayType.POLYGON,
-          ]
-        },
-        markerOptions: {
-          visible: false
-        },
-        // 多边形样式
-        polygonOptions: {
-          editable: true,
-          strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
-          fillColor: new qq.maps.Color(202, 67, 58, 0.1),
-          clickable: false
-        },
+      const _this = this
+      drawingManager = new window.qq.maps.drawing.DrawingManager({
+          drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式
+          drawingControl: true,
+          drawingControlOptions: {
+              position: window.qq.maps.ControlPosition.TOP_CENTER,
+              // 表头显示区域
+              drawingModes: [
+                  // window.qq.maps.drawing.OverlayType.MARKER,
+                  // window.qq.maps.drawing.OverlayType.CIRCLE,
+                  window.qq.maps.drawing.OverlayType.POLYGON,
+                  // window.qq.maps.drawing.OverlayType.POLYLINE,
+                  window.qq.maps.drawing.OverlayType.RECTANGLE
+                  ]
+          },
+          markerOptions: {
+              visible: false
+          },
+          // 多边形样式
+          polygonOptions: {
+              editable: true,
+              strokeColor: new window.qq.maps.Color(202, 67, 58, 0.8),
+              fillColor: new window.qq.maps.Color(202, 67, 58, 0.1),
+              clickable: false
+          },
+          // // 圆形样式
+          // circleOptions: {
+          //     fillColor: new window.qq.maps.Color(255, 208, 70, 0.3),
+          //     strokeColor: new window.qq.maps.Color(88, 88, 88, 1),
+          //     strokeWeight: 3,
+          //     clickable: false
+          // }
       });
-
       drawingManager.setMap(map);
-      qq.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
-        // clearOverlays(overlaysArray)
-        console.log('event',event); // 获得相应的经纬度值
-        lngLat = [];
-        overlaysArray.push(event.overlay);
-        for (const item of event.overlay.getPath().elems) {
-          const lng = item.getLng();
-          const lat = item.getLat();
-
-          lngLat.push({
-            lat: lat,
-            lng: lng
-          });
-          console.log(JSON.stringify(lngLat, null, 2))
-        }
-        console.log('overlaycomplete',lngLat, overlaysArray); // 获得相应的经纬度值
-      });
-
-    },
-    // 初始化回显
-    showpolygon(path3, editable) {
-      polygon = new qq.maps.Polygon({
-        map: map,
-        editable,
-        clickable: true,
-        strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
-        fillColor: new qq.maps.Color(202, 67, 58, 0.1)
+      window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
+         console.log('overlaycomplete', event)
+          // clearOverlays(overlaysArray)
+          lngLat = [];
+          // overlaysArray.push(event.overlay);
+          // for (const item of event.overlay.getPath().elems) {
+          //     const lng = item.getLng();
+          //     const lat = item.getLat();
+          //     lngLat.push({
+          //       lat: lat,
+          //       lng: lng
+          //     });
+          // }
+          console.log("绘图后获得的："+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
       });
-      polygon.setPath(path3);
     },
-    // 删除初始化多边形
-    delpolygon() {
-      const a = [];
-      polygon.setPath(a);
+    /** 
+     * 获取所有围栏
+    */
+    getAllPolygons(){
+        const _this = this;
+        // axios.get(url.url + "/v1/polygons/findAll").then(function (response) {
+        //     _this.polygonPath = response.data
+        //     _this.showArrayPolygon()
+        // })
+        // .catch(function (error) {
+        //     console.error(error);
+        // });
+        _this.polygonPath = [
+            {
+              provider: 'provider1',
+              editable: false,
+              polygonsVOS: [
+                  {
+                      lat: '31.035352998532925',
+                      lng: '121.22047942131758',
+                  },
+                  {
+                      lat: '31.034433694479787',
+                      lng: '121.22200291603804',
+                  },
+                  {
+                      lat: '31.035408156493887',
+                      lng: '121.22356932610273',
+                  },
+                  {
+                      lat: '31.03625390789439',
+                      lng: '121.22146647423506',
+                  }
+              ]
+            },
+            {
+              provider: 'provider2',
+              editable: true,
+              polygonsVOS: [
+                  {
+                      "lat": 31.036180364592568,
+                      "lng": 121.22818272560835
+                  },
+                  {
+                      "lat": 31.033992425381925,
+                      "lng": 121.22753899544477
+                  },
+                  {
+                      "lat": 31.03472787274239,
+                      "lng": 121.22535031288862
+                  },
+                  {
+                      "lat": 31.03625390789439,
+                      "lng": 121.22625153511763
+                  },
+                  {
+                      "lat": 31.036879023666664,
+                      "lng": 121.2274531647563
+                  }
+              ]
+            }
+        ]
+        _this.showArrayPolygon()
     },
-    // 删除绘制的多边形
-    clearOverlays() {
-      arr = []; // 清除假数据
-      path4 = [];
-      polygon.setPath(path4);
-      if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
-        // for (i in overlaysArray) {
-        for (var i = 0; i < overlaysArray.length; i++) {
-          overlaysArray[i].setMap(null);
+    /**循环调用显示围栏方法 */
+    showArrayPolygon(){
+        const _this = this
+        for (const polygonpath of _this.polygonPath) {
+            path = []
+            for (const polygonsvos of polygonpath.polygonsVOS) {
+                path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))
+            }
+            _this.showpolygons(path, polygonpath.editable)
         }
-      }
-      overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
-      lngLat = [];
-      console.log(drawingManager);
-      // this.init();
-    }
-
-  }
+    },
+    /**
+     * 显示围栏
+     */
+    showpolygons(path, editable) {
+        const _this = this
+        polygon = new qq.maps.Polygon({
+            map: map,
+            editable,
+            strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
+            fillColor: new qq.maps.Color(202, 67, 58, 0.1)
+        });
+        polygon.setPath(path);
+    },
+    /**
+     * 当前位置是否在围栏中
+     */
+    existsPolygon() {
+        const _this = this;
+        // console.log("当前位置:"+ _this.position.latitude,_this.position.longitude)
+        axios.post(url.url + "/v1/polygons/existPolygons", {
+            lng: _this.position.longitude,  //如果改为在getMyLocation中调用该方法，该位置应该变为 obj.longitude和obj.latitude
+            lat: _this.position.latitude,
+        }).then(function (response) {
+            // response.data以http or https开头，打开支付页面 
+            if(response.data.indexOf("http") == 0){
+                  window.location.href = response.data;
+            } else {
+                _this.$notify({
+                    title: '定位失败',
+                    message: '经度: '+ _this.position.longitude + ", 纬度:" + _this.position.latitude + "，" + "信息:" + response.data,
+                    type: 'success'
+                })
+            }
+        }).catch(function (error) {
+            console.error(error);
+        });
+    },
+  }   
 };
 </script>
 <style scoped lang="scss">
@@ -248,4 +329,24 @@ export default {
   }
 
 }
+#mapFencecontainer{
+    width: 100%;
+    height: 87%;
+    position: absolute;
+}
+.mapBtn {
+  position: absolute;
+  bottom: 20px;
+  right: 20px; 
+  z-index: 999;
+}
+.loadMap {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
 </style>