Echarts最简单的地图投影方式，这种效果泰裤辣！

最新推荐文章于 2025-03-21 13:39:55 发布

趣学旅程

最新推荐文章于 2025-03-21 13:39:55 发布

阅读量934

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/quxuetrip/article/details/130921446

版权

本文介绍了如何使用ECharts地图组件实现简单的地图投影效果，通过GeoJSON数据将经纬度映射到显示区域，实现数据可视化项目的地图选中和高亮效果。文中包括准备工作、代码示例以及对ECharts在数据可视化领域的应用赞赏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01 背景

在数据可视化项目里面经常会用到地图随机选中或地图定时选中的效果，结合各个地图api 和可视化库对比发现：用ECharts的地图组件实现较为简单。

地图组件一直是 ECharts 中使用非常广泛的组件。一般地图组件会使用存储了经纬度的 GeoJSON 格式的数据，而 ECharts 则计算出合适的显示区域然后把经纬度线性映射到这个区域，这是一种最简单的地图投影方式。

02 最终效果

看着这种效果，是不是觉得很酷！话不多说，马上开始！

03 准备工作

安装ECharts

下载最新版本的ECharts(官网)

https://echarts.apache.org/zh/download.html

下载经纬度数据

下载中国经纬度的 GeoJSON json数据(国内在高德地图下载)

http://datav.aliyun.com/portal/school/atlas/area_selector

重命名文件

把下载的json文件保存到项目目录并命名为geojson.json，数据里面存储了国内34个省级行政区域的地理经纬度坐标信息。

代码

如果实在不知道代码怎么写？没关系，小趣已经帮大家准备好了，可以参考着来哦~

04 代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts文件 -->
    <script src="./echarts.js"></script>
    <style>
        #map {
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background-color: #000;
        }
</style>
</head>

<body>
    <!-- 地图挂载入口 -->
    <div id="map"></div>
    <script src="./mapdemo.js"></script>
</body>

</html>

mapdemo.js

let myEchart = echarts.init(document.querySelector("#map"), null, {
            renderer: 'canvas',
            useDirtyRect:

最低0.47元/天解锁文章