GeoGlobe JS SDK

Class: ScatterLayer

.Visuals.EchartsGL. ScatterLayer

基于EchartsGL的三维散点图

new ScatterLayer()

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

Members

animation :Boolean

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

animationDurationUpdate :Number

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

animationEasingUpdate :String

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

blendMode :String

混合模式，目前支持'source-over'，'lighter'，默认使用的'source-over'是通过 alpha 混合，而'lighter'是叠加模式，该模式可以让数据集中的区域因为叠加而产生高亮的效果。
Type:
  • String
Default Value:
  • 'source-over'
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js

<constant> coordinateSystem :String

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

data :Array

三维散点图数据数组，geojson结构
Type:
  • Array
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js
Example
[{
"type": "Feature",
"properties": {
		"id": 10001,
		"name": "1号点",
		"height": 1000
	},
"geometry": {
		"type": "Point",
		"coordinates": [114.20257245367856, 30.773372078561778]
	}
}]

emphasis :Object

图形和标签高亮的样式
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js
Example
{
	itemStyle : {
		...
	},
	label: {
		...
	}
}

id :String

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

itemStyle :Object

散点图颜色描边等样式
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js
Example
{
	color: [1, 1, 1, 1],
	opacity: 1,
	borderWidth: 0,
	borderColor: '#fff'
}

label :Object

标签样式
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js
Example
{
	show: false,
	distance: 5,
	position: 'right',
	formatter: ...
	textStyle: {
		color: '#fff',
		borderWidth: 1,
		borderColor: '#fff',
		fontFamily: 'sans-serif',
		fontSize: 20,
		fontWeight: normal
	}
}

name :String

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

silent :Boolean

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

symbol :String

散点的形状。默认为圆形。ECharts提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'，可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 symbol 的话就是 symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
Type:
  • String
Default Value:
  • 'circle'
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js

symbolSize :Number

标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
Type:
  • Number
Default Value:
  • 10
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js

<constant> type :String

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

zlevel :Number

组件所在的层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
Type:
  • Number
Default Value:
  • -10
Source:
View2D/Visuals/EchartsGL/ScatterLayer.js

Methods

addTo(echartsgl)

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

getRenderOption()

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

remove()

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

render()

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