唯杰地图-VJMAP

# 图层样式

# 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
//添加数据源，这里是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

上面的代码核心部分是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

上面的代码核心部分是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

上面的代码核心部分是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

上面的代码核心部分是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

上面的代码核心部分是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]表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上

← 样式规范 →