地图添加区域显示

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

@@ -91,6 +91,7 @@
                         :clickType="'popup'"
                         :showIconLayer="true"
                         :showPolIconLayer="true"
+                        :areaScale="0.1"
                         @clickFeature="clickProject"
                         ></screen-map>
           </div>
@@ -861,6 +862,7 @@ export default {
   'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
   'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
         ]
+        
         this.$refs.map.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitMapList, this.iconUrlArray, null)
       } else {
         this.$refs.map.refreshMap(null, this.unitMapList)

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

@@ -79,6 +79,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 +104,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 +135,8 @@ var polygonStyleFunction = (function () {
   };
 })()
 
+
+
 const vueGis = {
   name: 'HomeMap',
   data () {
@@ -151,7 +183,7 @@ const vueGis = {
       iconArrays: [
 
       ],
-      iconTextStyle: {},
+      // iconTextStyle: {},
 
       //policon图标样式
       polIconUrlArray: [
@@ -183,7 +215,7 @@ const vueGis = {
       this.polIconUrlArray = polIconUrlArray || []
       this.iconArrays = iconArrays
       this.iconUrlArray = iconUrlArray
-      this.iconTextStyle = iconTextStyle
+      iconTextsStyle = iconTextStyle || iconTextsStyle
       this.distanceMax = distanceMax
 
       // iconArrays.forEach(item => {
@@ -313,7 +345,6 @@ const vueGis = {
 
     //加载多边形的icon
     loadPolIcon (feature) {
-      console.log('feature----------', feature)
       let polyIconFeatures = [];
       feature.forEach(oneIcon => {
 
@@ -336,16 +367,16 @@ const vueGis = {
           image: new Icon({
             // anchor: [0.5, 0.5],
             // imgSize: [32, 32],
-            scale: 0.5,
+            scale: this.areaScale,
             src: this.polIconUrlArray[0]
-          })
+          }),
+          text: createTextStyle(oneIcon)
         });
 
         polyIcon.setStyle(polyIconStyle);
         polyIconFeatures.push(polyIcon);
 
       });
-      console.log('polIconSource-----', polIconSource)
       polIconSource.addFeatures(polyIconFeatures);
     },
 
@@ -376,7 +407,7 @@ const vueGis = {
               // scale: 0.5,
               src: this.iconUrlArray[oneIcon.urlIndex]
             }),
-            text: this.createTextStyle(oneIcon)
+            // text: createTextStyle(oneIcon)
           });
 
           iconItem.setStyle(iconStyle);
@@ -398,18 +429,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) {
@@ -536,7 +555,7 @@ const vueGis = {
               })
             }),
             new Style({
-              text: that.createTextStyle(feature)
+              text: createTextStyle(feature)
             })
           ];
           styles['MultiPolygon'] = styles['Polygon'];
@@ -712,6 +731,10 @@ const vueGis = {
     clickType: {
       type: String,
       default: 'back'
+    },
+    areaScale: {
+      type: Number,
+      default: 0.5
     }
 
   },