合并分支 'develop_cd' 到 'master'

Develop cd

查看合并请求 !35

src/views/chart/components/AMap.vue

@@ -8,7 +8,8 @@
 <script>
 import { lazyAMapApiLoaderInstance } from 'vue-amap'
 import { uuid } from 'vue-uuid'
-import { baseAMapData, hazardLevel } from './aMap/aMap'
+import { baseAMapData, hazardLevel, calculateCenter } from './aMap/aMap'
+import { log } from '@antv/g2plot/lib/utils'
 
 export default {
   props: {
@@ -22,6 +23,8 @@ export default {
       map: {},
       AMap: {},
       layers: [],
+      text: [],
+
       allParkList: [],
       center: [116.400586, 39.903475],
       mapStyle: 'amap://styles/6ee1c8252c951da095d5e4eaf9c65a1f',
@@ -33,6 +36,7 @@ export default {
     chart: {
       handler(newVal, oldVal) {
         // this.drawLayer()
+        console.log(9999)
         this.initMap()
       },
       deep: true
@@ -67,8 +71,14 @@ export default {
       this.allParkList = JSON.parse(JSON.stringify(data))
       this.layers = []
       data.map((item) => {
-        const color = hazardLevel[item.hazardLevel]?.color
+        const color = item.hazardLevel.includes('#')
+          ? item.hazardLevel
+          : hazardLevel[item.hazardLevel]?.color
         let layer = null
+        let text = null
+        let center = []
+        const path = item.path ? JSON.parse(item.path) : []
+
         if (item.areaType === '1') {
           layer = new AMap.Marker({
             position: new AMap.LngLat(item.longitude, item.latitude),
@@ -79,9 +89,10 @@ export default {
               ...item
             }
           })
+          center = [item.longitude, item.latitude]
         } else if (item.areaType === '2') {
           layer = new AMap.Polygon({
-            path: JSON.parse(item.path),
+            path: path,
             fillColor: color,
             strokeColor: 'transparent',
             fillOpacity: 0.6,
@@ -90,9 +101,10 @@ export default {
               ...item
             }
           })
+          center = calculateCenter(path)
         } else if (item.areaType === '3') {
           layer = new AMap.Polyline({
-            path: JSON.parse(item.path),
+            path: path,
             borderWeight: 3,
             strokeColor: color,
             strokeOpacity: 1,
@@ -102,26 +114,48 @@ export default {
               ...item
             }
           })
+          center = calculateCenter(path)
+        }
+        if (center && center.length === 2) {
+          text = new AMap.Text({
+            position: center,
+            anchor: 'bottom-center',
+            text: item.name,
+            offset: [0, 26],
+            style: { 'background-color': '#fff', 'font-size': '12px' },
+            extData: {
+              ...item
+            }
+          })
         }
+
         if (layer) {
           this.layers.push(layer)
+          this.text.push(text)
           const extData = layer.getExtData()
+          const extTextData = text.getExtData()
           layer.on('click', (obj) => {
             this.parkClick(extData)
           })
+          text.on('click', (obj) => {
+            this.parkClick(extTextData)
+          })
         }
       })
 
-      this.map.add(this.layers)
+      this.map.add([...this.layers, ...this.text])
       this.map.setFitView()
     },
     parkClick(item) {
+      console.log(item)
       const id = item.id
       const highLightColor = '#AF24FF'
       const allPolyline = this.layers
       this.allParkList.forEach((it, index) => {
         if (allPolyline[index]) {
-          const color = hazardLevel[it.hazardLevel]?.color
+          const color = item.hazardLevel.includes('#')
+            ? item.hazardLevel
+            : hazardLevel[item.hazardLevel]?.color
           if (it.areaType === '1') {
             allPolyline[index].setContent(this.renderMarker(color))
             if (it.id === id) {
@@ -133,6 +167,7 @@ export default {
             allPolyline[index].setOptions({
               [it.areaType === '3' ? 'strokeColor' : 'fillColor']: color
             })
+
             if (it.id === id) {
               if (item.path && typeof item.path === 'string') {
                 const path = JSON.parse(item.path)

src/views/chart/components/aMap/aMap.js

@@ -39,3 +39,18 @@ export const hazardLevel = {
     color: "#1890FF",
   },
 };
+// 多边形中心点
+export const calculateCenter = (lnglatarr) => {
+  var x = lnglatarr.map(function (a) {
+    return a[0];
+  });
+  var y = lnglatarr.map(function (a) {
+    return a[1];
+  });
+  var minX = Math.min.apply(null, x);
+  var maxX = Math.max.apply(null, x);
+  var minY = Math.min.apply(null, y);
+  var maxY = Math.max.apply(null, y);
+  const arr = [(minX + maxX) / 2, (minY + maxY) / 2];
+  return arr;
+};