echart3D地球上贴2D组件

globe与geo完美结合

globe

  • globe用于绘制3D地球,属于echart-gl.js,本身可以进行坐标和连线的显示,但是要使用lines3D和scatter3D,此时就会有属性的限制。
  • 平面上使用的lines和scatter与3D版的在坐标使用上一致,但是有些特效和属性是3D没有的,比如想在3D时绘制在线上也可出现的自定义symbol,lines3D不支持这样的效果。
  • 二者的结合就非常重要了。注意:globe的baseTexture允许放置canvas和echart实例,那么可以将2d的geo或map与3d的globe结合起来,实现地球上各种特效的骚操作。
// 使用 echarts 绘制世界地图的实例作为纹理
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
    width: 4096, height: 2048
});
mapChart.setOption({
    series : [
        {
            type: 'map',
            map: 'world',
            // 绘制完整尺寸的 echarts 实例
            top: 0, left: 0,
            right: 0, bottom: 0,
            boundingCoords: [[-180, 90], [180, -90]]
        }
    ]
});
...
baseTexture: mapChart

自定义的地图可以使用geoJSON,也可以放在地球上,实现将地球区域性遮盖的效果
echart文档详实全面,可以仔细研究https://www.echartsjs.com/zh/option-gl.html#globe.baseTexture

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容