跳转网站头条广告入口

效果如下，加载了南海区域的地图，并标注几个气象站点；

1、下载区域地图的JSON：DataV.GeoAtlas地理小工具系列

新建nanhai.json，把下载的JSON数据放进来

说明：如果第二步不打勾，只显示省的名字，

如果打勾的话，会显示省下所有市的名字，看个人需求

如果要把多个省放在一起展示，则把多个JSON文件里的features数据合并即可

2、使用Echarts展示地图

<!--地图-->
<div ref="chartRef" class="chart"/><script setup>
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import nanhaiJson from '@/assets/map/nanhai.json'//地图json数据： https://datav.aliyun.com/portal/school/atlas/area_selector
const chartRef = ref()
const formRef = ref()
let myChart = null;
const stationData = ref([])//加载数据
onMounted(() => {//加载南海地图echarts.registerMap('nanhai', nanhaiJson)loadData()
})const loadData = () => {xxApi.xxPage().then((data) => {if (data && data.total > 0) {stationData.value = []
//拼接地图上需要标注的点			
data.records.forEach((item) => {stationData.value.push({name: item.name,value: [item.longitude, item.latitude]})})}loadChart()})}//加载图表
const loadChart = () => {// 如果实例已经存在，则先销毁再重新创建if (myChart != null && myChart.dispose) {myChart.dispose();}myChart = echarts.init(chartRef.value)myChart.showLoading({text: 'loading'})const mapCenterLongitude = 105;const mapCenterLatitude = 36.2;let option = {geo: {map: 'nanhai',zoom: 1.8,//缩放比例roam: true, // 是否允许缩放和平移center: [mapCenterLongitude, mapCenterLatitude], // 设置地图的中心点，这里的longitude和latitude需要您根据实际需求填写itemStyle: {areaColor: 'lightskyblue',borderColor: '#404a59'},label: {show: true,color: 'rgba(0, 0, 0, 0.3)', // 设置为淡色（例如白色半透明）fontSize: 10, // 可根据需要调整字体大小fontWeight: 'normal' // 可根据需要调整字体粗细},},//气象站点列表series: [{type: 'scatter',coordinateSystem: 'geo',data: stationData.value,symbolSize: 10,label: {show: true,formatter: function (params) {return params.name; // 显示点的name},position: 'top', // 或其他位置color: '#FF4500', // 设置标签字体颜色为红色fontSize: 22, // 增大字体大小以突出显示fontWeight: 'bold' // 加粗字体以突出显示},itemStyle: {normal: {color: '#FFA500' // 设置为橘黄色}},}]}myChart.hideLoading()myChart.setOption(option)// 自适应屏幕window.addEventListener('resize', function () {myChart.resize()})
}</script><style scoped>
.chart {height: 550px;
}.detail-chart {height: 100%;overflow: auto;
}</style>

OK，大功搞定！！！