SuperMap iClient for JavaScript矢量分块图层-地图快速渲染的利器

作者：doremi

一、简介

TiledVectorLayer，矢量分块图层属于客户端矢量地图，所有的渲染都是由客户端完成。服务器将矢量数据以及地图的渲染风格属性信息发送给浏览器或者是其他的客户端设备，这样客户端就能将地图渲染出来。客户端根据瓦片的位置以及比例尺向服务器请求矢量切片。每个矢量切片都包含多个数据集，一个数据集相当于一个图层，每个数据集都包含了多个要素，包括点、线、面和文本要素。 此外，服务器上还包含有每个图层的渲染风格信息，比如线宽，面的颜色等等信息。客户端根据这些信息就可以将矢量切片数据渲染成地图。
矢量分块除了提供根据服务端的渲染风格信息对地图进行渲染之外，还提供了用户自定义的渲染风格信息的渲染接口。这种渲染风格信息就是一种类CSS的地图风格样式表—— CartoCSS。其中，矢量分块只实现了CartoCSS标准中的一部分，除外， 还对标准的CartoCSS进行了相应的扩展。利用CartoCSS，用户可以方便地定义地图的渲染方式，从而定制属于自己的个性地图。

二 、基本用法

CartoCSS变量
在CartoCSS中，用户可以定义一个变量，然后在CartoCSS代码中使用，例如

@color1:#C00;@color2:#0AF;@width1:2;@width2:10;#China_Road_L__China400__1{    line-color: @color1;    line-width: @width1;}#China_Road_L__China400__1::glow{    line-color: @color2;    line-opacity: 0.5;    line-width: @width2;}

CartoCSS的选择器
在CartoCSS中，地图样式通过一系列描述样式的规则来表达。这些样式规则被模块化的组织成样式块，作用于地图上的各种要素对象。每个样式块都由一对大括号{}包围，其中包含了若干条用于描述样式的属性和值。样式选择器的作用就是指明某个样式块是作用于哪个图层，或者进一步限定这些样式在特定图层中的作用范围是哪些要素对象。因此从本质上说，样式选择器其实就是描述了样式块的作用域。

ID选择器
图层ID就是图层名称，而图层名中的”@”和”#”符号需要替换成”__”双下划线。例如图层名为：” China_Province_ln@China#2”替换为”China_Province_In__China__2

# China_Province_In__China__2{}

类选择器
当需要对多个图层定义样式时，除了可以采用之前提到的ID选择器将所有图层列出来的方法以外，还可以使用图层类别来实现，也就是在这些图层标识的后面都加上一个类别名后缀，可以为它们增加一个同一个类别得到layer_1.roads和layer_2.roads两个新的标识，然后通过对.roads进行样式定义来实现与之前同样的效果。

.roads {  // 这里定义的样式会被应用到所有  // 类别后缀为'roads'的图层上}

要素ID属性选择器
目前只支持featureID要素属性

#China_Road_L__China400{    [featureID=1]{        line-width:3;    }}

缩放级别过滤器
将样式的作用范围限制在特定的地图缩放级别上

#China_Road_L__China400{    [zoom=1]{        line-width:2;    }}

高亮显示
点击或者是移动鼠标样式

#China_Road_L__China400{    ::click{        line-color:#f00;    }    ::hover{        line-color:#0f0;    }}

伪类
可以对同一图层设置不同的样式，如下代码：设置了红色细线和蓝色粗线配合透明度做出光晕效果

#China_Road_L__China400__1{    line-color: #C00;    line-width: 2;}#China_Road_L__China400__1::glow{    line-color: #0AF;;    line-opacity: 0.5;    line-width: 10;}

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-fill {Color} 矢量点符号的颜色值，只有当point-file为空时点才会被渲染成矢量点，格式为：#000。 point-dx {Number} 点在x轴上的偏移值，单位为px，正值为右移，负值为左移。 point-dy {Number} 点在y轴上的偏移值，单位为px，正值为下移，负值为上移。 point-comp-op {String} 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上，其中源图像是指您打算放置到地图上的绘图，而目标图像则指您已经放置在地图上的绘图。

线图层属性：

属性名 line-color {Color} 线的颜色值，格式为：#000。 line-width {Number} 线宽度，单位为px。 line-cap {Number} {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。

面图层属性：

属性名 polygon-fill {Color} 面填充的颜色，格式为：#000。 polygon-dx {Number} 面在x轴上的偏移值，单位为px，正值为向右偏移，负值为向左偏移。 polygon-dy {Number} 面在y轴上的偏移值，单位为px，正值为向下偏移，负值为向上偏移。 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-fill {Color} 文本的颜色。 text-opacity {Number} 文本的透明度，值为0~1。 text-dx {Number} 文本在x轴上的偏移值，单位为px，正值为向右偏移，负值为向左偏移 text-dy {Number} 文本在y轴上的偏移值，单位为px，正值为向下偏移，负值为向上偏移。 text-comp-op {String} 同point-comp-op。

三、CartoCSS在TiledVectorLayer中的使用

使用矢量分块进行客户端地图的配图非常容易上手，只需要创建一个矢量分块图层，然后编辑地图样式表就可以配出一幅好地图了，但是要配好一幅地图对用户对地图样式表——CartoCSS 的掌握程度要求比较高，因此，想在客户端配出一幅好地图，必须掌握好CartoCSS。以下为矢量分块客户端配图的详细步骤：

1. 创建TiledVectorLayer图层
使用矢量分块功能，必须先创建一个TiledVectorLayer图层并添加到地图中，例如：

layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true}});    layer.events.on({"layerInitialized": addLayer});    function addLayer() {         map.addLayers([layer]);        var center = new SuperMap.LonLat(0,0);        map.setCenter(center, 0);    }

2. 编辑CartoCSS样式表

var cartoCss=["#World_Continent__China400{",        "polygon-fill:rgb(245,243,240);",        "line-width:1;",        "line-color:#ddd;",        "::hover[featureID=73]{",        "polygon-fill:#f00;",        "}",    "}"].join("\n");

3. 应用CartoCSS

layer.setCartoCSS(cartoCss);

4. 其他用法
其中的CartoCSS样式文件也可以在创建TiledVectorLayer图层时传递进去，例如：

layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true},{cartoCss:cartoCss});

也可以将cartoCSS样式保存在一个script标签里（把标签的type属性设置为”text”），然后获取下来，并设置到TiledVectorLayer上，例如：

<script type="text" id="cartoCssStr">            @color1:#C00;            @color2:#0AF;            @continentColor:#b7ae89;            @width1:2;            @width2:10;            #China_Road_L__China400__1{                line-color: @color1;                line-width: @width1;            }            #China_Road_L__China400__1::glow{                line-color: @color2;                line-opacity: 0.5;                line-width: @width2;            }            #China_Railway_L__China400 {                ::line {                    line-width: 5;                    line-color: #777;                }                ::dash {                    line-color: #fff;                    line-width: 2.5;                    line-dasharray: 6, 6;                }            }            #World_Continent__China400{                polygon-fill:@continentColor;                line-width:1;                line-color:@continentColor;            }            #China_Province_R__China400{                polygon-fill:@continentColor;                line-color:rgba(0,0,0,0);            }            #China_Vegetation_R__China400{                polygon-fill: #579f33;                polygon-opacity: 0.5;            }                    #Chengqu_Text__China400{                text-size:20;                text-face-name:"Times New Roman";                text-fill:"#036";            }    </script>    <script>        var cartoCss=document.getElementById("cartoCssStr").text;        layer.setCartoCSS(cartoCss);    </script>

效果如下：

以上的例子只是个简单的展示，在咱们的产品包中也有相关的范例可以查看（http://support.supermap.com.cn/DataWarehouse/WebDocHelp/OnlineHelp/JavaScript/examples/examples.html#tiledVectorLayer），CartoCSS功能非常强大，目前我们的产品暂时只支持本文列表中的属性，相信你能够制作出非常精美的地图！