63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<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> |