# 图层样式
# Background
# 参数
# layout参数
名称 | 类型 | 说明 |
---|---|---|
visibility | String字符串 | visible, 是否可见 visible / none |
# paint参数
名称 | 类型 | 说明 |
---|---|---|
background-color | String字符串 | 颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
background-opacity | Number数字型 | 0~1.0, 透明度,越低越透明 |
background-pattern | String字符串 | picture_name, 区的拉伸图片类型,一定要与对应的样式库的图片名字一一对应 |
# symbol
Symbol样式由两部分组成,分别是图标
与文字
,这两者是各自独立互不影响的
核心思想是,通过
geojson图层
来实现特定的样式配置,然后再通过geojson图层动态添加数据
的方式实现动态添加图片注记。
map.on('click', function(mapMouseEvent) {
//鼠标单击点坐标
var latlon = mapMouseEvent.lngLat;
//添加一个新的标注(矢量要素)
var symbol = { //一定要是最标准的geojson格式
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": latlon.toArray()
},
"properties": {
"name": "新增点",
}
};
GeoPoints.features.push(symbol);
map.getSource('symbolLayer').setData(GeoPoints);//名字symbolLayer与上面的source一致
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//添加数据源,这里是geojson
map.addSource('symbolLayer', {
"type": "geojson",
"data": GeoPoints
});
// 增加图层
map.addLayer({
"id": "zondy",
"type": "symbol",
"source": "symbolLayer", //必须和上面的symbolLayer一致
"filter": ["==", "name", "东正门", "南副门", "北副门"], //关键点:name对应geojson中的属性字段
"layout": {
"symbol-placement": "point", //"point"表示基于单个点的注记, "line"表示平铺在线上的注记,"line-center"表示平铺在线的中心点的注记
"symbol-spacing": 200, //单位像素,便是每个注记的占用空间,只有symbol-placement=line才生效
"symbol-avoid-edges": false, //避免在边界情况的,注记碰撞压盖,一般不设置
"icon-allow-overlap": false, //true表示在图层有压盖关系时,仅仅是当前图标保持可见
"icon-ignore-placement": false, //如果设置成true,即使其他要素有碰撞的情况下,依然可以显示
"icon-optional": true, // true表示和其他注记冲突的时候,如果文字没被压盖,显示文字,隐藏图标
"icon-rotation-alignment": "viewport", //map表示随地图旋转角度旋转,viewport表示随当前视角/数据形态(线的方向)一致
"icon-size": 1.4, //表示图片的缩放比例
"icon-text-fit": "none", //"none", "width", "height", "both"让图片适应文字的宽高
"icon-text-fit-padding": [0, 0, 0, 0], // 在适应文字大小的基础上添加对应的内部padding距离
"icon-image": "college-15", //与line-pattern,fill-pattern一样是对应样式库中的图片的名字
"icon-rotate": 0, //图片旋转角度
"icon-padding": 2, //图片正常的内部padding间距
"icon-keep-upright": false, //true表示在地图旋转方向变化是保持图片的上下翻转,就是防止拼接的时候上下颠倒
"icon-offset": [0, 0], //[x,y]图片的偏移,图标与其锚点的偏移距离。正值表示向右和向下,而负值表示向左和向上。每个分量乘以 的值icon-size以获得最终的偏移量(以像素为单位)。与icon-rotate偏移结合时,就像旋转方向向上一样。
"icon-anchor": "center", //"center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"图片的对齐方向
"icon-pitch-alignment": "auto", //"map", "viewport"对齐方向,这个用于道路的注记,表示是延道路方向显示还是生硬的添加注记
"text-pitch-alignment": "auto", //"map", "viewport"对齐方向,这个用于道路的注记,表示是延道路方向显示还是生硬的添加注记
"text-rotation-alignment": "auto", //map表示随地图旋转角度旋转,viewport表示随当前视角/数据形态(线的方向)一致
"text-field": "{name}", //固定语法,请不要忘记{}号
"text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
"text-size": 20, //字体大小,默认16
"text-max-width": 10, //字体最大宽度,默认10 ems
"text-line-height": 1.2, //字体高度,默认 1.2 ems
"text-letter-spacing": 0,
"text-justify": "center", //文字对齐方式,"left", "center", "right"
"text-anchor": "center", //文字对齐方向,"center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"
"text-max-angle": 45, //针对拐角处,相邻字符的最大角度差
"text-rotate": 0, //文字旋转方向,单位degrees
"text-padding": 0, //文字的padding内间距,单位像素
"text-keep-upright": false, //true表示在地图旋转方向变化是保持文字的上下翻转,就是防止文字拼接的时候上下颠倒
"text-transform": "none", //"none", "uppercase", "lowercase",显示文字的时候是全大写、全小写,保持不变
"text-offset": [4.5,0], ////[x,y]文字的偏移
"text-allow-overlap": false, // true表示和其他注记有压盖关系时,当前文字保持可见
"text-ignore-placement": false, //如果设置成true,即使其他要素有碰撞的情况下,依然可以显示
"text-optional": true, // true表示和其他注记冲突的时候,如果图标没被压盖,显示图标,隐藏文字
"visibility": "visible", //visible/none
},
"paint": {
"icon-opacity": 1.0, //图标透明度
"icon-color": "#202", //图标颜色
"icon-halo-color": "#888", //图标光晕颜色
"icon-halo-width": 2, //图标光晕宽度
"icon-halo-blur": 1, //图标光晕模糊度
"icon-translate": [0, 0], //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移
"text-opacity": 1.0, // 文字透明度
"text-color": "#fff", //文字颜色
"text-halo-color": "#000", //文字光晕颜色
"text-halo-width": 2, //文字光晕宽度
"text-halo-blur": 1, //文字光晕模糊度
"text-translate": [0, 0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移
}
});
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
上面的代码核心部分是4个部分
- source
数据源的名称
必须和之前的map.addSource('sourceName')一致,特别重要
- filter
过滤条件
按照各自的业务实现对应的数据过滤,注意属性字段的一一匹配- layout
视图
一般是控制是否可见、注记的避让压盖关系等,类型type=symbol时
需要特别重视- paint
画笔样式
这才是真正决定颜色、宽度、透明度等样式的地方,不同的类型对应的属性也各自不同,需要注意这点
# 参数
# layout参数
名称 | 类型 | 说明 |
---|---|---|
Symbol参数 | ||
symbol-placement | String字符串 | "point"表示基于单个点的注记, "line"表示平铺在线上的注记 |
symbol-spacing | Number数字型 | 200, 单位像素,便是每个注记的占用空间,只有symbol-placement=line才生效 |
symbol-avoid-edges | Bool布尔型 | false, 避免在边界情况的,注记碰撞压盖,一般不设置 |
Icon参数 | ||
icon-allow-overlap | Bool布尔型 | false, true表示在图层有压盖关系时,仅仅是当前图标保持可见 |
icon-ignore-placement | Bool布尔型 | false, 如果设置成true,即使其他要素有碰撞的情况下,依然可以显示 |
icon-optional | Bool布尔型 | true, true表示和其他注记冲突的时候,如果文字没被压盖,显示文字,隐藏图标 |
icon-rotation-alignment | String字符串 | "viewport", map表示随地图旋转角度旋转,viewport表示随当前视角/数据形态(线的方向)一致 |
icon-size | Number数字型 | 1.4, 表示图片的缩放比例 |
icon-text-fit | String字符串 | "none", "none", "width", "height", "both"让图片适应文字的宽高 |
icon-text-fit-padding | Number数组型 | [0, 0, 0, 0], 在适应文字大小的基础上添加对应的内部padding距离 |
icon-image | String字符串 | "college-15", 与line-pattern,fill-pattern一样是对应样式库中的图片的名字 |
icon-rotate | Number数字型 | 0, 图片旋转角度 |
icon-padding | Number数字型 | 2, 图片正常的内部padding间距 |
icon-keep-upright | Bool布尔型 | false, true表示在地图旋转方向变化是保持图片的上下翻转,就是防止拼接的时候上下颠倒 |
icon-offset | Number数组型 | [0, 0], [x,y]图片的偏移 |
icon-anchor | String字符串 | "center", "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"图片的对齐方向 |
icon-pitch-alignment | String字符串 | "auto", "map", "viewport"对齐方向,这个用于道路的注记,表示是延道路方向显示还是生硬的添加注记 |
Text参数 | ||
text-pitch-alignment | String字符串 | "auto", "map", "viewport"对齐方向,这个用于道路的注记,表示是延道路方向显示还是生硬的添加注记 |
text-rotation-alignment | String字符串 | "auto", map表示随地图旋转角度旋转,viewport表示随当前视角/数据形态(线的方向)一致 |
text-field | String字符串 | "{name}", |
text-font | String字符串数组 | ["Open Sans Regular", "Arial Unicode MS Regular"], |
text-size | Number数字型 | 20, 字体大小,默认16 |
text-max-width | Number数字型 | 10, 字体最大宽度,默认10 ems |
text-line-height | Number数字型 | 1.2, 字体高度,默认 1.2 ems |
text-letter-spacing | Number数字型 | 0,文字字母间距,基本没用 |
text-justify | String字符串 | "center", 文字对齐方式,"left", "center", "right" |
text-anchor | String字符串 | "center", 文字对齐方向,"center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right" |
text-max-angle | Number数字型 | 45, 针对拐角处,相邻字符的最大角度差 |
text-rotate | Number数字型 | 0, 文字旋转方向,单位degrees |
text-padding | Number数字型 | 0, 文字的padding内间距,单位像素 |
text-keep-upright | Bool布尔型 | false, true表示在地图旋转方向变化是保持文字的上下翻转,就是防止文字拼接的时候上下颠倒 |
text-transform | String字符串 | "none", "none", "uppercase", "lowercase",显示文字的时候是全大写、全小写,保持不变 |
text-offset | Number数组型 | [4.5,0], [x,y]文字的偏移 |
text-allow-overlap | Bool布尔型 | true表示和其他注记有压盖关系时,当前文字保持可见 |
text-ignore-placement | Bool布尔型 | false,如果设置成true,即使其他要素有碰撞的情况下,依然可以显示 |
text-optional | Bool布尔型 | true, true表示和其他注记冲突的时候,如果图标没被压盖,显示图标,隐藏文字 |
visibility | String字符串 | "visible", visible/none |
# paint参数
名称 | 类型 | 说明 |
---|---|---|
Icon参数 | ||
icon-opacity | Number数字型 | 1.0,图标透明度 |
icon-color | String字符串 | 图标颜色,颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
icon-halo-color | String字符串 | 图标光晕颜色,颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
icon-halo-width | Number数字型 | 2, 图标光晕宽度 |
icon-halo-blur | Number数字型 | 1, 图标光晕模糊度 |
icon-translate | Number数组型 | [x,y]表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上 |
Text参数 | ||
text-opacity | Number数字型 | 1.0, 文字透明度 |
text-color | String字符串 | 文字颜色,颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
text-halo-color | String字符串 | 文字光晕颜色,颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
text-halo-width | Number数字型 | 2,文字光晕宽度 |
text-halo-blur | Number数字型 | 1, 文字光晕模糊度,这里的数值要小于 上面text-halo-width 的宽度 |
text-translate | Number数组型 | [x,y]表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上 |
# Line
//添加数据源,这里是geojson
map.addSource('lineLayer', {
"type": "geojson",
"data": geojsonData
});
//针对数据源设置图层样式
map.addLayer({
"id": "roadid", //id不同重复,否则只绘制一次
"type": "line",
"source": "lineLayer", //必须和上面的lineLayer一致
"filter": ["==", "name", "光谷大道"], //关键点:name对应geojson中的属性字段
"layout": {
"line-cap": "square", //butt 尖头,round 圆头,square平头
"line-join": "miter", //bevel平拐,round 圆拐,miter棱拐
"line-miter-limit": 2, //棱拐的限制,一般用不上
"line-round-limit": 1.05, //圆拐的限制,一般用不上
"visibility": "visible", //是否可见 visible / none
},
"paint": {
"line-width": 10, //宽度
"line-color": "#9c27b0", //颜色
"line-opacity": 0.8, //透明度 `0 ~ 1.0`
"line-gap-width": 0, //线的沟宽,如果有一条线会变成2条线,中间有条沟
"line-offset": 0, //尽量少用,如果这个值相对大的话在拐角处很容易变形变胖
"line-dasharray": [1,1],//实线、虚线的组合,可以表示铁路线等
"line-blur": 2, //模糊度,和宽度配合使用,当宽度20,模糊度10时,出现边线模糊的效果,该值要小于线宽度
"line-pattern": "picture_name", //线的拉伸图片类型,一定要与对应的样式库的图片名字一一对应
"line-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
});
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
27
28
29
30
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
27
28
29
30
上面的代码核心部分是4个部分
- source
数据源的名称
必须和之前的map.addSource('sourceName')一致,特别重要
- filter
过滤条件
按照各自的业务实现对应的数据过滤,注意属性字段的一一匹配- layout
视图
一般是控制是否可见、注记的避让压盖关系等,类型type=symbol时
需要特别重视- paint
画笔样式
这才是真正决定颜色、宽度、透明度等样式的地方,不同的类型对应的属性也各自不同,需要注意这点
# 参数
# layout参数
名称 | 类型 | 说明 |
---|---|---|
line-cap | String字符串 | 默认square, butt 尖头,round 圆头,square 平头 |
line-join | String字符串 | 默认miter, bevel 平拐,round 圆拐,miter 棱拐 |
line-miter-limit | Number数字型 | 2, 棱拐的限制,一般用不上 |
line-round-limit | Number数字型 | 1.05, 圆拐的限制,一般用不上 |
visibility | String字符串 | visible, 是否可见 visible / none |
# paint参数
名称 | 类型 | 说明 |
---|---|---|
line-width | Number数字型 | 10, 宽度 |
line-color | String字符串 | 颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
line-opacity | Number数字型 | 0.8, 透明度0 ~ 1.0 |
line-gap-width | Number数字型 | 0, 线的沟宽,如果有一条线会变成2条线,中间有条沟 |
line-offset | Number数字型 | 0,尽量少用 ,如果这个值相对大的话在拐角处很容易变形变胖 |
line-dasharray | Number数组型 | [1,1],实线、虚线的组合,可以表示铁路线等 |
line-blur | Number数字型 | 2, 模糊度,和宽度配合使用,当宽度20,模糊度10时,出现边线模糊的效果,该值要小于线宽度 |
line-pattern | String字符串 | picture_name, 线的拉伸图片类型,一定 要与对应的样式库Sprite 的图片名字一一对应 |
line-translate | Number数组型 | [0,0] [x,y] 表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上 |
# Circle
//添加数据源,这里是geojson
map.addSource('circleLayer', {
"type": "geojson",
"data": geojsonData
});
//针对数据源设置图层样式
map.addLayer({
"id": "circle_cug", //id不同重复,否则只绘制一次
"type": "circle",// 固定语法 circle/line/fill/fill-extrusion/symbol/background
"source": "circleLayer", //必须和上面的map.addSource('circleLayer')的circleLayer一致
"filter": ["==", "name", "中国地质大学(武汉)"], //过滤属性,关键点:name对应geojson中的属性字段
"layout": {
"visibility": "visible",//visible/none 表示是否可见
},
"paint": {
"circle-radius": 15, //半径
"circle-color": "#202", //颜色
"circle-opacity": 0.8, //透明度
"circle-stroke-width": 5, //轮廓线宽度
"circle-stroke-color": "#0000FF", //轮廓线颜色
"circle-stroke-opacity": 0.7, //轮廓线透明度
"circle-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
上面的代码核心部分是4个部分
- source
数据源的名称
必须和之前的map.addSource('sourceName')一致,特别重要
- filter
过滤条件
按照各自的业务实现对应的数据过滤,注意属性字段的一一匹配- layout
视图
一般是控制是否可见、注记的避让压盖关系等,类型type=symbol时
需要特别重视- paint
画笔样式
这才是真正决定颜色、宽度、透明度等样式的地方,不同的类型对应的属性也各自不同,需要注意这点
# 参数
# layout参数
名称 | 类型 | 说明 |
---|---|---|
visibility | String字符串 | visible, 是否可见 visible / none |
# paint参数
名称 | 类型 | 说明 |
---|---|---|
circle-radius | Number数字型 | 15, 半径 |
circle-color | String字符串 | 颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
circle-opacity | Number数字型 | 0~1.0, 透明度,越低越透明 |
circle-stroke-width | Number数字型 | 5, 轮廓线宽度 |
circle-stroke-color | String字符串 | : #0000FF, 轮廓线颜色,颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
circle-stroke-opacity | Number数字型 | 0.7, 轮廓线透明度 |
circle-translate | Number数组型 | [0,0] 表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上 |
# Fill
//添加数据源,这里是geojson
map.addSource('fillLayer', {
"type": "geojson",
"data": geojsonData
});
//针对数据源设置图层样式
map.addLayer({
"id": "huiyishi", //id不同重复,否则只绘制一次
"type": "fill",
"source": "fillLayer", //必须和上面的geojsonPolygon一致
"filter": ["==", "name", "会议室"], //关键点:name对应geojson中的属性字段
"layout": {
"visibility": "visible",//visible/none 表示是否可见
},
"paint": {
"fill-antialias": true, //抗锯齿,true表示针对边界缝隙进行填充
"fill-color": "#00695c", //颜色
"fill-opacity": 0.9, //透明度 `0 ~ 1.0`
"fill-outline-color": "#FFFF00", //边线颜色,没错,确实没有边线宽度这个选项
"fill-pattern":"picture_name", //线的拉伸图片类型,一定要与对应的样式库的图片名字一一对应
"fill-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
});
map.addLayer({
"id": "bounding",
"type": "line", //相信你的眼睛,这里的的确确是line,区可以复用线的样式
"source": "fillLayer", //必须和上面的geojsonPolygon一致
"filter": ["==", "name", "边界区"], //关键点:name对应geojson中的属性字段
"paint": {
"line-width": 4, //宽度
"line-color": "#e51c23", //颜色
"line-opacity": 1.0, //透明度
"line-gap-width": 2, //线的沟宽,如果有一条线会变成2条线,中间有条沟
}
});
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
27
28
29
30
31
32
33
34
35
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
27
28
29
30
31
32
33
34
35
上面的代码核心部分是4个部分
- source
数据源的名称
必须和之前的map.addSource('sourceName')一致,特别重要
- filter
过滤条件
按照各自的业务实现对应的数据过滤,注意属性字段的一一匹配- layout
视图
一般是控制是否可见、注记的避让压盖关系等,类型type=symbol时
需要特别重视- paint
画笔样式
这才是真正决定颜色、宽度、透明度等样式的地方,不同的类型对应的属性也各自不同,需要注意这点
# 参数
# layout参数
名称 | 类型 | 说明 |
---|---|---|
visibility | String字符串 | visible, 是否可见 visible / none |
# paint参数
名称 | 类型 | 说明 |
---|---|---|
fill-antialias | Bool布尔型 | true, 抗锯齿,true表示针对边界缝隙进行填充 |
fill-color | String字符串 | 颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
fill-opacity | Number数字型 | 0.9, 透明度 |
fill-outline-color | String字符串 | #FFFF00, 边线颜色,没错,确实没有边线宽度 这个选项 |
fill-pattern | String字符串 | picture_name, 区的拉伸图片类型,一定要与对应的样式库的图片名字一一对应 |
fill-translate | Number数组型 | [0,0] [x,y] 表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上 |
# fillextrusion
//添加数据源,这里是geojson
map.addSource('fillExtrusionLayer', {
"type": "geojson",
"data": geojsonData
});
//针对数据源设置图层样式
map.addLayer({
"id": "main", //id不同重复,否则只绘制一次
"type": "fill-extrusion",
"source": "fillExtrusionLayer", //必须和上面的fillExtrusionLayer一致
"filter": ["==", "name", "主楼"], //关键点:name对应geojson中的属性字段
"paint": {
"fill-extrusion-height": ['get', 'height'], //固定语法,获取属性值height的数值
"fill-extrusion-base": 10,//基础高度,表示相对水平面的高度
"fill-extrusion-color": "#00695c", //颜色
"fill-extrusion-opacity": 0.9, //透明度 `0 ~ 1.0`
"fill-extrusion-pattern":"si-main-3", //线的拉伸图片类型,一定要与对应的样式库的图片名字一一对应
"fill-extrusion-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上面的代码核心部分是4个部分
- source
数据源的名称
必须和之前的map.addSource('sourceName')一致,特别重要
- filter
过滤条件
按照各自的业务实现对应的数据过滤,注意属性字段的一一匹配- layout
视图
一般是控制是否可见、注记的避让压盖关系等,类型type=symbol时
需要特别重视- paint
画笔样式
这才是真正决定颜色、宽度、透明度等样式的地方,不同的类型对应的属性也各自不同,需要注意这点
# 参数
# layout参数
名称 | 类型 | 说明 |
---|---|---|
visibility | String字符串 | visible, 是否可见 visible / none |
# paint参数
名称 | 类型 | 说明 |
---|---|---|
fill-extrusion-height | Number数字型 | ['get', 'height'] , 固定语法,获取属性值height的数值,或者是直接传递固定数值 |
fill-extrusion-base | Number数字型 | 10,基础高度,表示相对水平面 的高度 |
fill-extrusion-color | String字符串 | #00695c颜色举例:#ff0 ,#ffff00 ,rgb(255, 255, 0) ,rgba(255, 255, 0, 1) ,hsl(100, 50%, 50%) ,hsla(100, 50%, 50%, 1) ,yellow |
fill-extrusion-opacity | Number数字型 | 0.9, 透明度 |
fill-extrusion-pattern | String字符串 | si-main-3 , 区表面的拉伸图片类型,一定要与对应的样式库的图片名字一一对应 |
fill-extrusion-translate | Number数组型 | [0,0] [x,y] 表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上 |