GeoGlobe JS SDK

Class: BarLayer

.Visuals.EchartsGL. BarLayer

基于EchartsGL的三维柱状图

new BarLayer()

Author:
  • liuck
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
//option参见：http://echarts.baidu.com/option-gl.html#series-bar3D
//构造EchartsGL可视化图层
var echartsgl = new GeoGlobe.Visuals.EchartsGL({
	visualMap: {
		...
	},
	mapbox3D: {
		...
    }
});
//构造3D柱图层
var barLayer = new GeoGlobe.Visuals.EchartsGL.BarLayer({
	id: '3D bar',
	name: '3D柱',
    data: [{
		"type": "Feature",
		"properties": {
			"id": 10001,
	 		"name": "1号柱",
			"height": 1000
		},
		"geometry": {
			"type": "Point",
			"coordinates": [114.20257245367856, 30.773372078561778]
		},
		"itemStyle": {
			...
		},
		"label": {
			...
		},
		"emphasis": {
			...
		}
	}],
    shading: 'lambert',
    minHeight: 0.1,
    barSize: 0.1,
    silent: true,
    animationEasingUpdate: 2000
});
//添加到EchartsGL图层
barLayer.addTo(echartsgl);
//绘制
echartsgl.render();

Members

animation :Boolean

是否开启动画。
Type:
  • Boolean
Default Value:
  • true
Source:
View2D/Visuals/EchartsGL/BarLayer.js

animationDurationUpdate :Int

过渡动画的时长。
Type:
  • Int
Default Value:
  • 500
Source:
View2D/Visuals/EchartsGL/BarLayer.js

animationEasingUpdate :String

过渡动画的缓动效果。
Type:
  • String
Default Value:
  • 'cubicOut'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

bevelSize :Int

支持设置为从 0 到 1 的值。默认为 0，即没有倒角
Type:
  • Int
Default Value:
  • 0
Source:
View2D/Visuals/EchartsGL/BarLayer.js

bevelSmoothness :Int

柱子倒角的光滑/圆润度，数值越大越光滑/圆润。
Type:
  • Int
Default Value:
  • 2
Source:
View2D/Visuals/EchartsGL/BarLayer.js

colorMaterial :Object

color 材质相关的配置项，在 shading 为'color'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
{
	detailTexture: ...,
	textureTiling: 1,
	textureOffset: 0,
}

colorMaterial :Object

color 材质相关的配置项，在 shading 为'color'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/MapLayer.js
Example
{
	detailTexture: ...,
	textureTiling: 1,
	textureOffset: 0,
}

<constant> coordinateSystem :String

为常量值，固定为'mapbox3D'
Type:
  • String
Default Value:
  • 'mapbox3D'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

data :Array

geojson结构
Type:
  • Array
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
[{
"type": "Feature",
"properties": {
		"id": 10001,
		"name": "1号柱",
		"height": 1000
	},
"geometry": {
		"type": "Point",
		"coordinates": [114.20257245367856, 30.773372078561778]
	},
	"itemStyle": {
		...
	},
	"label": {
		...
	},
	"emphasis": {
		...
	}
}]

emphasis :Object

柱子的标签配置
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
{
	itemStyle : {
		...
	},
	label: {
		...
	}
}

id :String

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

itemStyle :Object

柱子的样式，包括颜色和不透明度。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
{
	color: [1, 1, 1, 1],
	opacity: 1
}

label :Object

柱子的标签配置
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
{
	show: false,
	distance: 2,
	formatter: ...
	textStyle: {
		color: '#fff',
		borderWidth: 1,
		borderColor: '#fff',
		fontFamily: 'sans-serif',
		fontSize: 20,
		fontWeight: normal
	}
}

lambertMaterial :Object

lambert 材质相关的配置项，在 shading 为'lambert'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
{
	detailTexture: ...,
	textureTiling: 1,
	textureOffset: 0,
}

lambertMaterial :Object

lambert lambert 材质相关的配置项，在 shading 为'lambert'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/MapLayer.js
Example
{
	detailTexture: ...,
	textureTiling: 1,
	textureOffset: 0,
}

minHeight :Int

最小柱子高度
Type:
  • Int
Default Value:
  • 0
Source:
View2D/Visuals/EchartsGL/BarLayer.js

name :String

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

realisticMaterial :Object

真实感材质相关的配置项，在 shading 为'realistic'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
{
	detailTexture: ...,
	textureTiling: 1,
	textureOffset: 0,
	roughness: 0.5,
	metalness: 0,
	roughnessAdjust: 0.5,
	metalnessAdjust: 0.5,
	normalTexture: ...,
}

realisticMaterial :Object

真实感材质相关的配置项，在 shading 为'realistic'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/MapLayer.js
Example
{
	detailTexture: ...,
	textureTiling: 1,
	textureOffset: 0,
	roughness: 0.5,
	metalness: 0,
	roughnessAdjust: 0.5,
	metalnessAdjust: 0.5,
	normalTexture: ...,
}

shading :String

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

silent :Boolean

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
Type:
  • Boolean
Default Value:
  • false
Source:
View2D/Visuals/EchartsGL/BarLayer.js

stack :String

相同 stack 值的柱状图系列数据会有叠加。注意不同系列需要叠加的数据项在数组中的索引必须是一样的。
Type:
  • String
Default Value:
  • ''
Source:
View2D/Visuals/EchartsGL/BarLayer.js

<constant> type :String

为常量值，固定为'bar3D'
Type:
  • String
Default Value:
  • 'bar3D'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

zlevel :Int

组件所在的层。
Type:
  • Int
Default Value:
  • -10
Source:
View2D/Visuals/EchartsGL/BarLayer.js

zlevel :Number

组件所在的层
Type:
  • Number
Default Value:
  • -10
Source:
View2D/Visuals/EchartsGL/MapLayer.js

Methods

addTo(echartsgl)

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

getRenderOption()

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

remove()

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

render()

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