使用echart-gl实现3D地图

src/render/components/Map.vue

@@ -1,61 +1,35 @@
 <template>
-  <div id="map-container" class="w-h-full"></div>
+  <v-chart class="chart w-h-full" :option="option" />
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue'
+import { reactive } from 'vue'
+import { use, registerMap } from "echarts/core";
+import { CanvasRenderer } from 'echarts/renderers'
+import { Map3DChart } from 'echarts-gl/charts';
+import VChart from "vue-echarts";
 
-let map 			  = null
-const initMap 	= () => {
-  if (typeof(BMapGL) == 'undefined') {
-    alert('地图api加载失败')
-    return
+import tmskMap from "../assets/geojson/659003.json";
+
+use([ CanvasRenderer, Map3DChart ]);
+
+registerMap('tmsk', tmskMap);
+
+const option = reactive({
+  backgroundColor: 'rgba(6,30,93,.5)',
+  series: {
+    type: 'map3D',
+    map: 'tmsk',
+    label: {
+      show: true
+    },
+    itemStyle: {
+      color: '#999',
+      borderWidth: 1,
+    },
+    shading: 'color'
   }
-
-  map = new BMapGL.Map('map-container', {
-    style: {
-      styleJson: styleJson2
-    }
-  });
-  map.centerAndZoom(new BMapGL.Point(79.068798, 39.868490), 11);
-  map.enableScrollWheelZoom(true);
-  map.setTilt(50);
-}
-
-const loadPrism = () => {
-  if (!map) return
-
-  const bd = new BMapGL.Boundary();
-  bd.get('图木舒克', function (rs) {
-      const count = rs.boundaries.length;
-      
-      for (let i = 0; i < count; i++) {
-        const path   = [];
-        const str    = rs.boundaries[i].replace(' ', '');
-        const points = str.split(';');
-
-        for (let j = 0; j < points.length; j++) {
-          const lng = points[j].split(',')[0];
-          const lat = points[j].split(',')[1];
-          path.push(new BMapGL.Point(lng, lat));
-        }
-
-        const prism = new BMapGL.Prism(path, 1000, {
-          topFillColor: '#5679ea',
-          topFillOpacity: 0.6,
-          sideFillColor: '#5679ea',
-          sideFillOpacity: 0.9
-        });
-
-        map.addOverlay(prism);
-      }
-  });
-}
-
-onMounted(() => {
-  initMap()
-  loadPrism()
-})
+});
 
 const update = () => console.log