83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
|
<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>
|