jspopularGL

MVTLayer图层

更新时间:2023年01月12日

简介

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

MVT标准图层

DEMO详情

类参考

详情请见类文档

图层示例

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);

文档全面上新