Vue3.x使用Echarts绘制世界地图并进行定点
一、需求
绘制世界地图并根据返回经纬度数据进行定点 将定点数据展示在世界地图内
二、解决
绘制世界地图,利用Echarts
图表组件时间,需要世界地图Geojson数据的可以在资源中下载世界地图Geojson数据-Javascript文档类资源-CSDN文库,世界地图Geojson
文件存储在前端本地的静态资源文件夹下,代码如下:
< template> < div> ...< div id = " worldgraph" > </ div> </ div>
</ template> < script setup >
import * as echarts from 'echarts' ;
import worldData from '@/assets/json/world.json' ;
import { ref, onMounted, onUnmounted } from 'vue' ;
const worldGraph = ref ( null ) ;
onMounted ( ( ) => { initData ( )
} )
onUnmounted ( ( ) => { if ( worldGraph. value) { worldGraph. value. dispose ( ) ; worldGraph. value = null ; }
} ) ;
const initData = ( ) => { if ( worldGraph. value) { worldGraph. value. dispose ( ) ; worldGraph. value = null ; } const point = [ ] point. push ( { name : '美国' , value : [ - 97.822 , 37.751 ] , type : 'iconData' } ) drawnWorldChart ( point)
} ;
const drawnWorldChart = ( point ) => { if ( ! document. getElementById ( 'ipprotrait-worldgraph' ) ) { return ; } echarts. registerMap ( 'world' , JSON . stringify ( worldData) ) ; worldGraph. value = echarts. init ( document. getElementById ( 'ipprotrait-worldgraph' ) ) ; let option = { grid : { width : '100%' , height : '100%' , left : '0%' , right : '0%' , bottom : '0%' , containLabel : true } , geo : { type : 'map' , map : 'world' , aspectScale : 0.85 , emphasis : { label : { show : false } , itemStyle : { areaColor : '#F6FBFF' , borderColor : '#CEE0E7' , } } , zoom : 1.2 , itemStyle : { areaColor : '#F6FBFF' , borderColor : '#CEE0E7' , } , } , series : [ { type : 'scatter' , coordinateSystem : 'geo' , symbolSize : 30 , symbol : 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAAE+ElEQVRYCbVYTWhUVxQ+b+a9mUk0hAhGDFiS2grusgpGMHFRaAQjAYm2G6lOEFQIXbiYhRQUF110UYpiSgMSN63GRYqLttiNP2gpgbitaWMpXdREsTTNZP7evH7fzWQySe59P9PJhce775zvfOe799177ryxpI7meV47wkYln/9Qksm3vYWFrDc/L7g7pLN27ixa7e28NwMzB8zXMH9hWdY8/VGaFQUMYduAvyium/FevJDivXsp98kTCtPSQKDEDx4UZ3AwZ3V1icTjnwL4GYQuaQM0xtACIa7Ty+d/kDdv3ipcv55yHz3S0JlN8UOHJHHhQk7a2v6wksn3IfJ3M3rNE0ogxPVKqfSd+/Rpc/7qVQevbY0hSi+ZlOSlS8V4b29WbHsAIn8KCg8UCHFdEDdTunu3pTA2FgsiDONPnDtXto8fX4TI7qCZ9E3INYfX+j1nrlHiOIDCjRsxcnLJMIffoHwFIvAi15x6rX4sdfgUJ7hVDp94o0CMrJ27tXDtWqruNeeTmJyKmxVhpWxp0UaBQI+ylLiPH2sDG2EkN3Mwl4nPLBBFmHXOFNgou8rBgm9o2l2MKX8H+Nnl4WFjEa7li3V3i3PypMT27VPm8vPnUrx9W8rPntXCtH0W86bJSfrexY7+dSPI3mioPPfg6MrihGg2+Ktm5/RpsU+dEpBXbahzEjtwQEq3bknx5s2qXdfhKYQrC6E98G8SaHrFu03HV20SztxGcat+CqaPmKDGcxxttw7nJ1Ad/LqgVRtfa+3MrdpX7/QRE9QwGcwVSaCNErP2zgwZVtecwa3MYTCVXNrlZprB11ZbW9EvcSN9lVyvdZwmgbOxzk4dfp2NuzWohcFUcs3quEwCp2XHjiZpbdXFVG3FO3cEJan6vLFDH8uNb2MO5hKZ1uFMAn/DUfQq3sOdb27lmRlVSnQiaWOZCaqFKkc+v4ANtanEMLN2YQLsea47aR8+nHbv30+YJYqqcy4KsnPiRF2FGjkK4jiqUuvyGHcqZqAfu+vH7NCQLYuLutj/b2tpkeapqRI+Bd7DpDzQEZpeMevbA69U+tMeGNDFNcRGbuYwiWMSo0A68e3wOQptDiPkY2MbOMnNHH7EvgIR+JXV2rpsHznix1GXj5zkZg4/Al+BmPosFvDlRDqdw92PJ5oPXBXOyyqHT7SvwErcmGzfvmgfPepDE82luMCJqLGgyECBGGEes/eJc+ZMXrb5ft8E5Vrxg8NJpxWn4g6IChRYiR+3Eom5xNmzbgBfoJscluPMATgeCAYglECMtIT/Vz6KDw5asf37w/BqMYwlB7kUpxa13hhKIENA+DPOly+TmUx9ZQdlJZHJ5MlBrvUyzE+hBSqKeDxjdXQs2TjWojbGxDo6/kVNzUSJjSQQI/8HGybtjIy41t69ofMQyxjGKo7QkSHXYC0fEnxrlcsTqStXcpLw/R2xEgYMsYxhbC1XmH6kGawSOs4ovsL+Spw/H7iriSEWs2f8OK/yajp1CcRMLGH2hu1jx7x4X5+GdsVEHzHEqhgj0uyoSyDpkHBaYrGP+X+ftWfPpgy00UeMwm5ChDMYfw+GCxfxCoVvvJcvh5ZHRpKSy62EpVLSND6et3btmkKB/yAs15bg8MOW//P9Unr4sLDU3+/xYp82+rYkaVRSCOnyisW/CxMTZV7s0xaVZ0vxENSH75iiutBvVLL/APCb6OqC62Y+AAAAAElFTkSuQmCC' , label : { show : false , } , data : point, } ] } ; worldGraph. value. setOption ( option) ;
} ;
</ script>
最后效果图如下: