v3+ECharts 地图实现多个自定义图片的图标

在这里插入图片描述
备注：地图json, 图标图片准备替换下

<template><div ref="mapEcharts" class="map-echart"></div>
</template><script setup lang='ts'>
import * as echarts from 'echarts'
import mapcity from "@/tool/map/map.json"
import { ref, nextTick, onMounted } from 'vue'
const mapEcharts = ref(null)
onMounted(() => {//获取山东地图initEcharts()})
function initEcharts() {echarts.registerMap('mapcity', mapcity)nextTick(() => {const map = echarts.init(mapEcharts.value, null, {renderer: 'canvas',})let LableData = [{name: "济南",value: [117.000923,36.675807],},{name: "日照",value: [119.461208,35.428588],},];const option = {// 悬浮窗tooltip: {trigger: 'item',},geo: {map: 'mapcity',zoom: 1.2,roam: false,label: {show: true,color: 'black',position: 'inside',distance: 0,fontSize: 10,rotate: 0,},// 所有地图的区域颜色itemStyle: {areaColor: '#eee',borderColor: '#02c0ff',},emphasis: {itemStyle: {areaColor: '#aaa',shadowColor: 'rgba(0,0,0,0.8)',},},},series: [{name: "lable",type: "scatter",coordinateSystem: "geo",symbol: 'image://' + new URL(`./003.png`, import.meta.url).href,symbolSize: [30, 30],symbolOffset: [0, "10%"],hoverAnimation: true,zlevel: 2,label: {normal: {show: false,textStyle: {color: "#fff",lineHeight: 15,},formatter(params) {return params.data.value[2];},},},itemStyle: {normal: {color: "#6495ED", //标志颜色opacity: 0.8,borderColor: "#aee9fb",borderWidth: 0.6,},},showEffectOn: "render",rippleEffect: {brushType: "stroke",},data: LableData,},{name: "lable",type: "scatter",coordinateSystem: "geo",symbol: 'image://' + new URL(`./001.png`, import.meta.url).href,symbolSize: [20, 20],symbolOffset: [0, "-70%"],hoverAnimation: true,zlevel: 2,label: {normal: {show: false,textStyle: {color: "#fff",lineHeight: 15,},formatter(params) {return params.data.value[2];},},},itemStyle: {normal: {color: "#6495ED", //标志颜色opacity: 0.8,borderColor: "#aee9fb",borderWidth: 0.6,},},showEffectOn: "render",rippleEffect: {brushType: "stroke",},data: LableData,},],}map.setOption(option)map.on('click', function (params) {})})}
</script><style scoped>
.map-echart {width: 100%;height: calc(100% - 50px);
}.topbox {width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;
}.mapTitle {width: 300px;height: 50px;display: flex;justify-content: center;align-items: center;font-size: 25px;font-weight: bold;cursor: pointer;color: #2d3436;
}
</style>