echarts地图叠加百度地图底板实现数据可视化

最新推荐文章于 2024-05-06 10:59:29 发布

VIP文章 bolin_

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量1k

点赞数 18

文章标签： echarts 信息可视化前端百度地图

本文链接：https://blog.csdn.net/wangbailin2009/article/details/138226311

版权

这里写自定义目录标题

echarts地图叠加百度地图实现数据可视化

echarts地图叠加百度地图实现数据可视化

实现数据可视化时，个别情况下需要在地图上实现数据的可视化，echarts加载geojson数据可以实现以地图形式展示数据，例如分层设色或者鼠标hover展示指标值，但如果要将echarts地图和真实的地图底板叠加官方就没有相关的示例了。这里的讲的echarts地图与百度地图叠加指的是在百度地图之上叠加一个行政区域的色块填充多边形。
实现效果如下：
echarts地图叠加百度地图
要实现以上效果需要使用echarts的bmap扩展包。
echarts源代码
 bmap扩展源代码

实现思路：使用series-custom，让series-custom. coordinateSystem echarts坐标系与百度地图坐标系一致。在图形渲染逻辑中返回多边形对象。

代码参考：

<html>

	<head>
		<meta charset='utf-8'>
		<style type="text/css">
            html,
			body,
			#main {
     
				width: 100%;
				height: 100%;
				margin: 0;
			}
        </style>
        <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
        <script type="text/javascript" src="./echarts.js"></script>
        <script type="text/javascript" src="./bmap.min.js"></script>
		<<

最低0.47元/天解锁文章

bolin_

关注

18
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
echarts地图叠加百度地图底板实现数据可视化

实现数据可视化时，个别情况下需要在地图上实现数据的可视化，echarts加载geojson数据可以实现以地图形式展示数据，例如分层设色或者鼠标hover展示指标值，但如果要将echarts地图和真实的地图底板叠加官方就没有相关的示例了。这里的讲的echarts地图与百度地图叠加指的是在百度地图之上叠加一个行政区域的色块填充多边形。实现思路：使用series-custom，让series-custom. coordinateSystem echarts坐标系与百度地图坐标系一致。// 百度地图缩放级别。
复制链接

扫一扫