setCartoCSS:function( |
cartoCss, |
|
fromServer |
) |
|
给矢量要素图层设置CartoCSS样式并解析出来,然后重绘图层
Parameters
cartoCss |
{String} cartoCSS样式表,通过CartoCSS样式表,我们可以定义点、 线、面还有文本的符号属性,并且我们还可以通过图层ID和class选择器选择特定的图层来进行符号定制,除外 本产品的CartoCSS还支持FeatureID和zoom的属性选择器,以选择特定id的要素或者对某一缩放级别下的图层属 性才进行符号配置。目前本产品的CartoCSS只支持了标准CartoCSS的一部分,同时也对标准的CartoCSS进行了 一些必要的扩展,这个CartoCSS样式表参照了标准的CartoCSS(来自MapBox的TileMill软件), 其链接为:https://www.mapbox.com/tilemill/docs/manual/carto/, |
其所实现的CartoCSS如下: CartoCSS的变量(在CartoCSS中,用户可以定义一个变量,然后在CartoCSS代码中使用):
@color:#000;
@width:2;
#Road_L__China400{
line-color:@color;
line-width:@width;
}
CartoCSS的选择器:
ID选择器(图层ID默认为将图层名中的”@”与”#”符号替换为”__”双划线,例如:图层名为:”China_Road_L@China400#1”会替换为:”China_Road_L__China400__1”)
#China_Road_L__China400{
}
类选择器
.China_Road_L__China400{
}
要素ID属性选择器
#China_Road_L__China400{
[featureID=1]{
line-width:3;
}
}
缩放级别控制(可以通过zoom来控制图层在不同缩放级别下的样式符号)
#China_Road_L__China400{
[zoom>4]{
line-width:2;
}
}
高亮显示(点击高亮以及鼠标移动高亮)
#China_Road_L__China400{
::click{
line-color:#f00;
}
::hover{
line-color:#0f0;
}
}
伪类(当要素对同一图层定义不同的样式时可用到,如下,就定义了一根边框为红色,中间为黑色的,宽3px的线)
#China_Road_L__China400::one{
line-color:#f00;
line-width:3;
}
#China_Road_L__China400::tow{
line-color:#000;
line-width:1;
}
CartoCSS实现的属性
其中的Color类型可为十六进行字符串:#000,也可为rgb:rgb(0,0,0)或者rgba:rgba(0,0,0,1)类型,和hsl类型:hsl(0.5,0.5,0.5)。 而point-comp-op的值可为以下几种:src-over、dst-over、src-in、dst-in、src-out、dst-atop、xor、plus、lighten。
点图层属性
point-file |
{URL} 点符号的文件url,格式为:url(“./examples/images/marker.png”)。 |
point-radius |
{Number} 矢量点的大小,单位为像素。 |
point-halo-radius |
{Number} 矢量点的外围边界宽度,单位为像素。 |
point-halo-color |
{Color} 矢量点的外围边界颜色,格式为:#000。 |
point-fill |
{Color} 矢量点符号的颜色值,只有当point-file为””时点才会被渲染成矢量点,格式为:#000。 |
point-dx |
{Number} 点在x轴上的偏移值,单位为px,正值为右移,负值为左移。 |
point-dy |
{Number} 点在y轴上的偏移值,单位为px,正值为下移,负值为上移。 |
point-opacity |
{Number} 点的透明度,值的范围为0~1。 |
point-comp-op |
{String} 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上,其中源图像是指您打算放置到地图上的绘图,而目标图像则指您已经放置在地图上的绘图。 |
线图层属性
line-color |
{Color} 线的颜色值,格式为:#000。 |
line-width |
{Number} 线宽度,单位为px。 |
line-cap |
{String} 线端点的样式,值可为:平头”butt”、圆头”round”、方头”square”。 |
line-join |
{String} 线的拐角处的样式,值可为:泄角”bevel”、圆角”round”、尖角”miter”。 |
line-miterlimit |
{Number} 线的最大斜接长度。 |
line-dash-offset |
{Number} 虚线模式的偏移值,即虚线从偏移值处才开始虚线的绘制,被偏移掉的一段为实线。 |
line-opacity |
{Number} 线的透明度,值为0~1。 |
line-dasharray |
{Array} 虚线的模式,格式为:10,10,其中第0个值为第一段实线的长度,第1个值为第一段空线的长度,后面的虚线按照这个模式重复。 |
line-offset |
{Number} 线的偏移,单位为px,正值为向左偏移,负值为向右偏移。 |
line-comp-op |
{String} 同point-comp-op。 |
面图层属性(面支持除了line-offset和line-comp-op之外的所有线属性)
polygon-fill |
{Color} 面填充的颜色,格式为:#000。 |
polygon-dx |
{Number} 面在x轴上的偏移值,正值为向右偏移,负值为向左偏移,单位为px。 |
polygon-dy |
{Number} 面在y轴上的偏移值,正值为向下偏移,负值为向上偏移,单位为px。 |
polygon-opacity |
{Number} 面的填充透明度,值为0~1. |
polygon-comp-op |
{String} 同point-comp-op。 |
文本图层属性
text-size |
{Number} 文本的尺寸,单位为px。 |
text-face-name |
{String} 文本的字体名称,如:Times New Roman。 |
text-align |
{String} 文本在水平方向的对齐方式,值可为:center、left、right。 |
text-vertical-alignment |
{String} 文本在垂直方向上的对齐方式,值可为:top、middle、baseLine、bottom。 |
text-halo-radius |
{Number} 文本外围边框的宽度。 |
text-halo-color |
{Color} 文本外围边框的颜色。 |
text-fill |
{Color} 文本的颜色。 |
text-opacity |
{Number} 文本的透明度,值为0~1。 |
text-dx |
{Number} 文本在x轴上的偏移值,正值为向右偏移,负值为向左偏移,单位为px。 |
text-dy |
{Number} 文本在y轴上的偏移值,正值为向下偏移,负值为向上偏移,单位为px。 |
text-comp-op |
{String} 同point-comp-op。 |