Map 3D

map3d类型提供了对全球数据的可视化，支持 ECharts 中map原有配置项的同时也加入了大量新的配置项。如果你之前使用过 ECharts 的map组件的话对下面的示例肯定不会陌生。

Simple Example

var option = {
    title: {
        show: true,
        text: 'Globe Visualization'
    },
    series: [{
        name: 'globe',
        type: 'map3d',
        // 底图配置
        baseLayer: {
            backgroundColor: '',
            backgroundImage: 'asset/earth.jpg',
        },
        // 表层（比如云层）配置
        surfaceLayers: [{
            type: 'texture',
            image: 'asset/clouds.png'
        }],
        // 地图绘制配置成只绘制轮廓线和标签
        itemStyle: {
            normal: {
                label: {
                    show: true
                },
                borderWidth: 1,
                borderColor: 'yellow',
                areaStyle: {
                    color: 'rgba(0, 0, 0, 0)'
                }
            }
        },
        // Empty data
        data: [{}]
    }]
}

Series Option

系列配置项, 通用部分详见 ECharts

mapType

mapType: 'world'

同 ECharts 中 map 的 mapType, 默认是 world。不建议使用其它类型。

mapLocation

mapLocation: {
    x: 0,
    y: 0,
    width: '100%',
    height: '100%'
}

同 ECharts 中 map 的 mapLocation，指定地球在视图中的位置。可以是绝对的像素坐标，也可以表示相对的百分比。

autoRotate

地球是否在打开的时候自动旋转

baseLayer

backgroundColor

backgroundColor: 'black'

底图背景色

backgroundImage

backgroundImage: 'none'

底图背景图片，覆盖在地图背景色上，可以是Image url，Image dom 或者 Canvas dom

quality

quality: 'medium'

底图贴图质量，即贴图的分辨率. 可选项：

'high'(4096 x 4096)

'medium'(2048 x 2048)

'low'(1024 x 1024)

也可以直接配置数值分辨率比如512。

surfaceLayers

除了基于 ECharts map 的底层基本地图，map3d 可以分层绘制其它数据，比如风场的可视化。对于每一层有如下配置项:

name

层名称

type

层类型，可选项：

'texture' 普通从外部加载的纹理，可以选择该层的纹理图片，比如开头示例中的云层。

'particle' 粒子纹理，用来描绘向量场，例如风场和洋流。

distance

层的高度

image

仅在type:'texture' 时有效，指定外部加载的图片，可以是 url 或者 dom。

size

size: [2048, 1024]

层表面纹理的大小，默认为 2048 x 1024，注意部分用户环境的 GPU 不支持大于 2048 的纹理。

particle

仅在type:'particle' 时有效，particle 的配置项如下

具体的示例可以参见风场的可视化示例