# 折线图层(LineString)
折线图层用于展示线类型的数据,三维的线图层支持二维模式下的部分功能。
提示
三维图层的每个集合要素的高度,可以使用样式中的height
参数来定义,也可以在数据中的每个经纬度的后面,加上以米为单位的高度数值。
如果同时指定这两个值,那么这两个值所对应的高度将相加。
对于线数据而言,开发者可以在数据中的每个经纬度的后面,加上以米为单位的高度数值。这样能够创建出不平行于地面的折线。
new aimap.LineString(layerOptions: Object)
# 初始化参数
# LayerOptions参数说明
字段名 | 类型 | 说明 |
---|---|---|
id | string | 默认值为${type}.${uuid} ,该值不允许重复。 |
map | Map | 地图对象,如果设置,该图层会自动加载到地图中,如果未设置,需要手动加载图层:addTo(map) 。 |
mode | string | 三维图层的mode 是3d 。 |
minZoom | number | 能显示的最小的zoom level,默认 3。 |
maxZoom | number | 能显示的最大的zoom level(但不包括这个Level),默认20。 |
spatialReference | string | 图层数据的坐标系统,默认:gcj02 。可选项分别为:- GPS坐标系— wgs84 - 火星/高德坐标系— gcj02 - 百度坐标系— bd09 - 城建坐标系— cgcs2000 。 |
data必须 | Data | 支持线类型的矢量数据,包括SimpleFeature ,GeoJSON 等,具体参见:矢量数据定义。 |
style必须 | Style | 本图层支持与线相关的样式配置,包括:line-color , line-width , line-opacity , height , line-fly-top , line-gradient-color 。 |
filter | Filter | 图层数据的过滤条件,不满足过滤条件的数据将不显示。具体参见:Filter 配置。 |
# 示例
const layer = new aimap.LineString({
mode: '3d',
data: [{
name: "线段1",
coordinates: [[121.61060194294635, 31.2062484735943], [121.61095320910283, 31.2057744124741], [121.6112679495655, 31.20536693544446]]
}, {
name: "线段2",
coordinates: [[121.61125141051002, 31.20662944902567], [121.61159198396018, 31.20629378861193], [121.6224597363301, 31.195635374550013]]
}],
style: {
'line-width': 10, //宽度
'line-color': 'white', //基础颜色
'line-opacity': 1, //透明度
'height': 100, //基础高度
'line-fly-top': 50, //飞弧高度
'line-gradient-color': 'black', //渐变颜色
},
map
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 脉冲动画额外参数说明
# 脉冲动画Style参数说明
属性 | 类型 | 取值范围 | 说明 |
---|---|---|---|
head-color | string | expressions | 黑色 | 脉冲动画的动画体头部颜色 |
color | string | expressions | 黑色 | 脉冲动画的动画体颜色 |
width | number | expressions | 1 | 脉冲动画的动画体宽度 |
speed | number | expressions | 1 | 脉冲动画速度 |
direction | bool | expressions | true | 脉冲动画方向 |
# 示例
const layer = new aimap.LineString({
mode: '3d',
data: [{
name: "线段1",
coordinates: [[121.61060194294635, 31.2062484735943], [121.61095320910283, 31.2057744124741], [121.6112679495655, 31.20536693544446]]
}, {
name: "线段2",
coordinates: [[121.61125141051002, 31.20662944902567], [121.61159198396018, 31.20629378861193], [121.6224597363301, 31.195635374550013]]
}],
style: {
'line-width': 10,
'line-color': 'white',
'line-opacity': 1,
'height': 100,
'line-fly-top': 50,
'line-gradient-color': 'black',
},
pulse: { // 额外脉冲样式
'head-color': 'red',
'color': 'green',
'width': 1.5
'speed': 1,
'direction': true
}
map
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 实例变量
# id
此图层的 id,如果在初始化图层的参数中指定,则为参数中的 id,否则 SDK 内部会自动生成一个 id。
# 示例
var lineString = new aimap.LineString({...});
console.log(lineString.id); // "lineString.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"
2
# type
此图层的类型,对于本图层, type
为固定值:lineString
。
# 示例
var lineString = new aimap.LineString({...});
console.log(lineString.type); // "lineString"
2
# 实例方法
addTo(map)
如果在初始化图层时,没有传入地图对象参数,则需要使用此方法来将图层添加到地图上。
参数
map(Map)
:需要添加本图层的地图对象。
返回值
LineString
:this
remove()
将本图层从地图中移除,并销毁相关的资源。
返回值
LineString
:this
show()
显示该图层。
返回值
LineString
:this
hide()
隐藏该图层。
返回值
LineString
:this
flyTo(options?)
使地图带有动画的跳转,使得图层的中心点位于屏幕中间。
参数
options(SetFocusOptions)
:跳转动画的更多参数,具体参见:SetFocusOptions 配置。
返回值
LineString
:this
fitView(options?)
使地图带有动画的跳转,使得图层的数据铺满屏幕。
参数
options(SetFocusOptions)
:跳转动画的更多参数,具体参见:SetFocusOptions 配置。
返回值
LineString
:this
setZoomRange(minZoom, maxZoom)
设置图层的缩放层级范围。
参数
minZoom(number)
:最小可显示该图层的缩放级别。
maxZoom(number)
:最大可显示该图层的缩放级别。
返回值
LineString
:this
setStyle(style, options?)
增量更新图层的样式。
参数
style(style)
:样式对象,这些样式将增量更新到图层已有的样式上,支持的样式与当前图层一致。
options(SetStyleOptions)
:设置新样式的其他配置项,具体参见:SetStyleOptions 配置。
返回值
LineString
:this
setData(data, options?)
重新指定数据,原有的数据会被清除掉。
参数
data(Data)
:与 layeroptions参数说明 中的Data
字段定义一致。
options(SetDataOptions)
:指定新数据源的其他配置项,具体参见:SetDataOptions 配置。
返回值
LineString
:this
setFilter(filter, options?)
为图层的数据设置过滤条件,不满足过滤条件的数据将会被隐藏。
参数
filter(Filter)
:图层数据的过滤条件,不满足过滤条件的数据将不显示。具体参见:Filter 配置
options(SetFilterOptions)
:进行过滤操作的其他配置项,具体参见:SetFilterOptions 配置。
返回值
LineString
:this
on(type, listener)
为图层绑定事件监听。
参数
type(string)
:事件类型,支持的事件类型可参考 图层事件。
listener(Function)
:如果此处使用匿名函数,则后续将无法解绑。
返回值
LineString
:this
once(type, listener)
为图层绑定事件监听,事件只会响应一次。
参数
type(string)
:事件类型,支持的事件类型可参考 图层事件。
listener(Function)
:如果此处使用匿名函数,则后续将无法解绑。
返回值
LineString
:this
off(type, listener)
解除已绑定事件监听。
参数
type(string)
:事件类型,支持的事件类型可参考 图层事件。
listener(Function)
:通过 on
或者 once
绑定的事件对象。
返回值
LineString
:this
# 图层事件
click
当鼠标在图层同一点处点击并松开时触发。
mousemove
当鼠标在图层中移动时触发。
mouseenter
当鼠标从某一图层外部或地图画布外部进入当前图层的可见部分时触发。
mouseleave
当鼠标离开当前图层的可见部分时触发。