123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <script setup lang="ts">
- import { onMounted } from 'vue'
- interface DeviceData {
- count: number
- children?: Record<string, number>
- }
- interface Window {
- BMapGL: any
- onBMapCallback: () => void
- }
- const deviceData: Record<string, DeviceData> = {
- '新疆': {
- count: 30,
- children: {
- '克拉玛依': 10,
- '乌鲁木齐': 10,
- '库尔勒': 10
- }
- },
- '北京': { count: 50 },
- '上海': { count: 45 },
- '广东': { count: 60 }
- }
- const loadBMap = (ak: string): Promise<any> => {
- return new Promise((resolve) => {
- if (window.BMapGL) return resolve(window.BMapGL)
- const script = document.createElement('script')
- script.src = `https://api.map.baidu.com/api?type=webgl&v=3.0&ak=c0crhdxQ5H7WcqbcazGr7mnHrLa4GmO0&callback=onBMapCallback`
- document.head.appendChild(script)
- window.onBMapCallback = () => resolve(window.BMapGL)
- })
- }
- const setupMap = async () => {
- try {
- const BMapGL = await loadBMap('您的AK密钥')
- const map = new BMapGL.Map('map-container')
- // 地球模式配置
- map.centerAndZoom(new BMapGL.Point(105, 35), 5)
- map.enableScrollWheelZoom()
- // map.setMapType(BMapGL.constants.MapType.EARTH)
- // 中国边界绘制
- new BMapGL.Boundary().get('中国', (rs: any) => {
- rs.boundaries.forEach((boundary: string) => {
- map.addOverlay(new BMapGL.Polygon(boundary, {
- strokeWeight: 2,
- strokeColor: "#ff0000"
- }))
- })
- })
- // 初始省级标注
- addProvinceLabels(map, BMapGL)
- // 缩放事件监听
- map.addEventListener('zoomend', () => {
- map.getZoom() >= 7
- ? showCityLabels(map, BMapGL)
- : addProvinceLabels(map, BMapGL)
- })
- } catch (error) {
- console.error('地图加载失败:', error)
- }
- }
- const addProvinceLabels = (map: any, BMapGL: any) => {
- map.clearOverlays()
- Object.entries(deviceData).forEach(([province, data]) => {
- const point = getCenterPoint(province)
- if (point) {
- const label = new BMapGL.Label(`${province}: ${data.count}台`, {
- position: point,
- offset: new BMapGL.Size(20, -10)
- })
- label.setStyle(labelStyle)
- map.addOverlay(label)
- }
- })
- }
- const showCityLabels = (map: any, BMapGL: any) => {
- const xinjiang = deviceData['新疆']
- if (xinjiang?.children) {
- Object.entries(xinjiang.children).forEach(([city, count]) => {
- const point = getCenterPoint(city)
- if (point) {
- const label = new BMapGL.Label(`${city}: ${count}台`, {
- position: point,
- offset: new BMapGL.Size(20, -10)
- })
- label.setStyle({...labelStyle, fontSize: '12px'})
- map.addOverlay(label)
- }
- })
- }
- }
- const labelStyle = {
- color: '#333',
- fontSize: '14px',
- border: '1px solid #ccc',
- backgroundColor: 'white',
- padding: '5px'
- }
- const getCenterPoint = (name: string): any => {
- const points: Record<string, [number, number]> = {
- '新疆': [87.6168, 43.8256],
- '北京': [116.4074, 39.9042],
- '上海': [121.4737, 31.2304],
- '广东': [113.2644, 23.1291],
- '克拉玛依': [84.8739, 45.5886],
- '乌鲁木齐': [87.6168, 43.8256],
- '库尔勒': [86.1467, 41.7686]
- }
- return points[name] && new BMapGL.Point(...points[name])
- }
- onMounted(setupMap)
- </script>
- <template>
- <div id="map-container"></div>
- </template>
- <style scoped>
- #map-container {
- width: 100%;
- height: 100vh;
- }
- </style>
|