GeoGlobe JS SDK

Class: MapLayer

.Visuals.EchartsGL. MapLayer

基于EchartsGL的三维地图图层

new MapLayer()

Author:
  • liuck
Source:
View2D/Visuals/EchartsGL/MapLayer.js
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

图层使用的坐标系，为常量值，固定为'mapbox3D'
Type:
  • String
Default Value:
  • 'mapbox3D'
Source:
View2D/Visuals/EchartsGL/MapLayer.js

data :Array

地图区域的设置。geojson结构
Type:
  • Array
Source:
View2D/Visuals/EchartsGL/MapLayer.js
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

图层id
Type:
  • String
Default Value:
  • '1'
Source:
View2D/Visuals/EchartsGL/MapLayer.js

instancing :Boolean

会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。
Type:
  • Boolean
Default Value:
  • false
Source:
View2D/Visuals/EchartsGL/MapLayer.js

itemStyle :Object

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

label :Object

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

light :Object

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

map :String

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

name :String

图层名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
Type:
  • String
Default Value:
  • ''
Source:
View2D/Visuals/EchartsGL/MapLayer.js

postEffect :Object

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

shading :String

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

temporalSuperSampling :Object

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

<constant> type :String

图层类别，为常量值，固定为'map3D'
Type:
  • String
Default Value:
  • 'map3D'
Source:
View2D/Visuals/EchartsGL/MapLayer.js

Methods

addTo(echartsgl)

关联Three
Parameters:
Name Type Description
echartsgl GeoGlobe.Visuals.EchartsGL
Source:
View2D/Visuals/EchartsGL/MapLayer.js

getRenderOption()

获取绘制的option结构数据
Source:
View2D/Visuals/EchartsGL/MapLayer.js
See:
Returns:
options
Type
Object

remove()

从父对象中移除自己
Source:
View2D/Visuals/EchartsGL/MapLayer.js

render()

绘制
Source:
View2D/Visuals/EchartsGL/MapLayer.js