SuperMap.Layer.TiledVectorLayer

矢量分块图层(对接SuperMap iServer 7C以上版本 )。 矢量瓦片是将地理数据以分块方式分发给浏览器或其他客户端设备的一种方式。 矢量化瓦片和栅格瓦片相似,但是数据的表述方式不同。

Inherits from

Summary
SuperMap.Layer.TiledVectorLayer 矢量分块图层(对接SuperMap iServer 7C以上版本 )。 矢量瓦片是将地理数据以分块方式分发给浏览器或其他客户端设备的一种方式。 矢量化瓦片和栅格瓦片相似,但是数据的表述方式不同。
Properties
bufferTileCount {Number} 用来记录内存中缓存矢量瓦片要素的数量,默认值为 1000。 为了减少网络访问量,在使用 Canvas 模式时,图层会将访问过的矢量瓦片要素保存在内存中, 如果访问的矢量瓦片要素数量超过该属性定义的值,那么新访问的矢量瓦片要素会替换已经缓存的矢量瓦片要素。
credential {<Supermap.Credential>} 图层独立的安全验证信息,比如 token。需要在初始化的时候就传进去
donotNeedServerCartoCss {boolean} 是否不需要服务端的cartocss,默认为false
isSupportHoles
layerEditor {SuperMap.Control.TiledVectorLayerEditor} 绑定了些图层的矢量地图编辑器
useLocalStorage 是否开启本地存储功能,默认为false
Constructor
SuperMap.Layer.TiledVectorLayer 矢量分块图层(对接iServer 7C以上版本服务)
Functions
clone 创建当前图层的副本。
destroy 解构TiledVectorLayer类,释放资源。
getClientCartoCSS 返回用户设置的cartocss样式
getFeature 根据像素坐标获取该坐标对应的几何对象。
getServerCartoCSS 返回服务端产生的cartocss样式
highlightFeatures 高亮显示一个或者多个几何对象。
refresh 当地图需要刷新,但又不需要重新向服务器请求数据时,可调此方法对地图进行重绘 此方法不对新设置的CartoCSS进行实时处理
setCartoCSS 给矢量要素图层设置CartoCSS样式并解析出来,然后重绘图层
unHightlightFeatures 不高亮显示任何要素

Properties

layerEditor

{SuperMap.Control.TiledVectorLayerEditor} 绑定了些图层的矢量地图编辑器

isSupportHoles

{Boolean} 是否支持岛洞

credential

{<Supermap.Credential>} 图层独立的安全验证信息,比如 token。需要在初始化的时候就传进去

donotNeedServerCartoCss

{boolean} 是否不需要服务端的cartocss,默认为false

useLocalStorage

是否开启本地存储功能,默认为false

bufferTileCount

{Number} 用来记录内存中缓存矢量瓦片要素的数量,默认值为 1000。 为了减少网络访问量,在使用 Canvas 模式时,图层会将访问过的矢量瓦片要素保存在内存中, 如果访问的矢量瓦片要素数量超过该属性定义的值,那么新访问的矢量瓦片要素会替换已经缓存的矢量瓦片要素。

Constructor

SuperMap.Layer.TiledVectorLayer

矢量分块图层(对接iServer 7C以上版本服务)

Parameters

name {String} 图层标识名称。
url {String} 图层的服务地址。
params {Object} 矢量图层的中要加到矢量数据请求参数中的,常用的参数有cacheEnabled(是否在服务端缓存矢量数据)
options {Object} 可选参数,包含useLocalStorage,以及cartoCss等等参数

Examples

var cartoCss=["#Road_L__China400{",
"line-color:#f00;",
"line-width:2;",
"}"].join("\n");
layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true},{useLocalStorage:true,cartoCss:cartoCss});
layer.events.on({"layerInitialized": addLayer});
function addLayer(){
     map.addLayers([layer]);
     var center = new SuperMap.LonLat(0,0);
     map.setCenter(center, 1);
}

Functions

setCartoCSS

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。

getClientCartoCSS

getClientCartoCSS:function()

返回用户设置的cartocss样式

returns

{String} cartocss样式

getServerCartoCSS

getServerCartoCSS:function()

返回服务端产生的cartocss样式

returns

{String} cartocss样式

destroy

destroy: function ()

解构TiledVectorLayer类,释放资源。

clone

clone: function ( obj )

创建当前图层的副本。

Parameters

obj {Object}

Returns

{SuperMap.Layer.TiledVectorLayer} 新的图层。

getFeature

getFeature: function ( i,
j )

根据像素坐标获取该坐标对应的几何对象。

Parameters

i {Number} 纵向像素坐标。
j {Number} 横向像素坐标。

Returns

{Object} 返回对像包含两个属性:layer,geometry。layer为几何对象对应的图层名,geometry记录了几何对象的id和坐标信息。

highlightFeatures

highlightFeatures: function ( featureInfo )

高亮显示一个或者多个几何对象。

Parameters

featureInfoes {Array}|{Object} 此参数可以是数组也可以是对象,每个对象都必须有featureId与layerId两个属性

unHightlightFeatures

unHightlightFeatures:function()

不高亮显示任何要素

refresh

refresh:function()

当地图需要刷新,但又不需要重新向服务器请求数据时,可调此方法对地图进行重绘 此方法不对新设置的CartoCSS进行实时处理

可视化的矢量地图编辑器
setCartoCSS:function( cartoCss,
fromServer )
给矢量要素图层设置CartoCSS样式并解析出来,然后重绘图层
getClientCartoCSS:function()
返回用户设置的cartocss样式
getServerCartoCSS:function()
返回服务端产生的cartocss样式
destroy: function ()
解构TiledVectorLayer类,释放资源。
clone: function ( obj )
创建当前图层的副本。
getFeature: function ( i,
j )
根据像素坐标获取该坐标对应的几何对象。
highlightFeatures: function ( featureInfo )
高亮显示一个或者多个几何对象。
unHightlightFeatures:function()
不高亮显示任何要素
refresh:function()
当地图需要刷新,但又不需要重新向服务器请求数据时,可调此方法对地图进行重绘 此方法不对新设置的CartoCSS进行实时处理
使用网格状瓦片图层的基类,{SuperMap.Layer.Grid}构造函数可创建新的网格瓦片图层。
矢量分块图层(对接iServer 7C以上版本服务)
Close