GeoGlobe JS SDK

Class: LinesLayer

.Visuals.EchartsGL. LinesLayer

基于EchartsGL的三维飞线图

new LinesLayer()

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

Members

blendMode :String

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

<constant> coordinateSystem :String

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

data :Array

三维飞线图数据数组。通常数据的每一项可以是一个包含起点和终点的坐标集。在 polyline 设置为 true 时支持多于两个的坐标。geojson结构
Type:
  • Array
Source:
View2D/Visuals/EchartsGL/LinesLayer.js
Example
[{
"type": "Feature",
"properties": {
		"id": 10001,
		"name": "1号线"
	},
"geometry": {
	    "type": "LineString",
		"coordinates": [[116.3671875, 39.90973623453719], [-73.98193359375, 40.730608477796636]]
	}
}]

effect :Object

飞线的尾迹特效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/LinesLayer.js
Example
{
	show: false,
	period: 4,
	constantSpeed: null,
	trailWidth: 4,
	trailLength: 0.1,
	trailColor: null,
	trailOpacity: null
}

id :String

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

lineStyle :Object

飞线的线条样式。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/LinesLayer.js
Example
{
	color: [1, 1, 1, 1],
	opacity: 1,
	width: 1
}

name :String

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

polyline :Boolean

是否是多段线。默认为 false，只能用于绘制只有两个端点的线段（表现为被赛尔曲线）。如果该配置项为 true，则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线，在绘制路线轨迹的时候比较有用。
Type:
  • Boolean
Default Value:
  • false
Source:
View2D/Visuals/EchartsGL/LinesLayer.js

silent :Boolean

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

<constant> type :String

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

zlevel :Number

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

Methods

addTo(echartsgl)

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

getRenderOption()

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

remove()

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

render()

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