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>
		<<

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-27 06:16:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-27 06:16:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-27 06:16:05       82 阅读
  4. Python语言-面向对象

    2024-04-27 06:16:05       91 阅读

热门阅读

  1. mxnet gluon GRU 文档

    2024-04-27 06:16:05       35 阅读
  2. Linux:使用ssl加密网站为https

    2024-04-27 06:16:05       35 阅读
  3. ttcp测试网络吞吐量

    2024-04-27 06:16:05       41 阅读
  4. Nginx安装withSSL模块

    2024-04-27 06:16:05       37 阅读
  5. Socket套接字(TCP流)篇

    2024-04-27 06:16:05       37 阅读
  6. C++ std::variant 总结

    2024-04-27 06:16:05       34 阅读
  7. 新媒体矩阵号是怎么做的?

    2024-04-27 06:16:05       35 阅读
  8. flask服务中如何request获取请求的headers信息

    2024-04-27 06:16:05       33 阅读
  9. Python Web开发框架详解:Django与Flask的比较与实践

    2024-04-27 06:16:05       44 阅读