Class: VectorTilesMap

VectorTilesMap

new VectorTilesMap()

矢量瓦片地图类。（目前支持加载相同坐标系下的多个MVT服务）
mapbox的style中的各种规范参考：“https://docs.mapbox.com/mapbox-gl-js/style-spec/”。

Name Type Description
options.url String

适用于通过SuperMap桌面软件生成mvt数据，经iServer发布为rest风格的地图服务。 （mapbox只支持3857投影坐标系，全球剖分且瓦片原点位置固定在3857投影左上角的栅格瓦片数据）
options.layerConfig String

图层配置文件。
options.provider String

地图服务provider。
options.name String

地图名称。
options.billboardMode billboardMode 可选

设置文字的显示模式，持平铺显示。
options.localIdeographFontFamily Boolean 可选

用于设置文字注记字体为浏览器默认字体，解决mapbox无法识别字体导致文字不显示的问题，默认值false。
options.localFontFamily String 可选

用于设置文字优先从本地生成字体文件，如果本地没有该字体文件则从style.json的字体地址去获取，默认值null。
可参考https://docs.mapbox.com/mapbox-gl-js/api/map/
MVT文字分为表意文字（汉语、日语、韩语等）和字母文字（英语、阿拉伯语等）
options.subdomains Array | String

多子域。传入参数为Array时，支持多个子域加载。传入参数为String时仅支持单个子域加载。
options.crs String

目前支持加载第三方坐标系EPSG:4490，EPSG:3857，默认值EPSG:4490。
options.transformRequest function

回调函数。用于修改url、设置报头或为跨源请求设置凭据属性。默认值为null。
Example
var mvtMap = scene.addVectorTilesMap({
     url:URL_CONFIG.MVT,
     canvasWidth:512,
     name:'testMVT',
     viewer:viewer,
     transformRequest:function(url,resourceType){
         return {
             url:url.replace('http','https'),
             headers:{'my-custom-header':true}
         };
     }
});
var layerReadyPromise = mvtMap.readyPromise;
    layerReadyPromise.then(function(data){
        //后续对MVT的所有接口操作，在readyPromise里面调用
    })

Members

deprecated alphanumber

获取或者设置图层整体的透明度，取值在0到1之间（0为完全透明）。

Default Value:
1.0
See:
  • VectorTilesMapSetting.alpha

detailLevelOffsetNumber

设置MVT图层的精细层使用粗糙层的纹理。通过数字来指定偏移的层数，正整数时使用当前层之上的精细层的纹理，为负数时往下偏移，number表示偏移的层数。

isOverlapDisplayedBoolean

获取或者设置图层重叠的部分是否显示。设为true时，重叠的部分依然显示，即不参与避让。默认值为false（废弃接口，目前默认支持文字标签避让效果）。

Default Value:
false

deprecated lineAntialiasingboolean

获取或者设置线是否抗锯齿

Default Value:
true
See:
  • VectorTilesMapSetting.lineAntialiasing

mapboxStyle

获取或者设置图层使用的mapbox标准的风格对象，可用来在前端修改地图风格、样式、专题图等。 mapbox的style中的各种规范参考：“https://docs.mapbox.com/mapbox-gl-js/style-spec/”。

maximumLevelNumber

获取图层的最大级别。

minimumLevelNumber

获取图层的最小级别。

readyPromisePromise

获取一个promise，当VectorTilesMap对象准备好供使用时为true。

rectangleNumber

获取数据的地理范围。

See:

selectedColorBoolean

设置选中颜色高亮，默认值为SuperMap3D.Color.CYAN。

Default Value:
false

showBoolean

获取或者设置图层的可见性。

style3DObject

获取或者设置显示风格。

See:

swipeEnabledBoolean

设置是否开启卷帘功能，默认值：false。

Default Value:
false

swipeRegionBoundingRectangle

设置卷帘区域左上角和右下角，类型：BoundingRectangle，默认值为new ，SuperMap3D.BoundingRectangle(0.0,0.0,1.0,1.0)

tileHeightNumber

获取瓦片高度。

tileWidthNumber

获取瓦片宽度。

tilingScheme

获取数据的全球剖分方式。

Methods

addImage(id, options)

为该矢量瓦片地图添加图像。

Name Type Description
id string

图像id。
options Object

可选对象。

Name Type Description
pixelRatio Object

图像像素与屏幕物理像素之比。
sdf boolean

图像是否为sdf图像。

addLayer(layerObject, before)

添加图层。

Name Type Description
layerObject Object

符合mapbox的style中layer规范的图层参数对象。
before String

根据ID指定一个目标图层，将新增图层放置于该图层前面。
Example
// 添加一个新的类型为symbol的图层到一个已经存在的图层之前
map.addLayer({
    id: 'states',
    // 这里soure需要引用一个图层中已经存在source对象的id
    source: 'state-data',
    type: 'symbol',
    layout: {
        // 设置标签文字内容为feature中的'name'属性的值
        'text-field': ['get', 'name']
    }
 // 将这个新图层添加到一个已经存在的id为'cities'的图层之前
}, 'cities');

addSource(source)

在地图中添加一个mapbox style标准的数据源

Name Type Description
source Object

数据源对象，符合mapbox style标准
Examples
添加SuperMap REST地图服务作为栅格数据源
map.addSource('myRestMap', {
    type: 'raster',
    url : "http://localhost:8090/iserver/services/map-myMap/rest/maps/myMap",
});
 
添加SuperMap REST海图出图服务作为栅格数据源，chartSetting为ChartSetting类型海图出图参数类
map.addSource('myRestChartMap', {
    type: 'raster',
    url : "http://localhost:8090/iserver/services/map-myRestChartMap/rest/maps/myRestChartMap",
    chartSetting : chartSetting
});
添加geojson务作为矢量数据源
map.addSource('my-data', {
    "type": "geojson",
    "data": {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-77.0323, 38.9131]
        }
    }
});

flyTo(center, zoom, scale)

定位相机位置,MVT数据可定位到指定层级。

定位后的相机视角垂直向下，以Cener为视野中心，并以特定层级显示MVT数据。

适用于不加载地形时。

Name Type Description
center Array

定位后的视野中心, 第一个值是经度，第二个值是纬度，单位(度)。
zoom Number

定位后的MVT层级。
scale Number

全球比例尺。
Example
mvtMap.flyTo({
   center :[103.6454723,  40.134343], 
   zoom : 11
});

mvtMap.flyTo({
   center :[103.6454723,  40.134343], 
   scale : 1.0/36978669.4318207
})

getFilter(){Array}

返回指定ID图层使用的图层过滤器

Returns:
Type Description
Array 图层使用的过滤器
Example
const filter = map.getFilter('myLayer');

getLayer(id){Object}

返回一个指定图层id的符合mapbox的style中layer规范的图层参数对象

Name Type Description
id string

图层对象id
Returns:
Type Description
Object 返回指定ID的图层对象, 或者当图层id不存在时返回 undefined
Example
const stateDataLayer = map.getLayer('state-data');

getLayoutProperty(layerId){*}

返回指定id的图层的布局对象中的某个属性值

Name Type Description
layerId string

要获取布局对象的图层名
Returns:
Type Description
* 返回特定布局对象的属性值
Example
const layoutProperty = map.getLayoutProperty('mySymbolLayer', 'icon-anchor');

getPaintProperty(layerId){*}

返回指定图层的画布样式中的指定属性的值

Name Type Description
layerId string

要获取画布样式对象的图层名
Returns:
Type Description
* 返回画布样式对象某个属性的值
Example
const paintProperty = map.getPaintProperty('mySymbolLayer', 'icon-color');

getSource(id){Object}

返回地图style中指定id的source对象

Name Type Description
id string

The ID of the source to get.
Returns:
Type Description
Object 返回style中指定id的source对象，如果id不存在，则返回undefined The style source with the specified ID or undefined if the ID
Example
const sourceObject = map.getSource('points');

getVisibleInViewport(index){Boolean}

获得图层对应视口可见性，主要用于分屏和大屏显示中。

Name Type Description
index Number

索引。
Throws:

the index is 0~8。

Type
DeveloperError
Returns:
Type Description
Boolean visible 可见性。

hasImage(id){boolean}

判断该矢量瓦片地图是否存在Id为id的图像。

Name Type Description
id string

图像Id。
Returns:
Type Description
boolean true表示该服务存在Id为id的图像,false反之。

listImages(){Array.<number>}

获取该矢量瓦片地图所有的图像Id。

Returns:
Type Description
Array.<number> 该服务所有的图像Id

loadImage(url, callback)

为该矢量瓦片地图加载图像。

Name Type Description
url string

图像地址。
callback function

当图像加载成功或者失败调用的函数，形似callback(error, data)
Example
mvtMap.loadImage("./p.png", function(err, data){
   if(err){
     return;
   }
   mvtMap.addImage('imageId', data);
})

moveLayer(id, beforeId)

将图层移动到指定的图层数组。

Name Type Description
id String

期望进行位置移动的图层的ID。
beforeId String 可选

该ID指定了一个现有图层，期望进行移动的图层将会被插入到这个现有图层之前，id所指定的移动的图层会显示在beforedId图层之下，如果省略该参数，则移动的图层将会被追加到图层数组的末尾，并在地图上显示在所有其他图层之上。
Example
//表示降Polygon1移动到数组中polygon2所在的位置之前
VectorTilesMap.moveLayer("ploygon1", "polygon2");

queryRenderedFeatures(cartographicArray, options, layers, filter)

从指定的图层查询在指定地理范围内的渲染特征。

Name Type Description
cartographicArray Array.<Cartographic> | Cartographic

指定地理范围，地理坐标点或者地理坐标数组。
options Object

对象。
layers Array.<string>

指定的图层ID，如果未指定图层ID，则返回所有图层与指定范围相交的渲染特征。
filter Filter

过滤器。

querySourceFeatures(params)

查找特征要素。根据指定的特征，查询地图上的元素，现在已经支持模糊查询。

Name Type Description
params

指定的要素特征，根据该特征进行查找。
Example
var result = mvtMap.querySourceFeatures({
sourceLayer: selectLayer.id, //子图层名称
filter: ["like","NAME","京"] //设置模糊查询过滤条件。如此处可以查出NAME属性带“京”的要素。
})

releaseSelection()

释放选中区域。

removeImage(id)

删除该矢量瓦片地图Id为id的图像。

Name Type Description
id string

图像Id。

removeLayer(id)

移除指定ID的图层。

Name Type Description
id String

拟被移除的图层的ID。
Example
// 如果一个ID为 'state-data' 的图层存在, 则从地图中移除它
if (map.getLayer('state-data')) map.removeLayer('state-data');

removeSource()

从地图style中移除一个指定id的source

Example
map.removeSource('bathymetry-data');

setCRS(crs)

对接第三方MVT数据（加载第三方数据时必须设置数据的坐标系）。

Name Type Description
crs String

目前支持EPSG:4490，EPSG:3857，默认值EPSG:4490。
Example
SuperMap3D.when(mvtMap.readyPromise, function(){
     mvtMap.setCRS("EPSG:3857")
})

setFilter(过滤器信息。格式请参考)

设置指定id的图层使用的过滤器对象 过滤器可以控制一个style layer中选择哪些来自它的source对象的feature去渲染。 过滤器中的表达式计算结果为'true'的那些feature才会被渲染到地图上。那些计算结果为false的feature会被隐藏。 可以使用setFilter方法去控制您想展示的数据源中数据的子集 如果想清楚已有的过滤器，第二个参数可以传'null'或者'undefined'

Name Type Description
过滤器信息。格式请参考 Array | null | undefined

Mapbox Style Specification中 [filter definition]部分。如果传'null'或者'undefined'，会清除图层已经存在的过滤器
Examples
// 'my-layer'图层中只显示feature中'name'属性为'CHINA'的那些feature
map.setFilter('my-layer', ['==', ['get', 'name'], 'CHINA']);
// 'bike-docks'图层中只显示feature中'available-spots'属性值大于等于5的那些feature
// 移除id为'bike-docks'的style layer中使用过滤器
map.setFilter('bike-docks', null);

setLayoutProperty(layerId, name, value)

为指定ID的图层设置布局风格。通过该接口，可以设置文本换行显示。

Name Type Description
layerId String

拟设置布局风格的图层ID
name String

布局风格的名称。
value String

布局风格的值。
Example
设置文字换行的用法。
mvtMap.setLayoutProperty(子图层名称,'text-max-width',单行文本的最大字符数）
mvtMap.setLayoutProperty("加油站注记#1", 'text-max-width',5 )
设置文字图层不沿线旋转，默认值false。
mvtMap.setLayoutProperty("沿线文字图层id", 'ignore-line-rotation', true/false )
设置沿线文字图层位置沿着矢量数据定义的顺序放置。
mvtMap.setLayoutProperty("沿线文字图层id", 'symbol-placement', 'line-direction')
沿线文字新增text-keep-upright-alignment风格，支持设置字体向上的对齐目标，默认值‘line'为mapbox渲染效果，与矢量线平行。viewport为文字渲染结果与视口平行。
mvtMap.setLayoutProperty(layer.id, 'text-keep-upright-alignment', 'viewport')
设置文字的方向，默认值为 ['horizontal', 'vertical']，'line' 为控制沿线文字按照矢量数据定义的顺序放置。
mvtMap.setLayoutProperty(layer.id, 'text-writing-mode', 'line')

setPaintProperty(layerId, name, value)

为指定ID的图层设置画布样式。

Name Type Description
layerId String

拟设置画布样式的图层ID。
name String

画布的名称。
value String

画布的值。

setVisibleInViewport(index, visible)

设置图层对应视口可见性，主要用于分屏和大屏显示中。

Name Type Description
index Number

索引。
visible Boolean

可见性。
Throws:

the index is 0~8。

Type
DeveloperError

updateImage(id, image)

为该矢量瓦片地图更新图像。

Name Type Description
id string

图像Id。
image HTMLImageElement | ImageBitmap | ImageData | Object | StyleImageInterface

图像数据。