优化

src/views/modules/visual/components/screen-map/index.vue

@@ -197,7 +197,7 @@ const vueGis = {
       //icon图标样式
       iconUrlArray: [],
       iconTextColor: '#ffffff',
-      distanceMax: null,//显示的坐标距离中心点的范围                                                    
+      distanceMax: null,//显示的坐标距离中心点的范围
 
       input_lat: null,
       input_lon: null,
@@ -207,7 +207,6 @@ const vueGis = {
   },
   async mounted () {
 
-
   },
   methods: {
     showPosition () {
@@ -231,7 +230,6 @@ const vueGis = {
 
       //初始化地图
       this.initMap()
-
       if (this.showPolIconLayer) {
         console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer)
         //初始化多边形标注图层
@@ -246,6 +244,7 @@ const vueGis = {
         this.loadPolygon()
       }
 
+
       if (this.showIconLayer) {
         //初始化icon图层
         this.initIconLayer()
@@ -296,7 +295,6 @@ const vueGis = {
       }
       this.setMapLocation()
       // gaodeMapLayer.getSource().changed()
-
     },
 
     //加载区域多边形
@@ -355,6 +353,7 @@ const vueGis = {
           this.loadPolIcon(feature)
         }
 
+
       }
 
     },
@@ -363,7 +362,7 @@ const vueGis = {
     loadPolIcon (feature) {
       polIconSource.clear()
       let polyIconFeatures = [];
-      console.log('feature-----', feature)
+      // console.log('feature-----', feature)
       feature.forEach(oneIcon => {
 
         var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
@@ -380,7 +379,7 @@ const vueGis = {
             id: oneIcon.id_
           }
         });
-        // console.log('oneIcon----', oneIcon)
+        // console.log('oneIcon----ddd', oneIcon)
         let polyIconStyle = new Style({
           image: new Icon({
             // anchor: [0.5, 0.5],
@@ -416,12 +415,14 @@ const vueGis = {
               info: { ...oneIcon }
             }
           });
+          // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex])
           let iconStyle = new Style({
             image: new Icon({
               // anchor: [0.5, 0.5],
               // imgSize: [32, 32],
               // scale: 0.5,
-              src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0]
+              // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0]
+              src: (oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex]) || (oneIcon.index &&this.iconUrlArray[oneIcon.index]) || this.iconUrlArray[0]
             }),
             // text: createTextStyle(oneIcon)
           });
@@ -454,8 +455,8 @@ const vueGis = {
       return (distance < max || distance === max)
 
       // debugger
-      //   return 
+      //   return
-      // var wgs84Sphere = new ol.Sphere(6378137); 
+      // var wgs84Sphere = new ol.Sphere(6378137);
       // wgs84Sphere.haversineDistance([120.21592590991689, 30.210793016606],[120.21670777384473, 30.211168525868086]);
     },
 
@@ -514,6 +515,46 @@ const vueGis = {
     },
     //设置地图定位的中心点和缩放级别
     setMapLocation () {
+      if (!this.zoom) {
+        this.setZoom(this.mapInfo.agencyLevel)
+      }
+      this.centerPoint = []
+
+
+      //如果存在中心点（返回时赋值）
+      if (this.center && this.center.length > 0) {
+        this.centerPoint = this.center
+        this.centerFlag = 'point'
+        this.center = []
+
+      } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
+        this.centerFlag = 'flag_polygon'
+
+      } else if (this.mapInfo.longitude && this.mapInfo.latitude) {
+        this.centerPoint.push(this.mapInfo.longitude)
+        this.centerPoint.push(this.mapInfo.latitude)
+        this.centerFlag = 'point'
+
+      } else {
+        this.centerPoint = centerPointGlobal
+        this.centerFlag = 'point'
+      }
+      // debugger
+      if (this.centerFlag === 'flag_parent') {
+        let parentFeatures = parentLayer.getSource().getFeatures()[0]
+        let polygon = parentFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else if (this.centerFlag === 'flag_polygon') {
+        let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
+        let polygon = polygonFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else {
+        mapView.setCenter(this.centerPoint);
+      }
 
       if (!this.isChangeCenter) {
         return false
@@ -579,13 +620,13 @@ const vueGis = {
     },
 
     //根据组织层级设置缩放级别
-    setZoom (level) {
+    setZoom(level) {
-      if (level === 'district') {
+      if (level === "district") {
-        this.zoom = 11
+        this.zoom = 11;
-      } else if (level === 'street') {
+      } else if (level === "street") {
-        this.zoom = 12
+        this.zoom = 12;
-      } else if (level === 'community') {
+      } else if (level === "community") {
-        this.zoom = 13
+        this.zoom = 13;
       }
 
     },
@@ -630,15 +671,18 @@ const vueGis = {
         };
       })();
 
-      // select = new Select({
+      select = new Select({
-      //   style: overlayStyle
+        style: overlayStyle
-      // });
+      });
-      // 有BUG 加入多边形选中样式时，如果同时存在icon层和多边形层，点击icon会使icon消失 ---zhaotongyao 2022.06.01
 
-      map.addLayer(polygonLayer)
-      // map.addInteraction(select);
 
 
+      map.addLayer(polygonLayer)
+      if (this.$route.path == '/main-shuju/visual-communityGovern-duoyuanfuwu-duoyuanfuwufenxi' || this.$route.path == '/main-shuju/visual-communityParty-gridParty' || this.$route.path == '/main-shuju/visual-communityParty-community') { // 2022.6.9 网格党建平面图 联建单位分析页面 点位点击以后会消失，屏蔽这段代码以后可以解决
+         console.log('去掉默认点击')
+      } else {
+          map.addInteraction(select);
+      }
     },
 
     //初始化多边形icon图层
@@ -917,4 +961,4 @@ export default vueGis;
   // color: rgba(1, 17, 104, 1);
   color: #fff;
 }
-</style>   
+</style>