131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<template>
|
|
<div ref="mapContainer" style="width: 100%; height: 300px; background: #ffffff"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import json from '@/assets/530926geo.json';
|
|
import { getAssetsFile } from '@/utils';
|
|
|
|
// 您提供的耿马县GeoJSON数据
|
|
const gengmaGeoJSON = json;
|
|
|
|
// 模拟乡镇数据（根据图片中的地名）
|
|
const towns = ref([
|
|
{ name: '孟定镇', coord: [99.01, 23.64] },
|
|
{ name: '勐简乡', coord: [99.24, 23.79] },
|
|
{ name: '四排山乡', coord: [99.5, 23.38] },
|
|
{ name: '大兴乡', coord: [99.8, 23.76] },
|
|
{ name: '耿马镇', coord: [99.42, 23.66] },
|
|
{ name: '贺派乡', coord: [99.21, 23.4] },
|
|
{ name: '芒洪乡', coord: [99.73, 23.59] },
|
|
{ name: '勐永镇', coord: [99.53, 23.99] },
|
|
{ name: '勐撒镇', coord: [99.47, 23.85] },
|
|
]);
|
|
|
|
const mapContainer = ref(null);
|
|
|
|
// 获取天气图标路径
|
|
// function getWeatherIconPath(iconType) {
|
|
// return `/images/${iconType}.png`; // 使用绝对路径
|
|
// }
|
|
function getWeatherIconPath(iconType) {
|
|
const iconMap = {
|
|
sunny: 'images/smartFarm/sunny.png',
|
|
cloudy: 'images/smartFarm/sunnyToCloudy.png',
|
|
rainy: 'images/smartFarm/rainy.png',
|
|
overcast: 'images/smartFarm/windy.png',
|
|
};
|
|
let path = iconMap[iconType] ? iconMap[iconType] : 'images/smartFarm/sunny.png';
|
|
return getAssetsFile(path);
|
|
}
|
|
|
|
onMounted(() => {
|
|
const chart = echarts.init(mapContainer.value, 'dark');
|
|
|
|
// 添加点击事件监听
|
|
chart.on('click', (params) => {
|
|
if (params.componentType === 'series') {
|
|
// 点击乡镇标记点
|
|
console.log('点击乡镇:', params.name);
|
|
showWeatherDetail(params.data);
|
|
} else if (params.componentType === 'geo') {
|
|
// 点击地图区域
|
|
console.log('点击地图区域:', params.name);
|
|
}
|
|
});
|
|
|
|
// 显示天气详情弹窗
|
|
const showWeatherDetail = (data) => {
|
|
console.log(data);
|
|
};
|
|
|
|
// 注册地图
|
|
echarts.registerMap('耿马县', gengmaGeoJSON);
|
|
|
|
// 配置项
|
|
const option = {
|
|
backgroundColor: '#fff', // 白色背景
|
|
title: {
|
|
text: '',
|
|
left: 20,
|
|
top: 10,
|
|
textStyle: {
|
|
color: '#000', // 黑色文字
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
geo: {
|
|
map: '耿马县',
|
|
roam: false,
|
|
zoom: 1.1,
|
|
label: {
|
|
show: true, // 开启地名显示
|
|
color: '#333',
|
|
fontSize: 12,
|
|
formatter: (params) => params.name, // 直接显示地名
|
|
},
|
|
itemStyle: {
|
|
areaColor: '#a8d8ea', // 浅蓝色填充
|
|
borderColor: '#4682B4', // 钢蓝色边界
|
|
borderWidth: 1.2,
|
|
shadowColor: 'rgba(0, 100, 150, 0.3)',
|
|
shadowBlur: 8,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
color: '#1890FF',
|
|
},
|
|
itemStyle: {
|
|
areaColor: '#BAE7FF',
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: 0,
|
|
data: towns.value,
|
|
label: {
|
|
show: true,
|
|
position: 'inside', // 地名显示在区域内
|
|
formatter: '{b}',
|
|
color: '#000',
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
chart.setOption(option);
|
|
|
|
window.addEventListener('resize', function () {
|
|
chart.resize();
|
|
});
|
|
});
|
|
</script>
|