echarts加载区域地图,并标注点

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

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

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

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

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

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

2、使用Echarts展示地图

html 复制代码
<!--地图-->
<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'})

	let option = {
		geo: {
			map: 'nanhai',
			zoom: 1.2,//缩放比例
			roam: true, // 是否允许缩放和平移
			itemStyle: {
				areaColor: 'lightskyblue',
				borderColor: '#404a59'
			},
			label: {
				show: true
			},
		},
		//气象站点列表
		series: [{
			type: 'scatter',
			coordinateSystem: 'geo',
			data: stationData.value,
			symbolSize: 10,
			label: {
				show: true,
				formatter: function (params) {
					return params.name; // 显示点的name
				},
				position: 'top', // 或其他位置
				color: '#FF4500' // 设置标签字体颜色为红色
			},
			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,大功搞定!!!

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js