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
更多文章请关注公众号查看!