符号图层

符号(symbol)图层用来显示文字和图标,详见示例

符号图层支持 vector 和 geojson 两种类型的数据源,所需的数据内容为点几何;如下例所示:

let data = {
    type:"geojson",
    data:{
        'type': 'FeatureCollection',
        'features': [
            {
                type: 'Feature',
                'properties': {
                    name: name
                },
                'geometry': {
                    'type': 'Point',
                    'coordinates': [116, 40]
                }
            }
        ]
    }
};
map.addLayer({
    id: 'layer1',
    source: data,
    type: 'symbol',
    layout: {
        'icon-image': 'cat',
        'icon-size': 1,
        'icon-rotate': 45,
        'icon-allow-overlap': true,
    },
    paint: {
        'icon-opacity': 0.8
    }
});

1、id

id 表示该图层的唯一标识,值为字符串;

2、type

type 表示该图层的类别,symbol 图层 type 属性的值为"symbol";

3、source

source 表示该图层所使用的数据源的唯一标识 ID,也可以是一个符号要求的数据源规格说明。

4、source-layer

source-layer 为 vector 类型数据源中所使用的图层数据的唯一标识;如果使用的数据源类型为 geojson,该参数不需要设置;

5、layout

symbol 图层的 layout 中包含的属性有:

(1) “visibility”:表示图层是否显示;值为"visible"表示该图层显示,为"none"表示图层不显示;默认值为"visible";

(2) “icon-image”:表示图标的图像,值为 sprite 图中某个图标的名称,若该名称为变量引用,则用表达式语句表示, 如:“poicode{kindcode}_16”;

(3) “icon-size”:表示图标的大小,当"icon-image"有值时才有效,值必须大于等于 0,默认为 1;

(4) “icon-rotate”:表示图标旋转角度(顺时针方向),当"icon-image"有值时才有效,默认为 0;

(5) “icon-offset”:表示图标的几何偏移,值为数组[x,y],x 若为正值,表示向右,负值表示向左,y 若为正值,表示向上,负值表示向 下,当"icon-image"有值时才有效;默认值为[0,0];

(6) “icon-text-fit”:表示图标大小与关联文本的匹配方式,当"icon-image"和"text-field"都有值时才有效,值域为[“none”, “width”, “height”, “both”] ,分别表示图标大小不根据该参数调整、图标大小根据文本宽度在水平方向上调整、图标大小根据文本高度在垂直方向上调整,图标大小根据文本内容在水平方向和垂直方向上都进行调整,默认值为"none";

(7) “icon-text-fit-padding”:表示图标相对于关联文本的内部偏移,当"icon-image"和"text-field"都有值时、并且当 icon-text-fit 值为[“width”, “height”, “both”]时才有效,默认值为[0,0,0,0],为数值类型数组,依次为上、右、下、左;

(8) “icon-allow-overlap”:表示图标允许重叠,值为布尔类型,值为 true 表示允许重叠,该图标与以前已经绘制的图标压盖时该图标任然显示,false 表示不允许重叠,当"icon-image"有值时才有效,默认为 false;

(9) “icon-ignore-placement”:表示图标忽略压盖,值为布尔类型,值为 true 表示忽略压盖,其它图标即使与该图标压盖其它图标仍然显示,false 表示不忽略压盖,当"icon-image"有值时才有效,默认为 false;

(10) “icon-optional”:表示图标掩盖时文本是否显示,值为布尔类型,值为布尔值,值为 true 表示当图标相互压盖时,图标不显示而文本正常显示,当"icon-image"有值时才有效,默认为 false;

(11) “symbol-avoid-edges”:表示图标是否跨瓦片忽略压盖,值为布尔类型,值为布尔值,值为 true 表示图标垮瓦片忽略压盖,当"icon-image"有值时才有效,默认为 false;

(12) “icon-keep-upright”:表示图标是否保持直立,值为布尔类型,值为 true 表示保持直立,false 表示不保持直立,当"icon-image"有值、“icon-rotation-alignment"值为" map”、"symbol-placement"值为"line"时才有效,默认为 false;

(13) “symbol-placement”:表示图标或文本相对于几何的位置,值域为[“point”, “line”],默认为"point";

(14) “icon-rotation-alignment”:表示图标旋转锚点,值域为[“map”,“viewport”,“auto”],当"icon-image"有值时才有效,默认值为"auto";

(15) “symbol-spacing”:表示图标间隔,值为数值,单位为像素,当"icon-image"有值并且"symbol-placement"为"line"时才有效,值必须大于等于 1,默认值为 250;

(16) “icon-padding”:表示图标内边距,值为数值,单位为像素,当"icon-image"有值时才有效,值必须大于等于 0,默认值为 2;

(17) “text-field”:表示文本值域,默认为"";

(18) “text-font”:表示文字字体,值为字符串数组,当"text-field"有值时才有效,默认为[“Open Sans Regular”,“Arial Unicode MS Regular”];

(19) “text-size”:表示文字大小,值为数值,当"text-field"有值时才有效,值必须大于等于 0,默认值为 16;

(20) “text-letter-spacing”:表示文字间距,值为数值,单位为"ems",当"text-field"有值时才有效,默认值为 0;

(21) “text-line-height”:表示文本行高,值为数值,单位为"ems",当"text-field"有值时才有效,默认值为 1.2;

(22) “text-max-width”:表示文本最大宽度,值为数值,单位为"ems",当"text-field"有值时才有效,默认值为 10;

(23) “text-justify”:表示文本对齐方式,值为字符串,值域为[“left”, “center”, “right”],当"text-field"有值时才有效,默认值为"center";

(24) “text-rotate”:表示文字顺时针方向的旋转角度,值为数值类型,当"text-field"有值时才有效,默认值为 0;

(25) “text-max-angle”:表示文字最大旋转角度,值为数值类型,当"text-field"有值并且"symbol-placement"值为"line"时才有效,默认值为 45;

(26) “text-padding”:表示文本内边距,值为数值类型,单位为像素,当"text-field"有值时才有效,值必须大于等于 0,默认值为 2;

(27) “text-anchor”:表示文本锚点,值为字符类型,值域为[“center”, “left”, “right”, “top”, “bottom”, “top-left”, “top-right”, “bottom-left”, “bottom-right”] ,当"text-field"有值时才有效,默认值为"center";

(28) “text-offset”:表示文本偏移,值为数值类型数组,单位为"ems",当"text-field"有值时才有效,数值大于 0 时表示右和下方向偏移, 数值小于 0 时表示左和上方向偏移,默认值为[0,0];

(29) “text-transform”:表示文本大小写转化,值为字符串,值域为[“none”, “uppercase”, “lowercase”],当"text-field"有值时才有效,默认值为"none";

(30) “text-pitch-alignment”:表示文本倾斜锚点,值为字符串,值域为[“map”, “viewport”, “auto”],当"text-field"有值时才有效,默认值为"auto";

(31) “text-rotation-alignment”:表示文本旋转锚点,值为字符串,值域为[“map”, “viewport”, “auto”],当"text-field"有值时才有效,默认值为"auto";

(32) “text-allow-overlap”:表示文本允许重叠,值为布尔类型,当为 true 时表示该文本与以前已经绘制的图标或者文本压盖时该文本任然显示,当"text-field"有值时才有效,默认值为 false;

(33) “text-ignore-placement”:表示文本忽略压盖,值为布尔类型,值为 true 表示忽略压盖,其它图标或文本即使与该文本压盖其它图标或文本仍然显示,当"text-field"有值时才有效,默认值为 false;

(34) “text-optional”:表示文本掩盖时图标是否显示,值为布尔类型,值为布尔值,值为 true 表示当文本相互压盖时,文本不显示而图标正常显示,当"text-field"有值时才有效,默认值为 false;

(35) “text-keep-upright”:表示文本是否保持直立,值为布尔类型,值为布尔值,值为 true 表示文本保持直立,当"text-field"有值、“text-rotation-alignment"值为"map”、" symbol-placement"值为"line"时才有效,默认值为 false;

6、paint

symbol 图层的 paint 中包含的属性有:

(1) “icon-color”:表示图标的颜色,值可以是 rgb 值,也可以是十六进制颜色值,当"icon-image"有值时才有效,默认为"#000000";支持函数对象语句;

(2) “icon-opacity”:表示图标的不透明度,值域为[0,1],当"icon-image"有值时才有效,默认值为 1;支持函数对象语句;

(3) “icon-halo-color”:表示图标的边框颜色,值可以是 rgb 值,也可以是十六进制颜色值,当"icon-image"有值时才有效,默认值为"rgba(0, 0, 0, 0)";支持函数对象语句;

(4) “icon-halo-width”:表示图标的边框宽度,值为数值类型,当"icon-image"有值时才有效,值必须大于等于 0,默认值为 0;支持函数对象语句;

(5) “icon-halo-blur”:表示图标的边框模糊度,值为数值类型,当"icon-image"有值时才有效,值必须大于等于 0,默认值为 0;支持函数对象语句;

(6) “icon-translate”:表示图标偏移,值为数值类型,单位为像素,当"icon-image"有值时才有效,数值大于 0 时表示右和下方向偏移, 数值小于 0 时表示左和上方向偏移,默认值为[0,0];

(7) “icon-translate-anchor”:表示图标偏移锚点,值为字符类型,值域为[“map”, “viewport”],当"icon-image"有值并且"icon-translate"有值时才有效,默认值为"map";

(8) “text-color”:表示文本的颜色,值可以是 rgb 值,也可以是十六进制颜色值,当"text-field"有值时才有效,默认为"#000000";支持函数对象语句;

(9) “text-opacity”:表示文本的不透明度,值域为[0,1],当"text-field"有值时才有效,默认值为 1;支持函数对象语句;

(10) “text-halo-color”:表示文本的边框颜色,值可以是 rgb 值,也可以是十六进制颜色值,当"text-field"有值时才有效,默认值为"rgba(0, 0, 0, 0)";支持函数对象语句;

(11) “text-halo-width”:表示文本的边框宽度,值为数值类型,当"text-field"有值时才有效,值必须大于等于 0,默认值为 0;支持函数对象语句;

(12) “text-halo-blur”:表示文本的边框模糊度,值为数值类型,当"text-field"有值时才有效,值必须大于等于 0,默认值为 0;支持函数对象语句;

(13) “text-translate”:表示文本偏移,值为数值类型,单位为像素,当"text-field"有值时才有效,数值大于 0 时表示右和下方向偏移, 数值小于 0 时表示左和上方向偏移,默认值为[0,0];

(14) “text-translate-anchor”:表示文本偏移锚点,值为字符类型,值域为[“map”, “viewport”],当"text-field"有值并且" text-translate"有值时才有效,默认值为"map";

7、minzoom

图层可展示的最小缩放等级值,选填项。

8、maxzoom

图层可展示的最大缩放等级值,选填项。

9、filter

所使用数据源的 features 数据的过滤条件,选填项。

results matching ""

    No results matching ""