实现思路:把基础地图画出来, 然后在地图上添加点击事件, 拿到经纬度 ,根据经纬度的位置进行动态的添加图标。
效果图:
代码
<template>
<div id="china-echart" style="height: 500px; width: 500px"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import * as echarts from "echarts";
import imgTest from "../../assets/image/icotu.png";
onMounted(() => {
mapList()
});
const mapList = ()=>{
let chartDom:any = document.getElementById("china-echart");
let myChart = echarts.init(chartDom);
let option;
myChart.showLoading();
axios.get("/geo/china-s.json").then((usaJson) => {
myChart.hideLoading();
echarts.registerMap("china", usaJson.data);
//拼接自定义图标路径
let symbolImg = 'image://'+ imgTest
option = {
geo: {
map: 'china',
roam: true,
label:{
normal:{
show: true, //省份名称
color: '#d9d6d6'
}
},
itemStyle: {
color: '#004981', // 背景颜色
borderColor: 'rgb(54,192,118)' // 边框颜色
}
},
series: [
{
type: 'effectScatter', // 指明图表类型:带涟漪效果的散点图
coordinateSystem: 'geo', // 指明绘制在geo坐标系上
symbol: symbolImg, //自定义的展示图标
symbolSize:50,
//定以一个空数组后期点击的时候往里面添加新数据
data:[]
},
]
};
//使用制定的配置项和数据显示图表
myChart.setOption(option);
});
//地图的点击事件
myChart.on( 'click',function (e:any) {
//拿到点击对应的经纬度
let lagLog = myChart.convertFromPixel('geo', [e.event.offsetX, e.event.offsetY])
//拿到点击区域对应的名字
let title = e.name
//把经纬度和name 存在一个对象中
let myDataObj = {name:title,value:lagLog};
//把拿到的myDataObj动态的添加到option里面series中data数据中
if(option.series[0].data){
option.series[0].data = []
option.series[0].data.push(myDataObj)
myChart.setOption(option);
}else if(option.series[0].data.value == lagLog && option.series[0].data) {
option.series[0].data= []
console.log( option.series[0].data)
myChart.setOption(option);
}else {
option.series[0].data.push(myDataObj)
myChart.setOption(option);
}
})
}
</script>