Vue3.x使用Echarts绘制世界地图并进行定点

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;
  }
});
/* 初始化IP画像数据 */
const initData = () => {
    if (worldGraph.value) {
        worldGraph.value.dispose();
        worldGraph.value = null;
    }
    const point = []
    // 添加美国坐标点
    point.push({
        name: '美国',
        value: [-97.822, 37.751 + 15], // +15使定点坐标位置正确
        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',
        // rippleEffect: { // 坐标点动画
        //   period: 2,
        //   scale: 4,
        //   brushType: 'fill'
        // },
        label: {
          show: false,
        },
        data: point,
        // itemStyle: { // 坐标点颜色
        //   show: true,
        //   color: '#F53F3F',
        //   shadowColor: '#fff'
        // }
      }
    ]
  };
  worldGraph.value.setOption(option);
};
</script>

• 最后效果图如下：