作者:yyy
前言
MVT全称是Mapbox Vector Tile,是Mapbox标准的矢量切片。SuperMap iClient产品很好的支持了MVT矢量瓦片在Web端的加载,但在平常的使用中基本上都是先通过iServer后将本地iDesktop切好的矢量瓦片数据发布为地图服务或者矢量瓦片服务后再在iclient中加载。除此之外当我们遇到非iServer发布的矢量瓦片服务时又该怎么加载呢?
那么本文就为大家展示一下如何在Web端以iClient for OpenLayers和iClient for MapboxGL实现加载非iServer发布的标准规范的MVT矢量瓦片服务。
一、MVT矢量瓦片数据来源
这里我们的标准规范的MVT矢量瓦片是通过天地图得到,其地址为https://tile0./province?t=vt&z={z}&x={x}&y={y}&tk=******,另外我们还需要有一份关于mapbox的服务样式文件,其大概内容如下:
该样式文件中主要记录的是两个矢量图层地址信息和图层样式内容。
二、通过iClient for MapboxGL加载标准规范MVT服务
因为mvt是mapbox标准规范的矢量瓦片数据,iClient for MapboxGL加载矢量瓦片可以参考官网范例https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile 所以这里我们可以通过MapboxGL加载时可以直接通过在mapboxgl中修改对应style中的图层源“sources”和瓦片风格“layers”,将上述的服务样式json文件中的对应模块复制出来后加到相应的位置,然后根据当前加载的矢量瓦片地图坐标系和中心点来调整地图加载位置和比例尺。
1、定义矢量瓦片图层源
2、定义MVT矢量瓦片风格样式
3、对接展示加载效果
我们可以通过修改图层源和瓦片样式来更换加载的图层和样式,到此通过MapboxGL加载标准规范的MVT矢量瓦片服务就能正常加载显示了。
PS:如果加载的矢量瓦片坐标系不是EPSG3857,就需要引入mapbox-gl-enhance来使其能正常加载其他坐标系数据。(这里引入的坐标系是标准的EPSG3857,可以不用再重新引入了)
三、openlayers加载标准矢量瓦片mvt服务
在iClient for OpenLayers中其默认是支持对接EPSG4326、EPSG3857坐标系,对于其他坐标系我们需要重新定义坐标系后再进行对接;在openlayers中加载矢量瓦片还需要引入mapbox风格库才能正常加载显示mapbox标准的矢量瓦片数据。
1、引入mapbox风格库
2、定义非4326和3857坐标系
需要引入proj4,直接在上面第一步中加入proj4
这里以china 2000(EPSG4490)为例引入定义:
3、定义map对象(这里因为坐标系是3857的,所以分辨率计算公式选择2*6378137*Math.PI/512)
4、定义MVT矢量瓦片风格和图层源
5、对接展示加载效果
总结
对于这种mapbox标准规范的MVT矢量瓦片,我们在加载时需要注意的是如何定义矢量瓦片的图层源和瓦片风格样式,以及在不同坐标系时如何进行坐标系转换,坐标系分辨率调用等。