echarts根据经纬度在地图上生成标点

一条1996

已于 2023-07-24 11:34:21 修改

阅读量3.7k

点赞数 6

分类专栏：网页特效文章标签： echarts arcgis 前端

于 2023-07-22 20:37:00 首次发布

本文链接：https://blog.csdn.net/qq_33644799/article/details/131872345

版权

网页特效专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.确保你已经引入了 ECharts 的库文件，可以通过 CDN 引入，也可以下载到本地后引入。在 HTML 文件中添加以下标签：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 地图标点示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="map" style="width: 800px; height: 600px;"></div>
    <script src="script.js"></script>
</body>
</html>

2.在 script.js 文件中，编写以下 JavaScript 代码：

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('map'));

// 注册地图的 JSON 数据
echarts.registerMap('your_map_name', your_map_json);

// 经纬度数据示例（这里使用随机数据作为示例）
var data = [
    { name: '地点A', value: [经度A, 纬度A] },
    { name: '地点B', value: [经度B, 纬度B] },
    // 添加更多的标点数据
    // ...
];

// 配置选项
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    geo: {
        map: 'your_map_name',
        roam: true // 可以通过鼠标滚轮放大缩小地图
    },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: data.map(function (item) {
            return {
                name: item.name,
                value: [item.value[0], item.value[1], 1] // 最后一个数字控制涟漪特效的大小
            };
        }),
        symbolSize: 10, // 控制散点的大小
        label: {
            show: false // 不显示标点上的标签，避免重叠
        },
        emphasis: {
            itemStyle: {
                color: '#FF5733' // 鼠标悬停时的标点颜色
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

在上面的代码中，你需要替换以下内容：

your_map_name: 你使用的地图名称，可以自定义，要和你的地图 JSON 数据对应。
your_map_json: 你的地图数据的 JSON，可以使用 ECharts 提供的地图数据或者自己准备数据。可以在 ECharts 的官方网站或者其他资源找到世界地图和各国地图的 JSON 数据。
经度A 和 纬度A：代表地点A的经度和纬度，同样，可以添加更多的经纬度数据，如经度B、纬度B等。