<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>
