添加Map组件

src/render/App.vue

@@ -7,11 +7,15 @@
 
       <div class="block-left-right-content flex flex-1 mt-5">
         <div class="block-left-content w-1/5 flex flex-col">
-          <div class="bg-red-100  flex-1"></div>
-          <div class="bg-green-100  flex-1"></div>
-          <div class="bg-blue-100  flex-1"></div>
+          <div class="bg-red-100 flex-1">
+            <!-- <Clock /> -->
+          </div>
+          <div class="bg-green-100 flex-1"></div>
+          <div class="bg-blue-100 flex-1"></div>
+        </div>
+        <div class="block-right-content pl-5 flex flex-1">
+          <Map />
         </div>
-        <div class="block-right-content pl-5 flex flex-1 bg-yellow-100"></div>
       </div>
     </div>
   </full-screen-container>
@@ -20,5 +24,7 @@
 <script lang="ts" setup>
 import FullScreenContainer from './components/Layout/FullScreenContainer.vue'
 import TheHeader from './components/Layout/TheHeader.vue'
-import DigitalFlopContainer from './components/DigitalFlopContainer.vue';
+import DigitalFlopContainer from './components/DigitalFlopContainer.vue'
+// import Clock from './components/Clock.vue'
+import Map from './components/Map.vue'
 </script>

src/render/components/Map.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="map-container" class="w-h-full"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+let map 			  = null
+const initMap 	= () => {
+  if (typeof(BMapGL) == 'undefined') {
+    alert('地图api加载失败')
+    return
+  }
+
+  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
+
+defineExpose({ update })
+</script>