地图111

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

@@ -85,7 +85,8 @@
         <div class="box-right">
           <div class="box-map">
             <screen-map v-show="showMap" class="map"
-                        ref="map"
+                        ref="cmap"
+                        :mapId="'cmap'"
                         :showPolygonLayer="true"
                         :isAddOpenlay="true"
                         :clickType="'popup'"
@@ -523,7 +524,7 @@ export default {
           }
         })
         const url = require('../../../../assets/img/shuju/measure/other.png')
-        this.iconUrlArray = [url, url, url, url, url, url, url, url]
+        this.iconUrlArray = [url]
 
         this.showMap = true
         //第一次加载完置为false
@@ -903,16 +904,76 @@ export default {
           'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png'
         ]
         console.log('this.unitTableData', this.unitTableData)
-        this.$refs.map.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitTableData, this.iconUrlArray, null)
+        this.$refs.cmap.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitTableData, this.iconUrlArray, null)
       } else {
-        this.$refs.map.refreshMap(this.agencyInfo, this.parentPolygon, this.unitTableData)
+        this.$refs.cmap.refreshMap(this.agencyInfo, this.parentPolygon, this.unitTableData)
 
       }
     },
 
     //点击项目
-    clickProject (feature) {
+    async clickProject (feature) {
       console.log('标注信息', feature.values_.properties)
+      if (!feature.values_.properties.info.id) {
+        return false
+      }
+      const info = feature.values_.properties.info
+      const url = "/heart/icpartyunit/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+      let params = {
+        id: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        console.log('data-------', data)
+        let _info = { 
+          unitName: '',
+          type: '',
+          contact: '',
+          contactMobile: '',
+          memberCount: '',
+          remark: '',
+          address: ''
+        }
+        let coordinate = [info.longitude, info.latitude]
+        for(const n in _info) {
+          _info[n] = data[n] && data[n] || '--'
+        }
+        _info.type = info.type
+        
+
+        let showData = `
+                <div style='font-size:16px; color:#FFFFFF;'>单位信息</div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>单位名称：
+                  <span>`+ _info.unitName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>单位类型：
+                  <span>`+ _info.type + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人：
+                  <span>`+ _info.contact + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系电话：
+                  <span>`+ _info.contactMobile + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>在职党员：
+                  <span>`+ _info.memberCount + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>备注：
+                  <span>`+ _info.remark + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>地址：
+                  <span>`+ _info.address + `</span>
+                </div> 
+                `
+        this.$refs.cmap.handleShowPopup(showData, coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
     },
     async handleLook (val) {
 

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

@@ -21,8 +21,8 @@
   </div>-->
 
     <div class="div_map"
-         id="map"
-         ref="map">
+         :id="mapId"
+         :ref="mapId">
     </div>
     <div id="popup"
          style="display: none;"
@@ -477,7 +477,7 @@ const vueGis = {
         layers: [gaodeMapLayer],
         //加载瓦片图层数据
         view: mapView,
-        target: 'map'
+        target: this.mapId
         //目标加载到map中
       })
 
@@ -576,7 +576,8 @@ const vueGis = {
     //初始化多边形标注图层
     initPolygonLayer () {
       polygonSource = new VectorSource({
-        //features: (new GeoJSON()).readFeatures(geojsonObject)
+        // features: (new GeoJSON()).readFeatures(geojsonObject)
+        wrapX: false
       });
 
       polygonLayer = new VectorLayer({
@@ -627,6 +628,7 @@ const vueGis = {
     initPolIconLayer () {
       polIconSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
+        wrapX: false
       });
 
       polIconLayer = new VectorLayer({
@@ -642,6 +644,7 @@ const vueGis = {
     initIconLayer () {
       iconSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
+        wrapX: false
       });
 
       iconLayer = new VectorLayer({
@@ -720,13 +723,14 @@ const vueGis = {
 
     handleShowPopup (showData, coordinate) {
       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坐标
+      
     },
 
     //取随机数
@@ -753,6 +757,10 @@ const vueGis = {
     },
   },
   props: {
+    mapId: {
+      type: String,
+      default: 'map'
+    },
     //是否显示多边形图层
     showPolygonLayer: {
       type: Boolean,
@@ -869,6 +877,7 @@ export default vueGis;
 }
 .ol-popup-closer:after {
   content: "✖";
-  color: rgba(1, 17, 104, 1);
+  // color: rgba(1, 17, 104, 1);
+  color: #fff;
 }
 </style>