map

jnpf-java-boot/jnpf-web/public/index.html

@@ -20,6 +20,7 @@
   <!-- 先在vue的index.html里面引入腾讯地图包 -->
   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6&libraries=drawing"></script>
   <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
+  <script src="https://map.qq.com/api/gljs?v=1.exp&key=U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6&libraries=tools"></script>
   <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=nYAafE0e8IXpGM0ykV3BO2k7CVRHI79Y"></script> -->
 </head>
 

jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue

@@ -36,16 +36,55 @@ export default {
       longitude: '',
       latitude: '',
       lngLatData: [], // 绘制多边形坐标点
-      polygonPath: [
+       polygonPath: [
           {
-            provider: '',
+            provider: 'provider1',
+            editable: false,
             polygonsVOS: [
                 {
-                    lat: '',
+                    lat: '31.035352998532925',
-                    lng: '',
+                    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
+                }
+          ]
+        }
       ],
       editor: null,
       loadMapFlag: true,
@@ -69,11 +108,28 @@ export default {
       this.$emit('areaVisibleChange', false)
     },
     combineOverlays() {
-      // overlaysArray.
+      const lngLat = [];
+      for (var i = 0;i < overlaysArray.length;i++) {
+        for (const item of overlaysArray[i].getPath().elems) {
+            const lng = item.getLng();
+            const lat = item.getLat();
+            lngLat.push({
+              lat: lat,
+              lng: lng
+            });
+        }
+      }
+      this.targetAreaPath = lngLat
+      const obj = {
+        provider: '新增商户',
+        editable: true,
+        polygonsVOS: lngLat,
+      }
+      this.polygonPath.push(obj)
+      this.setMapData(true)
     },
     // 删除绘制的多边形
     clearOverlays() {
-        polygon.setPath([]);
         if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
             // for (i in overlaysArray) {
             for (var i = 0;i < overlaysArray.length;i++) {
@@ -81,8 +137,6 @@ export default {
             }
         }
         overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
-        console.log(drawingManager);
-        this.setMapData();
     },
     // clearOverlays() {
     //   polygon.setMap(null);
@@ -113,7 +167,7 @@ export default {
     /**
      * 位置信息在地图上展示
      */
-    setMapData() {
+    setMapData(flag) {
       const myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
       console.log("当前位置："+this.position.latitude, this.position.longitude, myLatlng)
       const myOptions = {
@@ -129,8 +183,14 @@ export default {
           map: map,
           draggable: false
       })
-      //查询所有后台围栏
+      if (!flag) {
-      this.getAllPolygons()
+        //查询所有后台围栏
+        this.getAllPolygons()
+      } else {
+         this.showArrayPolygon()
+        /**绘制围栏 */
+        this.addpolygon();
+      }
     },
     /**绘制围栏 */
     addpolygon() {
@@ -143,7 +203,6 @@ export default {
               position: window.qq.maps.ControlPosition.TOP_CENTER,
               // 表头显示区域
               drawingModes: [
-                // window.qq.maps.drawing.OverlayType.MARKER,
                 window.qq.maps.drawing.OverlayType.POLYGON,
               ]
           },
@@ -162,6 +221,7 @@ export default {
       // 监听
       window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
          console.log('overlaycomplete', event)
+         _this.clearOverlays()
          overlaysArray.push(event.overlay);
           const lngLat = [];
           for (const item of event.overlay.getPath().elems) {
@@ -196,6 +256,13 @@ export default {
     */
     getAllPolygons(){
         const _this = this;
+        request({
+          url: '/api/scm/StationArea/'+ id,
+          method: 'get'
+        }).then(res => {
+            this.dataInfo(res.data)
+        });
+
         // axios.get(url.url + "/v1/polygons/findAll").then(function (response) {
         //     _this.polygonPath = response.data
         //     _this.showArrayPolygon()
@@ -203,56 +270,7 @@ export default {
         // .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
-                  }
-              ]
-            }
-        ]
         if (this.mode == 'add') {
            _this.polygonPath = _this.polygonPath.filter(e => !e.editable)
         }