AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
MVTLayer图层
简介

JSAPI GL提供MVTLayer类支持加载MVT矢量瓦片数据,方便用户进行海量数据的个性化展示。MVTLayer继承XYZLayer网格瓦片设置相关参数,内部实例化TileLayer,用于添加MVT标准图层,通过options设置图层瓦片请求地址、显示等级、显示范围、显示图层、图层样式等。

类参考

详情请见类文档

图层示例
1. 确认MVT瓦片请求地址

商业慧图平台数据源为例, 瓦片请求地址需要明确创建数据用户ak、项目ID以及项目状态(未发布是0,已发布是1)

const ak = '【用户ak】';
const mapId = '【项目ID】';
const mode = 1;
var tileUrl = `https://api.map.baidu.com/region_lite/v1/region/huitu/encryption/mvt?ak=${ak}&mapId=${mapId}&x=[x]&y=[y]&z=[z]&tileSize=256&mode=${mode}`;
2. 创建MVTLayer图层
// 定义MVTayer图层
var layer = new BMapGL.MVTLayer({
encrypt: true,
idProperty: 'region_id',
spanLevel: -1,
noCollision: false, // 图层文字碰撞
style: {
point: {
type: 'point',
maxZoom: 12,
painter: {
name: ['get', 'name'],
fontSize: 32,
symbolPath: 9,
symbolFillColor: [
'case',
['boolean', ['feature-state', 'hover'], false],
'orange',
'red',
],
},
},
fill: {
type: 'polygon',
painter: {
fillColor: [
'case',
['boolean', ['feature-state', 'hover'], false],
'blue',
'#f5f975',
],
fillOpacity: 0.3,
strokeWeight: 2,
strokeOpacity: 0.6,
strokeColor: 'rgb(141,33,33)',
},
},
},
minZoom: 9,
maxZoom: 17,
tileUrlTemplate: tileUrl,
});
3. 定义事件
layer.addEventListener('onmousemove', function (e) {
layer.updateState(e.value, { hover: true }, false);
});
layer.addEventListener('onmouseout', function (e) {
layer.clearState();
});
4. 添加图层到地图实例
map.addTileLayer(layer);


上一篇

GeoJSON图层

下一篇

三方标准图层
本篇文章对您是否有帮助?