MapLayer

GeoGlobe.Visuals.EchartsGL. MapLayer

基于EchartsGL的三维地图图层

Constructor

new MapLayer()

Author:
  • liuck
Example
//option参见:http://echarts.baidu.com/option-gl.html#series-map3D
 //构造EchartsGL可视化图层
 var echartsgl = new GeoGlobe.Visuals.EchartsGL({
	visualMap: {
		...
	},
	mapbox3D: {
		...
    }
});
 //构造3D地图图层
 var mapLayer = new GeoGlobe.Visuals.EchartsGL.MapLayer({
	id: '3D map',
	name: '3D地图',
    data: [{
		"type": "Feature",
		"properties": {
			"id": 10001,
	 		"name": "1号",
			"height": 1000
		},
		"geometry": {
			"type": "Polygon",
			"coordinates": [[[114.26730001377071,30.595149654035424],[114.26737510423808,30.594983416111138],[114.26728930608508,30.594946561374197],[114.26731076201405,30.59488191979089],[114.26717133751096,30.594845110133267],[114.26709624642238,30.59501134779343],[114.26717132160428,30.595029748326304],[114.26713914030533,30.595094398742066],[114.26707478473918,30.59514061236826],[114.26699970846724,30.59513144350006],[114.26698898951582,30.59505759734068],[114.26678520845394,30.595048535449614],[114.26677447111632,30.595187022721653],[114.26687099882221,30.59519617428873],[114.26687099245959,30.595270029320062],[114.26707477280914,30.595279090587976],[114.26730001377071,30.595149654035424]]]
		}
	}],
    silent: true,
    animationEasingUpdate: 2000
});
 //添加到EchartsGL图层
 mapLayer.addTo(echartsgl);
 //绘制
 echartsgl.render();

Members

(constant) coordinateSystem :String

Default Value:
  • 'mapbox3D'
图层使用的坐标系,为常量值,固定为'mapbox3D'
Type:
  • String

data :Array

地图区域的设置。geojson结构
Type:
  • Array
Example
[{
"type": "Feature",
"properties": {
		"id": 10001,
		"name": "1号多边形",
	    "height": 3
	},
"geometry": {
	    "type": "Polygon",
		"coordinates": [[[114.26730001377071,30.595149654035424],[114.26737510423808,30.594983416111138],[114.26728930608508,30.594946561374197],[114.26731076201405,30.59488191979089],[114.26717133751096,30.594845110133267],[114.26709624642238,30.59501134779343],[114.26717132160428,30.595029748326304],[114.26713914030533,30.595094398742066],[114.26707478473918,30.59514061236826],[114.26699970846724,30.59513144350006],[114.26698898951582,30.59505759734068],[114.26678520845394,30.595048535449614],[114.26677447111632,30.595187022721653],[114.26687099882221,30.59519617428873],[114.26687099245959,30.595270029320062],[114.26707477280914,30.595279090587976],[114.26730001377071,30.595149654035424]]]
	}
}]

id :String

Default Value:
  • '1'
图层id
Type:
  • String

instancing :Boolean

Default Value:
  • false
会将 GeoJSON 中所有的 geometry 合并成一个,在 GeoJSON 拥有特别多(上千)的 geometry 时可以有效提升绘制效率。
Type:
  • Boolean

itemStyle :Object

Default Value:
  • null
三维地图 中三维图形的视觉属性,包括颜色,透明度,描边等。
Type:
  • Object
Example
{
	color: [1, 1, 1, 1],
	opacity: 1,
	borderWidth: 1,
	borderColor: '#333'
}

label :Object

Default Value:
  • null
标签的相关设置
Type:
  • Object
Example
{
 show: false,
 distance: 10,
 formatter: '{b}: {c}',
 textStyle: {...}
}

light :Object

Default Value:
  • null
光照相关的设置。在 shading 为 'color' 的时候无效。光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富,更有层次。
Type:
  • Object
Example
{
	main: {...},
	ambient: {...},
	ambientCubemap: {...},
}

map :String

Default Value:
  • ''
地图类型。ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
Type:
  • String

name :String

Default Value:
  • ''
图层名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
Type:
  • String

postEffect :Object

Default Value:
  • null
后处理特效的相关配置,后处理特效可以为画面添加高光,景深,环境光遮蔽(SSAO),调色等效果。可以让整个画面更富有质感。
Type:
  • Object
Example
{
	enable: false,
	bloom: {...},
	depthOfField: {...},
	screenSpaceAmbientOcclusion: {...},
	SSAO: {...},
	colorCorrection: {...},
	FXAA: {...}
}

shading :String

Default Value:
  • null
三维地图中三维图形的着色效果。支持下面三种着色方式,'color' 只显示颜色,不受光照等其它因素的影响。'lambert' 通过经典的 lambert 着色表现光照带来的明暗。'realistic' 真实感渲染,配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。
Type:
  • String

temporalSuperSampling :Object

Default Value:
  • null
分帧超采样。在开启 postEffect 后,WebGL 默认的 MSAA 会无法使用,所以我们需要自己解决锯齿的问题。分帧超采样就是用来解决锯齿的问题,它在画面静止后会持续分帧对一个像素多次抖动采样,从而达到抗锯齿的效果。而且在这个分帧采样的过程中,echarts-gl 也会对 postEffect 中一些需要采样保证效果的特效,例如 SSAO, 景深,以及阴影进行渐进增强。
Type:
  • Object
Example
{
	enable: 'auto'
}

(constant) type :String

Default Value:
  • 'map3D'
图层类别,为常量值,固定为'map3D'
Type:
  • String

Methods

addTo(echartsgl)

关联Three
Parameters:
Name Type Description
echartsgl GeoGlobe.Visuals.EchartsGL

getRenderOption() → {Object}

See:
获取绘制的option结构数据
Returns:
options
Type
Object

remove()

从父对象中移除自己

render()

绘制