圆点图层
圆点(circle)图层通常用来显示点数据,详见示例。
圆点图层支持 vector 和 geojson 两种类型的数据源,所需的数据内容为点几何;
// 添加点数据源
let data = {
type: "geojson",
data: {
'type': 'FeatureCollection',
'features': [
{
type: 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [x, y]
}
}
]
}
};
map.addLayer({
id: 'layer1',
source: data,
type: 'circle',
paint: {
'circle-color': 'red',
'circle-opacity': 0.8,
'circle-radius': 20,
}
});
1、id
id 表示该图层的唯一标识,值为字符串;
2、type
type 表示该图层的类别,circle 图层 type 属性的值为"circle";
3、source
source 表示该图层所使用的数据源的唯一标识 ID,也可以是一个符号要求的数据源规格说明。
4、source-layer
source-layer 为 vector 类型数据源中所使用的图层数据的唯一标识;如果使用的数据源类型为 geojson,该参数不需要设置;
5、layout
circle 图层的 layout 中包含的属性只有 visibility,值为"visible"表示该图层显示,为"none"表示该图层不显示;默认值为"visible";
6、paint
circle 图层的 paint 中包含的属性有:
(1) “circle-radius”:表示圆的半径,值必须大于等于 0,默认为 5;支持函数对象语句;
(2) “circle-color”:表示圆的填充颜色,值可以是 rgb 值,也可以是十六进制颜色值,默认为"#000000";支持函数对象语句;
(3) “circle-blur”:表示圆的模糊度,值为数值,默认为 0;支持函数对象语句;
(4) “circle-opacity”:表示圆颜色的不透明度,值域为[0,1],默认值为 1;支持函数对象语句;
(5) “circle-translate”:表示圆的几何偏移,值为数组[x,y],x 若为正值,表示向右,负值表示向左,y 若为正值,表示向上,负值表示向下;
(6) “circle-translate-anchor”:表示圆的偏移锚点,需要’circle-translate’值存在,否则无效,值为"map"或"viewport",默认值为"map";
(7) “circle-stroke-width”:表示圆的边框宽度,值必须大于等于 0,默认为 0;支持函数对象语句;
(8) “circle-stroke-color”:表示圆的边框颜色,默认值为"#000000";支持函数对象语句;
(9) “circle-stroke-opacity”:表示圆的边框不透明度,值域为[0,1],默认为 1;支持函数对象语句;
7、minzoom
图层可展示的最小缩放等级值,选填项。
8、maxzoom
图层可展示的最大缩放等级值,选填项。
9、filter
所使用数据源的 features 数据的过滤条件,选填项。