# 折线图层(LineString)

折线图层用于展示线类型的数据,三维的线图层支持二维模式下的部分功能。

提示

三维图层的每个集合要素的高度,可以使用样式中的height参数来定义,也可以在数据中的每个经纬度的后面,加上以米为单位的高度数值。

如果同时指定这两个值,那么这两个值所对应的高度将相加。

对于线数据而言,开发者可以在数据中的每个经纬度的后面,加上以米为单位的高度数值。这样能够创建出不平行于地面的折线。

new aimap.LineString(layerOptions: Object)
1

# 初始化参数

# LayerOptions参数说明

字段名 类型 说明
id string 默认值为${type}.${uuid},该值不允许重复。
map Map 地图对象,如果设置,该图层会自动加载到地图中,如果未设置,需要手动加载图层:addTo(map)
mode string 三维图层的mode3d
minZoom number 能显示的最小的zoom level,默认 3。
maxZoom number 能显示的最大的zoom level(但不包括这个Level),默认20。
spatialReference string 图层数据的坐标系统,默认:gcj02。可选项分别为:
- GPS坐标系—wgs84
- 火星/高德坐标系—gcj02
- 百度坐标系—bd09
- 城建坐标系—cgcs2000
data必须 Data 支持线类型的矢量数据,包括SimpleFeatureGeoJSON等,具体参见:矢量数据定义
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
});
1
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
});
1
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"
1
2

# type

此图层的类型,对于本图层, type 为固定值:lineString

# 示例

var lineString = new aimap.LineString({...});
console.log(lineString.type); // "lineString"
1
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

当鼠标离开当前图层的可见部分时触发。

最后更新于: 3/29/2022, 5:02:36 PM