GIS开发:开源Cesium-Echarts4

  • Post author:
  • Post category:其他


echarts在mapbox-gl上能够以图层的形式进行叠加,同样在Cesium上也能够进行叠加。

叠加形式都是通过在地图上方覆盖一个echarts图层实现的。

github上有开源的图层叠加样例,是以vue组件形式实现的,网址是:

https://github.com/happyport/Cesium-Echarts4

Cesium上叠加效果图:

在这里插入图片描述

在此使用的基础上,对以上的源码进行了一定修改,方便单页修改。

地址是:https://github.com/wclwksn/Cesium-Echarts4

增加了一个单页面的测试,引用Cesium和echarts的类库,再引用扩展的echartslayer.js,即可在页面上显示效果。

<script src="Cesium/Cesium.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
<style>
@import url(Cesium/Widgets/widgets.css);
 </style>

Cesium的类库包有点大,没有上传,自己下载放在对应的路径即可。

新修改的类,放在lib文件夹中,其中cesium_data.js是把原来使用的数据做了一个简单的调整。

修改后的效果:

在这里插入图片描述

调整了一个设置echarts图层尺寸的bug,这个在电脑的缩放设置时,会存在问题。

参见windows电脑的缩放比例:

在这里插入图片描述

参考文章:

https://github.com/happyport/Cesium-Echarts4

https://github.com/Supermap/echartsLayer

更多文章请关注公众号查看!

在这里插入图片描述



版权声明:本文为wclwksn2019原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。