iclient加载标准规范的矢量瓦片mvt服务

最新推荐文章于 2025-03-11 17:13:42 发布

supermapsupport

最新推荐文章于 2025-03-11 17:13:42 发布

阅读量2.9k

点赞数 1

分类专栏：行业案例 WebGIS 文章标签： javascript 开发语言 ecmascript

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.youkuaiyun.com/supermapsupport/article/details/122068945

版权

WebGIS 同时被 2 个专栏收录

142 篇文章

订阅专栏

行业案例

76 篇文章

订阅专栏

本文介绍如何在Web端使用iClientforMapboxGL和iClientforOpenLayers加载非iServer发布的MVT矢量瓦片服务。通过定义图层源和瓦片风格样式，在不同坐标系下进行坐标转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：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.tianditu.gov.cn/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、定义矢量瓦片图层源

"sources": {

"g8thcxv2m": {

"type": "vector",

"tiles": ["https://tile0.tianditu.gov.cn/province?t=vt&z={z}&x={x}&y={y}&tk=******"],

"minZoom": 0,

"maxZoom": 14

}

2、定义MVT矢量瓦片风格样式

"layers": [{

"id": "g8thcxv2m",

"type": "fill",

"source": "g8thcxv2m",

"source-layer": "shengjie",

"paint": {"fill-color": "rgba(185, 31, 31, 0.7)"}

}]

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）为例引入定义：

proj4.defs("EPSG:4490","+proj=longlat +ellps=GRS80 +no_defs");

var projection = ol.proj.get('EPSG:4490');

projection.setExtent([-180,-85.05,180,85.05]);

3、定义map对象（这里因为坐标系是3857的，所以分辨率计算公式选择26378137Math.PI/512）

//MVT 矢量瓦片第0级分辨率为全球范围宽度除以瓦片宽度512.

//常见坐标系第0级分辨率 WebMercator(3857):2*6378137*Math.PI/512 WGS84(4326):360.0/512 China2000(4490):360.0/512 Beijing54(4214):360.0/512 Xian80(4610):360.0/512

var topResolution = 2*6378137*Math.PI/512;

var resolutions = [];

for (var zoom = 0; zoom < 22; zoom++) {

resolutions.push(topResolution / Math.pow(2, zoom));

}

var vectorLayer;

var map = new ol.Map({

target: 'map',

view: new ol.View({

center: [11609969.27, 3896311.62],

zoom: 3,

projection: 'EPSG:3857',