Echarts三维坐标系

Echarts三维坐标系

一、坐标系

1.1 globe-地图组件

• 提供地球坐标系
• 可展示三维图：散点图、气泡图、柱状图、飞线图

部分属性

属性	含义	默认值
globeRadius	地球半径	100
globeOuterRadius	地球外半径，内外半径构成的空间用于绘图	150

1.2 geo3D-三维地理坐标系组件

• 提供三维地理坐标系
• 可展示三维图：散点图、气泡图、柱状图、飞线图

二、三维地图-map3D

• 地理区域数据可视化

三、各类gl表格

3.1 bar3D & scatter3D

支持坐标系：cartesian3D，geo3D和globe

数据格式：

• 数组

在 grid3D 中，每一项的前三个值分别是x, y, z。

在 geo3D 以及 globe 中，每一项的前两个值分别是经纬度 lng, lat。

var data = [
    [
        [12, 14, 10], [34, 50, 15], [56, 30, 20],
        [10, 15, 12], [23, 10, 14]
    ]
]

• JSON对象数组

在 grid3D 中，value分别是x, y, z。

在 geo3D 以及 globe 中，value前两个值分别是经纬度 lng, lat。

var data = [
    {
        // 数据项的名称
        name: '数据1',
        // 数据项值
        value: [12, 14, 10]
    }, 
    {
        name: '数据2',
        value: [34, 50, 15]
    }
]

3.2 lines3D

支持坐标系：geo3D和globe

数据格式：

//数组
var data = [
    [
        [120, 66, 1], // 起点的经纬度和海拔坐标
        [122, 67, 2]  // 终点的经纬度和海拔坐标
    ]
]

//JSON对象数组
var data = [
    {
        coords: [ [120, 66], [122, 67] ],
        // 数据值
        value: 10,
        // 数据名
        name: 'foo',
        // 线条样式
        lineStyle: {}
    }
]

3.3 map3D-三维区域地图

特点：设置区域高度

直接展示地图：与二维地图相比，二维地图通过颜色区分各个区域，而三维地图则可通过颜色和高度进行区分。

数据格式：

var data = [
    {
        // 区域名-对应地图区域的名称
        name: '北京市',
        // 区域值-区域名对应的数据值
        value: 10,
        //区域高度-地图上各区域的高度（当地图为建筑物数据时，则可体现各建筑的高度）
        regionHeight:20
    }
]

四、坐标系预研

Echarts中坐标系具备两大功能：

• 图表的坐标系
• 坐标系组件（拥有配置坐标系的参数）

4.1 注册坐标系

/*
 * 注册坐标系 
 * @param {string} coordSysName - 坐标系名称
 * @param {any} registerCoordSys - 坐标系 
 */
echarts.registerCoordinateSystem(coordSysName,registerCoordSys)

4.2 坐标系组件

4.2.1 视图

/*
 * 扩展组件视图 
 * @param {object} opt - 视图相关参数
 */
echarts.extendComponentView(opt)

4.2.2 模型

/*
 * 扩展组件模型 
 * @param {object} opt - 模型相关参数
 */
echarts.extendComponentModel(opt)

4.2.3 操作

/*
 * 注册组件操作
 * @param {object} opt - 操作参数{type,event,update}
 * @param {Function} handler - 处理方法
 */
echarts.registerAction(opt,handler)

/*
 * 组件遍历
 * @param {object} opt - 操作参数{mainType,query}
 * @param {Function} handler - 处理方法
 */
ecModel.eachComponent(opt,handler)

/*
 * 例子
 */
 echarts.registerAction({
    type: 'globeChangeCamera',
    event: 'globecamerachanged',
    update: 'series:updateCamera'
}, function (payload, ecModel) {
    ecModel.eachComponent({
        mainType: 'globe', query: payload
    }, function (componentModel) {
        componentModel.setView(payload);
    });
});