美文网首页echart多样实现
echart3D地球上贴2D组件

echart3D地球上贴2D组件

作者: 你好赵大宝 | 来源:发表于2019-12-20 14:51 被阅读0次

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

相关文章

  • echart3D地球上贴2D组件

    globe与geo完美结合 globe globe用于绘制3D地球,属于echart-gl.js,本身可以进行坐标...

  • 物理系统 碰撞 触发器 3

    Rigidbody 2D组件 (刚体) 一:重力 1、玩家添加Rigidbody 2D组件: 2、禁用重力 Gra...

  • iOS 自定义相机 拍照+视频录制(二)

    BSFramework 组件包: 2D、3D无限轮播图组件 图片视频选择、图片视频预览、图片视频拍摄组件 GitH...

  • iOS 自定义相机 拍照+视频录制(一)

    BSFramework 组件包: 2D、3D无限轮播图组件 图片视频选择、图片视频预览、图片视频拍摄组件 GitH...

  • Physics Reference 2D--Collider 2

      Collider 2D组件定义了2D GameObject的形状以便来实现碰撞的目的。对撞机是看不见的,不必与...

  • Physics Reference 2D--Rigidbody

      Rigidbody 2D组件将对象置于物理引擎的控制之下。许多熟悉的概念从标准刚体组件(standard Ri...

  • 地球,地球(上)

    这里是CW427DQ号检测点,现在时间是三宇十六星,现在是第637次检测汇报,汇报时间按当地时间计算,汇报内容如下...

  • Unity入门:快速做一个上瘾的小游戏

    本文转自Unity Connect博主Michael Wang 主要学习的知识点: Joint 2D 组件 Lin...

  • 和解

    《流浪地球》,至今票房已突破30亿。大年初二本来选择看《飞驰人生》,因为是2D阴差阳错选择了3D《流浪地球》。 这...

  • 八、物理检测:1、碰撞API

    碰撞总是不发生原因有可能 你的碰撞组件和碰撞方法不对应,比如2D碰撞组件,却用3D的碰撞方法去检测。同理的还有射线...

网友评论

    本文标题:echart3D地球上贴2D组件

    本文链接:https://www.haomeiwen.com/subject/oxcinctx.html