联调电网一张图

2024-04-26 09:15:20 +08:00
parent 650c42846a
commit ec21d8430f
30 changed files with 2709 additions and 11 deletions
--- a/src/views/pqs/qualityInspeection/panorama/components/map.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/map.vue
@@ -0,0 +1,82 @@
+<template>
+    <div id="mapId" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, nextTick } from 'vue'
+// import '@/assets/panorama/map.js'
+import { mainHeight } from '@/utils/layout'
+
+const powerMap: any = ref(null)
+powerMap.value = new PowerMapProgram(() => {
+    // 初始化地图
+    powerMap.value.initMap({
+        mapId: 'mapId',
+        style: 'sjDark', // sjRaster sjBase sjDark
+        zoom: 6,
+        center: [116.478, 39.997] 
+    })
+    setTimeout(() => {
+        powerMap.value.createGridMap({
+            theme: 'light',
+            zoom: 7,
+            country: true,
+            
+            city: {
+                minzoom: 5,
+                maxzoom: 8
+            },
+            label: {
+                // label 文字颜色
+                textColor: '#fff',
+                // label 文字透明度
+                textOpacity: 1
+            },
+            default: {
+                fill: {
+                    // 默认填充颜色, 支持 rgba 格式
+                    fillColor: '#028b98',
+                    fillOpacity: 0.4
+                },
+                outline: {
+                    // 默认轮廓线颜色
+                    lineColor: '#0ec6d0',
+                    // 默认轮廓线宽
+                    lineWidth: 2
+                }
+            },
+            hover: {
+                fill: {
+                    fillColor: '#028b98',
+                    fillOpacity: 0.6
+                },
+                outline: {
+                    lineColor: '#009ea8',
+                    lineWidth: 2
+                }
+            },
+            highLight: {
+                fill: {
+                    fillColor: '#028b98',
+                    fillOpacity: 0.6
+                },
+                outline: {
+                    lineColor: '#009ea8',
+                    lineWidth: 2
+                }
+            }
+        })
+        // 监听行政区域点击事件
+    }, 1000)
+})
+
+onMounted(() => {
+    // 监听地图初始化完成事件
+})
+
+const height = mainHeight(20)
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/panorama/map.css';
+</style>