行政区导航

@@ -98,6 +98,8 @@ export default {
             zIndex: 1
           }
         ],
+        // https://browser.events.data.msn.cn/OneCollector/1.0?cors=true&content-type=application/x-json-stream&client-id=NO_AUTH&client-version=1DS-Web-JS-3.2.8&apikey=0ded60c75e44443aa3484c42c1c43fe8-9fc57d3f-fdac-4bcf-b927-75eafe60192e-7279&upload-time=1721963639720&ext.intweb.msfpc=GUID%3D58b4a27ccded4df0ae2279c0d4670f38%26HASH%3D58b4%26LV%3D202407%26V%3D4%26LU%3D1721616447966&time-delta-to-apply-millis=use-collector-delta&w=0&anoncknm=app_anon&NoResponseBody=true
+
         zoom: 12,
         minZoom: 4,
         maxZoom: 20,
@@ -124,7 +126,8 @@ export default {
       secondFeatures: [],
       thirdFeatures: [],
       map: null,
-      geoJsonLayer: null
+      geoJsonLayer: null,
+      echartsLayer: null
     }
   },
   mounted() {
@@ -181,11 +184,82 @@ export default {
     thirdDistrictNavigate(districtCode, feature) {
       if (districtCode) {
         this.geoJsonLayer.clear()
+        // eslint-disable-next-line no-debugger
         this.geoJsonLayer.load({
           data: feature,
           flyTo: true
         })
+        this.showEchartsLayer(feature.properties.center, feature.properties.centroid)
+      }
+    },
+    showEchartsLayer(center, centroid) {
+      if (this.echartsLayer) {
+        this.map.removeLayer(this.echartsLayer)
+        delete this.echartsLayer
+      }
+      const options = {
+        name: '饼状图测试',
+        tooltip: {
+          trigger: 'item',
+          formatter: function (param) {
+            return param.seriesName + '<br/>' + param.name + '<br/>长度' + param.value + 'km<br/>占比' + param.percent.toFixed(0) + '%'
+          }
+        },
+        series: [
+          {
+            name: '1',
+            type: 'pie',
+            radius: '7%',
+            animationDuration: 0,
+            coordinateSystem: 'mars2dMap',
+            center: center,
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: 1, name: '县道'},
+              {value: 3, name: '国道'},
+              {value: 4, name: '高速'},
+              {value: 5, name: '铁路'}
+            ]
+          },
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['7%', '2%'],
+            avoidLabelOverlap: false,
+            coordinateSystem: 'mars2dMap',
+            center: centroid,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 8,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: 1048, name: 'Search Engine'},
+              {value: 735, name: 'Direct'},
+              {value: 580, name: 'Email'},
+              {value: 484, name: 'Union Ads'},
+              {value: 300, name: 'Video Ads'}
+            ]
           }
+        ]
+      };
+      // 创建Echarts图层
+      this.echartsLayer = new i2d.Layer.EchartsLayer(options)
+      this.map.addLayer(this.echartsLayer, true)
     }
   }
 }