同步screen-map

src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue

@@ -447,11 +447,11 @@ export default {
     //加载地图数据
     loadMap () {
       if (this.isfirstInit) {
-        this.agencyInfo.level = 'agency'
+        // this.agencyInfo.level = 'agency'
         //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
         this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null)
       } else {
-        this.$refs.map.refreshMap(this.polygonList, this.distributionsList)
+        this.$refs.map.refreshMap(this.agencyInfo, this.polygonList, this.distributionsList)
       }
     },
 
@@ -613,6 +613,9 @@ export default {
         if (!this.agencyInfo.level) {
           this.agencyInfo.level = 'street'
         }
+        if (!this.agencyInfo.agencyLevel) {
+          this.agencyInfo.agencyLevel = 'street'
+        }
       } else {
         this.$message.error(msg);
       }

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

@@ -21,8 +21,8 @@
   </div>-->
 
     <div class="div_map"
-         id="map"
+         :id="mapId"
-         ref="map">
+         :ref="mapId">
     </div>
     <div id="popup"
          style="display: none;"
@@ -32,6 +32,9 @@
          class="ol-popup-closer"></a>
       <div id="popup-content"
            class="popup-content"></div>
+      <a href="#" 
+         id="popup-goMore"
+         class="popup-goMore">更多>>>></a>
     </div>
   </div>
 </template>
@@ -79,6 +82,24 @@ let iconSource; // icon
 
 let select;//选中标注
 
+let iconTextsStyle = {
+  textAlign: undefined,
+  font: "18px Arial",
+  //fontFamily: "Courier New, monospace",
+  // fontWeight: "bold",
+  text: '',
+  backgroundFill: new Fill({
+    color: 'rgba(0, 146, 238, 0.75)'
+    // color: textColorArray[feature.values_.colorIndex]
+  }),
+  padding: [4, 10, 4, 10],
+  //text: "变电站名称",
+  fill: new Fill({ color: "#ffffff" }),
+  // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+  offsetY: -30,
+  offsetX: -50,
+  overflow: true,
+}
 
 let polygonColorArray = [
   'rgba(210, 2, 2, 0.24)',
@@ -86,7 +107,19 @@ let polygonColorArray = [
   'rgba(183, 185, 0, 0.16)'
 ];
 
+ //icon文字样式
+let createTextStyle = function (feature) {
   
+  if (iconTextsStyle) {
+    let iconTextsStyles = { ...iconTextsStyle }
+    iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name
+    return new Text({ ...iconTextsStyles })
+  } else {
+    return null
+  }
+
+
+}
 //多边形标注样式
 var polygonStyleFunction = (function () {
   return function (feature) {
@@ -105,6 +138,8 @@ var polygonStyleFunction = (function () {
   };
 })()
 
+
+
 const vueGis = {
   name: 'HomeMap',
   data () {
@@ -151,7 +186,7 @@ const vueGis = {
       iconArrays: [
 
       ],
-      iconTextStyle: {},
+      // iconTextStyle: {},
 
       //policon图标样式
       polIconUrlArray: [
@@ -181,10 +216,10 @@ const vueGis = {
     loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle, distanceMax) {
       this.mapInfo = mapInfo
       this.polygonArray = polygonArray
-      this.polIconUrlArray = polIconUrlArray
+      this.polIconUrlArray = polIconUrlArray || []
       this.iconArrays = iconArrays
       this.iconUrlArray = iconUrlArray
-      this.iconTextStyle = iconTextStyle
+      iconTextsStyle = iconTextStyle || iconTextsStyle
       this.distanceMax = distanceMax
 
       // iconArrays.forEach(item => {
@@ -195,18 +230,18 @@ const vueGis = {
       //初始化地图
       this.initMap()
       
-      if (this.showPolygonLayer) {
+      if (this.showPolIconLayer) {
+        console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer)
         //初始化多边形标注图层
-        this.initPolygonLayer()
+        this.initPolIconLayer()
         //加载当前园区的标注
-        this.loadPolygon()
+        // this.loadPolIcon()
       }
-      if (this.showPolIconLayer) {
+      if (this.showPolygonLayer) {
-
         //初始化多边形标注图层
         this.initPolygonLayer()
         //加载当前园区的标注
-        this.loadPolIcon()
+        this.loadPolygon()
       }
 
       if (this.showIconLayer) {
@@ -220,41 +255,51 @@ const vueGis = {
         this.addOverlay()
       }
 
-
       this.addMapClick()
 
     },
 
     //刷新地图
-    async refreshMap (polygonArray, iconArrays) {
+    async refreshMap (mapInfo, polygonArray, iconArrays) {
-
+      this.mapInfo = mapInfo
+      this.polygonArray  = []
       this.polygonArray = polygonArray
       this.iconArrays = iconArrays
+      if (iconSource) {
+        iconSource.clear()
+      }
+      if (polygonSource) {
+        polygonSource.clear()
+      }
+      if (polIconSource) {
+        polIconSource.clear()
+      }
+      this.initPolIconLayer()
       
       if (this.showPolygonLayer) {
-
+        this.initPolygonLayer()
         //加载当前园区的标注
         this.loadPolygon()
       }
       if (this.showPolIconLayer) {
-
+        this.initIconLayer()
         //加载当前园区的标注
-        this.loadPolIcon()
+        // this.loadPolIcon()
       }
 
       if (this.showIconLayer) {
 
         this.loadIcon()
       }
-
+      this.setMapLocation()
+      // gaodeMapLayer.getSource().changed()
       
     },
 
-    //加载多边形
+    //加载区域多边形
     loadPolygon () {
-
       polygonSource.clear()//清空多边形标注
-
+      // iconSource.clear()
       let featureData = []//多边形数据数据
 
       if (this.polygonArray && this.polygonArray.length > 0) {//判断是否存在下级标注
@@ -311,9 +356,11 @@ const vueGis = {
 
     },
 
-    //加载多边形的icon
+    //加载区域多边形的icon
     loadPolIcon (feature) {
+      polIconSource.clear()
       let polyIconFeatures = [];
+      console.log('feature-----', feature)
       feature.forEach(oneIcon => {
 
         var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
@@ -330,28 +377,27 @@ const vueGis = {
             id: oneIcon.id_
           }
         });
-
+        // console.log('oneIcon----', oneIcon)
         let polyIconStyle = new Style({
           image: new Icon({
             // anchor: [0.5, 0.5],
             // imgSize: [32, 32],
-            scale: 0.5,
+            scale: this.areaScale,
-            src: polIconUrlArray[oneIcon.values_.index - 1]
+            src: this.polIconUrlArray[0]
-          })
+          }),
+          text: createTextStyle(oneIcon)
         });
 
         polyIcon.setStyle(polyIconStyle);
         polyIconFeatures.push(polyIcon);
 
       });
-
       polIconSource.addFeatures(polyIconFeatures);
     },
 
     //加载icon图标
     loadIcon () {
       iconSource.clear()//清空多边形标注
-
       if (this.iconArrays && this.iconArrays.length > 0) {
 
         let iconFeatures = [];
@@ -367,15 +413,14 @@ const vueGis = {
               info: { ...oneIcon }
             }
           });
-
           let iconStyle = new Style({
             image: new Icon({
               // anchor: [0.5, 0.5],
               // imgSize: [32, 32],
               // scale: 0.5,
-              src: this.iconUrlArray[oneIcon.urlIndex]
+              src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0]
             }),
-            text: this.createTextStyle(oneIcon)
+            // text: createTextStyle(oneIcon)
           });
 
           iconItem.setStyle(iconStyle);
@@ -397,18 +442,6 @@ const vueGis = {
       }
     },
 
-    //icon文字样式
-    createTextStyle (feature) {
-      if (this.iconTextStyle) {
-        let iconTextStyle = { ...this.iconTextStyle }
-        iconTextStyle.text = feature.values_.name
-        return new Text({ ...iconTextStyle })
-      } else {
-        return null
-      }
-
-
-    },
 
     //计算和中心点距离
     computedDistance (lon, lat, max) {
@@ -425,7 +458,7 @@ const vueGis = {
 
     //初始化地图
     initMap () {
-      this.setMapLocation()
+      this.firstCentermap()
       gaodeMapLayer = new TileLayer({
         title: "地图",
         source: new XYZ({
@@ -452,7 +485,7 @@ const vueGis = {
         layers: [gaodeMapLayer],
         //加载瓦片图层数据
         view: mapView,
-        target: 'map'
+        target: this.mapId
         //目标加载到map中
       })
 
@@ -478,8 +511,53 @@ 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'
+        this.centerPoint.push(this.mapInfo.longitude)
+        this.centerPoint.push(this.mapInfo.latitude)
+
+      } 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);
+
+      }
+      mapView.setZoom(this.zoom);
 
+    },
+    firstCentermap() {
       if (this.mapInfo.longitude && this.mapInfo.latitude) {
         this.centerPoint = []
         this.centerPoint.push(this.mapInfo.longitude)
@@ -489,7 +567,7 @@ const vueGis = {
         this.centerPoint = centerPointGlobal
       }
 
-      this.setZoom(this.mapInfo.level)
+      this.setZoom(this.mapInfo.agencyLevel)
     },
 
     //根据组织层级设置缩放级别
@@ -507,7 +585,8 @@ const vueGis = {
     //初始化多边形标注图层
     initPolygonLayer () {
       polygonSource = new VectorSource({
-        //features: (new GeoJSON()).readFeatures(geojsonObject)
+        // features: (new GeoJSON()).readFeatures(geojsonObject)
+        wrapX: false
       });
 
       polygonLayer = new VectorLayer({
@@ -515,7 +594,7 @@ const vueGis = {
         style: polygonStyleFunction,
         zIndex: 50
       });
-
+      let that = this
       //选中多边形后的样式
       var overlayStyle = (function () {
 
@@ -535,7 +614,7 @@ const vueGis = {
               })
             }),
             new Style({
-              // text: createTextStyle(feature) // 报错 暂时注掉 zty 2022.05.19
+              // text: createTextStyle(feature) // 报错 暂时注掉 zhaotongyao 2022.05.19
             })
           ];
           styles['MultiPolygon'] = styles['Polygon'];
@@ -558,6 +637,7 @@ const vueGis = {
     initPolIconLayer () {
       polIconSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
+        wrapX: false
       });
 
       polIconLayer = new VectorLayer({
@@ -571,9 +651,9 @@ const vueGis = {
 
     //初始化icon图层
     initIconLayer () {
-
       iconSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
+        wrapX: false
       });
 
       iconLayer = new VectorLayer({
@@ -597,6 +677,7 @@ const vueGis = {
       var container = document.getElementById("popup");
       var closer = document.getElementById("popup-closer");
       var content = document.getElementById("popup-content");
+      var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null
 
       // 创建一个弹窗 Overlay 对象
       this.overlay = new Overlay({
@@ -619,6 +700,11 @@ const vueGis = {
         closer.blur();
         return false;
       };
+      if (goMore) {
+        goMore.onclick = function () {
+          _that.$emit('lookMore')
+        };
+      }
     },
 
     //注册地图点击事件
@@ -650,15 +736,27 @@ const vueGis = {
       });
     },
 
-    handleShowPopup (showData, coordinate) {
+    handleShowPopup (showData, coordinate, isShowMore) {
+      if (isShowMore) {
+        document.getElementById("popup-goMore").style.display = 'block'
+      } else {
+        document.getElementById("popup-goMore").style.display = 'none'
+      }
       console.log(this.overlay.getElement())
+      let content = document.getElementById("popup-content");
       this.overlay.getElement().style.display = 'block'
       this.overlay.getElement().parentNode.style.display = 'block'
       this.overlay.getElement().parentNode.parentNode.style.display = 'block'
-      var content = document.getElementById("popup-content");
-
       content.innerHTML = showData;
-      this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标
+      this.overlay.setPosition(coordinate);
+       //把 overlay 显示到指定的 x,y坐标
+      
+    },
+    // 关闭弹窗
+    handleClosePopup() {
+        this.overlay.setPosition(undefined);
+        document.getElementById("popup-closer").blur();
+        return false;
     },
 
     //取随机数
@@ -685,6 +783,10 @@ const vueGis = {
     },
   },
   props: {
+    mapId: {
+      type: String,
+      default: 'map'
+    },
     //是否显示多边形图层
     showPolygonLayer: {
       type: Boolean,
@@ -711,6 +813,10 @@ const vueGis = {
     clickType: {
       type: String,
       default: 'back'
+    },
+    areaScale: {
+      type: Number,
+      default: 0.5
     }
 
   },
@@ -795,8 +901,12 @@ export default vueGis;
 .popup-content {
   width: 300px;
 }
+.popup-goMore{
+  margin: 20px 0;
+}
 .ol-popup-closer:after {
   content: "✖";
-  color: rgba(1, 17, 104, 1);
+  // color: rgba(1, 17, 104, 1);
+  color: #fff;
 }
 </style>