MVTProvider - Cesium Documentation

new Cesium.MVTProvider(options)

矢量瓦片Provider类。

Name Type Description

options

Object

optional 参数选项:

Name	Type	Default	Description
`viewer`	Viewer		optional 三维地球对象。
`url`	String		optional 矢量瓦片的服务地址。
`layer`	String		optional 矢量瓦片的图层名称。
`tileMatrixSetID`	String		optional 矢量瓦片的矩阵集名称。
`tileMatrixLabels`	Array		optional TileMatrix的标识符集合用来进行WMTS请求，每一个对应一个TileMatrix。
`styleName`	String \| Array		optional 矢量瓦片的样式名称，传入数组时为多时相服务，数据与时间维度数据一一对应。
`proxy`	DefaultProxy		optional 代理。
`tilingScheme`	TilingScheme	`WebMercatorTilingScheme`	optional 瓦片切片方案。
`enablePickFeatures`	Boolean	`true`	optional 是否能拾取要素。
`tileWidth`	Number	`512`	optional 瓦片宽度。
`tileHeight`	Number	`512`	optional 瓦片高度。
`rectangle`	Rectangle	`Rectangle.MAX_VALUE`	optional 图层范围。
`maximumLevel`	Number		optional 请求服务的最大级别。
`sourceMaxzoom`	Number	`22`	optional 矢量瓦片source的最大级别，以此级别为依据实现瓦片的更大级别的渲染。注意: 此级别与mpabox矢量瓦片级别保持一致。当tilingScheme为WebMercatorTilingScheme的时候，矢量瓦片的级别与cesium是一致的；当tilingScheme为GeographicTilingScheme的时候，矢量瓦片的级别比cesium的级别高一级。
`useWebWorker`	Boolean	`true`	optional 是否使用WebWorker：数据量较大时建议使用，可有效改善操作时卡顿的问题；数据量较小时可使用也可以不使用（建议不使用）。若浏览器不支持离屏画布（OffscreenCanvas），则默认不使用WebWorker。
`symbolVisibility`	String	`'none'`	optional 是否显示标注（'visible'/'none'）。如果useWebWorker设置为true，则symbolVisibility为'none'。
`symbolOptimized`	Boolean	`false`	optional 是否启用标注优化，默认开启。主要优化瓦片结合处的文字标注显示不完整的问题。
`times`	Array		optional 时间维度数据集合，用以支持多时相，例如["2019-01-01 00:00:00","2020-01-01 00:00:00"]，默认是空。
`autoRequestTimeDemension`	Boolean	`false`	optional 是否自动获取时间维度和样式名称，默认为否，当启用时，自动获取服务端多时相时间信息填充times，样式信息填充styleName。

Examples:

//初始化三维球
var viewer = new Cesium.Map("cesiumContainer");

//web墨卡托投影
var mvtProvider = new Cesium.MVTProvider({
	 viewer: viewer,
	 proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),//设置代理地址。
	 url: "http://192.168.100.231:8889/xz_mkt/wmts",
	 layer: "XZMKT_SQLITE",
	 tileMatrixSetID: "Matrix_XZMKT_SQLITE_0",
	 styleName: "Oracle.xzmkt_sqlite",
   enablePickFeatures: true,
   sourceMaxzoom: 17,
   useWebWorker: false,
   symbolVisibility: 'visible'
});
//经纬度直投
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
	  proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),//设置代理地址。
	  url: "http://192.168.100.231:8889/vts_sz/wmts",
	  layer: "nj4_15",
	  tileMatrixSetID: "nj4_15_Matrix_0",
	  styleName: "VTS_Style.vv",
	  tilingScheme: new Cesium.GeographicTilingScheme(),
	  tileMatrixLabels: ['1', '2', '3', '4',
	  '5', '6', '7', '8', '9', '10','11',
	  '12', '13', '14', '15', '16', '17', '18'],
   rectangle: new Cesium.Rectangle(Cesium.Math.toRadians(116.6), Cesium.Math.toRadians(30.9), Cesium.Math.toRadians(121.3), Cesium.Math.toRadians(32.9)),
   sourceMaxzoom: 15,
   useWebWorker: true,
   symbolVisibility: 'none'
});

viewer.imageryLayers.addImageryProvider(mvtProvider);

//指定time的多时相服务
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
	  proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),//设置代理地址。
	  url: "http://172.15.110.44:9010/vts_1/wmts",
	  layer: "DLTB_DSX",
	  tileMatrixSetID: "DLTB_DSX_Matrix_0",
	  styleName: "245orcl.DLTB_3D",
   times: ["2020-01-01 00:00:00"],//times数组中指定唯一值
	  tilingScheme: new Cesium.GeographicTilingScheme(),
	  tileMatrixLabels: ['1', '2', '3', '4',
	  '5', '6', '7', '8', '9', '10','11',
	  '12', '13', '14', '15', '16', '17', '18'],
   rectangle: new Cesium.Rectangle(Cesium.Math.toRadians(116.6), Cesium.Math.toRadians(30.9), Cesium.Math.toRadians(121.3), Cesium.Math.toRadians(32.9)),
   sourceMaxzoom: 15,
   useWebWorker: true,
   symbolVisibility: 'none'
});

viewer.imageryLayers.addImageryProvider(mvtProvider);

//多个时间和样式数据的多时相服务
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
	  proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),//设置代理地址。
	  url: "http://172.15.110.44:9010/vts_1/wmts",
	  layer: "DLTB_DSX",
	  tileMatrixSetID: "DLTB_DSX_Matrix_0",
	  styleName: ["245orcl.DLTB_2D","245orcl.DLTB_3D"],//默认显示第一条时间对应的数据
   times: ["2019-01-01 00:00:00","2020-01-01 00:00:00"], //默认显示第一条时间对应的数据
	  tilingScheme: new Cesium.GeographicTilingScheme(),
	  tileMatrixLabels: ['1', '2', '3', '4',
	  '5', '6', '7', '8', '9', '10','11',
	  '12', '13', '14', '15', '16', '17', '18'],
   rectangle: new Cesium.Rectangle(Cesium.Math.toRadians(116.6), Cesium.Math.toRadians(30.9), Cesium.Math.toRadians(121.3), Cesium.Math.toRadians(32.9)),
   sourceMaxzoom: 15,
   useWebWorker: true,
   symbolVisibility: 'none'
});

viewer.imageryLayers.addImageryProvider(mvtProvider);

//自动获取数据多时相
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
	  //proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),//设置代理地址。
	  url: "http://172.15.110.44:9010/vts_1/wmts",
	  layer: "DLTB_DSX",
	  tileMatrixSetID: "DLTB_DSX_Matrix_0",
	  //styleName: ["245orcl.DLTB_2D","245orcl.DLTB_3D"],//"245orcl.DLTB_3D",
   //times: ["2019-01-01 00:00:00","2020-01-01 00:00:00"],
   autoRequestTimeDemension: true,//自动获取时间和样式维度启用，默认显示获取的第一条时间对应的数据
	  tilingScheme: new Cesium.GeographicTilingScheme(),
	  tileMatrixLabels: ['1', '2', '3', '4',
	  '5', '6', '7', '8', '9', '10','11',
	  '12', '13', '14', '15', '16', '17', '18'],
   rectangle: new Cesium.Rectangle(Cesium.Math.toRadians(116.6), Cesium.Math.toRadians(30.9), Cesium.Math.toRadians(121.3), Cesium.Math.toRadians(32.9)),
   sourceMaxzoom: 15,
   useWebWorker: true,
   symbolVisibility: 'none'
});

viewer.imageryLayers.addImageryProvider(mvtProvider);

//添加arcgis cgcs2000坐标系的矢量切片
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
    //使用完整的arcgis url地址，无需设置layer等
	  url: "https://mapservices.njghzy.com.cn:8553/njmap/rest/services/Hosted/NJVTS_GZB_DT/VectorTileServer/tile/{z}/{y}/{x}.pbf?njtoken=f5e8afb4fa180ee9d38892169ebeaa08",
	  tilingScheme: new Cesium.GeographicTilingScheme(),
	  tileMatrixLabels: ['1', '2', '3', '4',
	  '5', '6', '7', '8', '9', '10','11',
	  '12', '13', '14', '15', '16', '17', '18',"19","20","21","22"],
    sourceMaxzoom: 22,
    useWebWorker: true,
    symbolVisibility: 'none'
});

viewer.imageryLayers.addImageryProvider(mvtProvider);
//添加arcgis cgcs2000坐标系的注记
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
    //使用完整的arcgis url地址，无需设置layer等
	  url: "https://mapservices.njghzy.com.cn:8553/njmap/rest/services/Hosted/NJVTS_GZB_ZJ/VectorTileServer/tile/{z}/{y}/{x}.pbf?njtoken=f5e8afb4fa180ee9d38892169ebeaa08",
	  tilingScheme: new Cesium.GeographicTilingScheme(),
	  tileMatrixLabels: ['1', '2', '3', '4',
	  '5', '6', '7', '8', '9', '10','11',
	  '12', '13', '14', '15', '16', '17', '18',"19","20","21","22"],
    sourceMaxzoom: 22,
    useWebWorker: false,
    symbolVisibility: 'visible'
});

//添加arcgis 墨卡托坐标系的矢量瓦片，并显示注记
var mvtProvider = new Cesium.MVTProvider({
	  viewer: viewer,
    //使用完整的arcgis url地址，无需设置layer等
	  url: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf",
    sourceMaxzoom: 22,
    useWebWorker: false,
    symbolVisibility: 'visible'
});
viewer.imageryLayers.addImageryProvider(mvtProvider);

Demo:

Members

readonlymaximumLevel : Number

请求瓦片服务的最大层级。

Default Value: undefined

readonlypickedEvent : Event

拾取要素事件。

readonlyproxy : DefaultProxy

代理。

Default Value: undefined

readonlyrectangle : Rectangle

图层范围。

Default Value: tilingScheme.rectangle

readonlysourceMaxzoom : Number

矢量瓦片source的最大级别，以此级别为依据实现瓦片的更大级别的渲染。注意: 此级别与mpabox矢量瓦片级别保持一致。当tilingScheme为WebMercatorTilingScheme的时候，矢量瓦片的级别与cesium是一致的；当tilingScheme为GeographicTilingScheme的时候，矢量瓦片的级别比cesium的级别高一级。

Default Value: 22

readonlystyles : Object

矢量瓦片样式。

readonlysymbolVisibility : Boolean

标注是否显示（'visible'/'none'），默认为'none'：不显示。

Default Value: 'none'

readonlytileHeight : Number

瓦片大小-高度。

Default Value: 512

readonlytileWidth : Number

瓦片大小-宽度。

Default Value: 512

readonlytilingScheme : TilingScheme

瓦片切片方案。

Default Value: WebMercatorTilingScheme

readonlyurl : String

矢量瓦片的服务地址。

readonlyuseWebWorker : Boolean

是否使用WebWorker。数据量较大时建议使用，可有效改善操作时卡顿的问题；数据量较小时可使用也可以不使用（建议不使用）。若浏览器不支持离屏画布（OffscreenCanvas），则默认不使用WebWorker。

Default Value: true

Methods

pickFeatures(x, y, level, longitude, latitude) → Array

拾取要素，点击地图时自动调用此方法。拾取要素时，忽略要素的图层样式信息，即如果样式中有偏移等样式的设置，拾取时是无法识别的。注：无法识别到具体图层，只能拾取图层所对应的要素信息。即如果多个图层共用一个要素，则返回该要素信息。

Name	Type	Description
`x`	Number	瓦片x坐标.
`y`	Number	瓦片z坐标.
`level`	Number	瓦片层级.
`longitude`	Number	拾取要素时的经度.
`latitude`	Number	拾取要素时的纬度.

Returns:

要素集合.

queryRenderedFeatures(bbox) → Array

查询包围盒内的要素。

Name	Type	Description
`bbox`	Array	包围盒，基于屏幕空间，单位像素，形如[ [10, 20], [30, 50] ]。

Returns:

要素数组

Example:

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(click){
	var position = click.position;
	var bbox = [ [position.x-10, position.y-10], [position.x+10, position.y+10] ];
	var features = mvtProvider.queryRenderedFeatures(bbox);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

querySourceFeatures(id, sourceLayer) → Array

查询当前视口内与指定要素的id和sourceLayer相同的所有要素

Name	Type	Description
`id`	Number	要素的id
`sourceLayer`	String	要素所属的sourceLayer

Returns:

要素数组

requestAssignImage(num)

指定加载数据集中的第几个数据图层

Name	Type	Description
`num`	Number

requestImage(x, y, level, request) → Promise.<(Image|Canvas)>|undefined

请求指定瓦片的影像。

Name	Type	Description
`x`	Number	瓦片的x坐标.
`y`	Number	瓦片的y坐标.
`level`	Number	瓦片层级.
`request`	Request	optional 请求对象. 仅供内部使用.

Returns:

当图像可用的时候将resolve的一个图像的promise。没有响应的时候，则是undefined，然后重新发起请求。解决的影像可能是Image或者Canvas对象。

setLayoutProperty(layerId, name, value)

设置图层的layout属性

Name	Type	Description
`layerId`	string	图层id
`name`	string	layout属性
`value`	any	符合Mapbox Style Specification的layout属性的值

setPaintProperty(layerId, name, value)

设置图层的paint属性

Name	Type	Description
`layerId`	string	图层id
`name`	string	paint属性
`value`	any	符合Mapbox Style Specification的paint属性的值

setStyle(style)

设置矢量瓦片的样式

Name	Type	Description
`style`	StyleSpecification \| string \| null	样式，符合Mapbox样式规范的json对象，或者一个指定json对象的URL

union(features)

对面要素集合进行合并操作，支持Polygon和MultiPolygon。

Name	Type	Description
`features`	Array	想要合并的面的集合

Returns:

featureCollection 面要素

Example:

let features = mvtLayer.querySourceFeatures(feature.id, feature.sourceLayer);
try{
		let unionPolygon = mvtLayer.union(features);
}catch(error) {
		console.log(error);
}

NJ API for Cesium MVTProvider

new Cesium.MVTProvider(options)

Examples:

Demo:

Members

readonlymaximumLevel : Number

readonlypickedEvent : Event

readonlyproxy : DefaultProxy

readonlyrectangle : Rectangle

readonlysourceMaxzoom : Number

readonlystyles : Object

readonlysymbolVisibility : Boolean

readonlytileHeight : Number

readonlytileWidth : Number

readonlytilingScheme : TilingScheme

readonlyurl : String

readonlyuseWebWorker : Boolean

Methods

pickFeatures(x, y, level, longitude, latitude) → Array

Returns:

queryRenderedFeatures(bbox) → Array

Returns:

Example:

querySourceFeatures(id, sourceLayer) → Array

Returns:

requestAssignImage(num)

requestImage(x, y, level, request) → Promise.<(Image|Canvas)>|undefined

Returns:

setLayoutProperty(layerId, name, value)

setPaintProperty(layerId, name, value)

setStyle(style)

union(features)

Returns:

Example: