刷新地图

src/views/modules/communityParty/members/crateForm.vue

@@ -240,7 +240,7 @@ export default {
         if (Object.keys(val).length > 0) {
           this.form = { ...val }
           console.log('val----------in', val)
-          this.partyOrgs = val.orgPids.split(',')
+          this.partyOrgs = val.orgPids.split(':')
           this.partymenberid = val.id
         }
       },

src/views/modules/visual/communityParty/community.vue

@@ -84,7 +84,7 @@
         </div>
         <div class="box-right">
           <div class="box-map">
-            <screen-map class="map"
+            <screen-map v-show="showMap" class="map"
                         ref="map"
                         :showPolygonLayer="true"
                         :isAddOpenlay="true"
@@ -281,7 +281,8 @@ export default {
       orgId: '',
       orgLevel: '',
       parentPolygon: [],
-      unitAclist: []
+      unitAclist: [],
+      showMap: false
     };
   },
   async mounted () {
@@ -500,7 +501,7 @@ export default {
     // 获取联建单位
     async getUnitList (agencyId) {
       this.visibleLoading = true
-
+      // this.showMap = false
       const url = "/heart/icpartyunit/listbrief"
       // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
       let params = {
@@ -513,6 +514,7 @@ export default {
       const { data, code, msg } = await requestPost(url, params)
 
       if (code === 0) {
+        this.showMap = false
         this.unitTotal = data.total
         this.unitTableData = data.list.map((item, index) => {
           return {
@@ -523,11 +525,13 @@ export default {
         const url = require('../../../../assets/img/shuju/measure/other.png')
         this.iconUrlArray = [url, url, url, url, url, url, url, url]
 
-
+        this.showMap = true
         //第一次加载完置为false
         this.$nextTick(() => {
+          
           this.loadMap()
           this.$forceUpdate()
+          this.isfirstInit = false
         })
         // this.isfirstInit = false
       } else {
@@ -901,7 +905,7 @@ export default {
         console.log('this.unitTableData', this.unitTableData)
         this.$refs.map.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitTableData, this.iconUrlArray, null)
       } else {
-        this.$refs.map.refreshMap(this.agencyInfo, this.unitTableData)
+        this.$refs.map.refreshMap(this.agencyInfo, this.parentPolygon, this.unitTableData)
 
       }
     },

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

@@ -225,6 +225,7 @@ const vueGis = {
 
       //初始化地图
       this.initMap()
+      
       if (this.showPolIconLayer) {
         console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer)
         //初始化多边形标注图层
@@ -256,35 +257,40 @@ const vueGis = {
     },
 
     //刷新地图
-    async refreshMap (polygonArray, iconArrays) {
-
+    async refreshMap (mapInfo, polygonArray, iconArrays) {
+      this.mapInfo = mapInfo
+      this.polygonArray  = []
       this.polygonArray = polygonArray
       this.iconArrays = iconArrays
-
+      iconSource.clear()
+      polygonSource.clear()
+      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) {//判断是否存在下级标注
@@ -342,9 +348,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]
@@ -397,7 +405,6 @@ const vueGis = {
               info: { ...oneIcon }
             }
           });
-          console.log('oneIcon-----ttt', oneIcon)
           let iconStyle = new Style({
             image: new Icon({
               // anchor: [0.5, 0.5],
@@ -443,7 +450,7 @@ const vueGis = {
 
     //初始化地图
     initMap () {
-      this.setMapLocation()
+      this.firstCentermap()
       gaodeMapLayer = new TileLayer({
         title: "地图",
         source: new XYZ({
@@ -496,8 +503,52 @@ 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);
+
+      }
+      mapView.setZoom(this.zoom);
+
+      
+    },
+    firstCentermap() {
       if (this.mapInfo.longitude && this.mapInfo.latitude) {
         this.centerPoint = []
         this.centerPoint.push(this.mapInfo.longitude)
@@ -589,7 +640,6 @@ const vueGis = {
 
     //初始化icon图层
     initIconLayer () {
-      console.log('initttttt-----icon')
       iconSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
       });