地形上限制tilelayer最大层级(maxAvailableZoom)

目前maptalks的地形上当我们设置TileLayer的最大 maxAvailableZoom 层级限制是不生效的，这样就给整个地形效果带来一些问题

const baseLayer = new maptalks.TileLayer("base", {
    urlTemplate:
        "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    subdomains: ["a", "b", "c", "d"],
    maxAvailableZoom: 14,
});

当地图层级突破一定层级时导致加载不到皮肤瓦片一片白
或者就是出现上图这种效果，尤其是山区

怎样解决这个问题?

目前maptalks的地形确实存在这个问题，社区里有个maptalks瓦片处理插件 maptalks.tileclip 可以解决这个问题

maptalks.tileclip提供的功能有：

瓦片剪裁
瓦片请求
瓦片超过最大层级时自动切割
瓦片filter
水印等

maptalks.tileclip 提供了个方法叫 getTileWithMaxZoom 可以解决这个问题,其含义是当请求的瓦片越过最大层级限制自动请求最大层级的瓦片并从中切割出对应的子瓦片

const { x, y, z } = tile;
const urlTemplate = baseLayer.options.urlTemplate;
const maxAvailableZoom = 15;
tileActor
    .getTileWithMaxZoom({
        x,
        y,
        z,
        urlTemplate,
        maxAvailableZoom,
        // filter: 'sepia(100%) invert(90%)'
    })
    .then((image) => {})
    .catch((error) => {});

我们只需要TileLayer的瓦片请求交给 getTileWithMaxZoom 其会自动的切割瓦片从而来解决瓦片无限切割的问题

const terrain = {
    type: "mapbox",
    tileSize: 256,
    maxAvailableZoom: 12,

    requireSkuToken: false,
    urlTemplate: "./../assets/data/tile-rgb/{z}/{x}/{y}.png",
    subdomains: ["a", "b", "c", "d"],
    // colors: colors4,
    // exaggeration: 4,
};

const baseLayer1 = new maptalks.TileLayer("base1", {
    urlTemplate:
        "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    subdomains: ["a", "b", "c", "d"],
});

const baseLayer = new maptalks.TileLayer("base", {
    urlTemplate:
        "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    subdomains: ["a", "b", "c", "d"],
    // maxAvailableZoom: 14,
});

baseLayer.on("renderercreate", function (e) {
    //load tile image
    //   img(Image): an Image object
    //   url(String): the url of the tile
    e.renderer.loadTileBitmap = function (url, tile, callback) {
        const { x, y, z } = tile;
        const urlTemplate = baseLayer.options.urlTemplate;
        const maxAvailableZoom = 15;
        tileActor
            .getTileWithMaxZoom({
                x,
                y,
                z,
                urlTemplate,
                maxAvailableZoom,
                // filter: 'sepia(100%) invert(90%)'
            })
            .then((imagebitmap) => {
                tileActor
                    .clipTile({
                        tile: imagebitmap,
                        tileBBOX: baseLayer._getTileBBox(tile),
                        projection: baseLayer.getProjection().code,
                        tileSize: baseLayer.getTileSize().width,
                        maskId,
                    })
                    .then((image) => {
                        callback(image);
                    })
                    .catch((error) => {
                        //do some things
                        console.error(error);
                    });
            })
            .catch((error) => {
                //do some things
                console.error(error);
            });
    };
});

const group = new maptalks.GroupGLLayer("group", [baseLayer1], {
    terrain,
});
group.addTo(map);

map.setView({
    center: [118.25779765, 30.25172089, 0.3062438964844],
    zoom: 16.66043596103459,
    pitch: 50.14999999999995,
    bearing: 112.90705084326646,
});

fetch("./../assets/data/terrain-mask-data.json")
    .then((res) => res.json())
    .then((geojson) => {
        tileActor
            .injectMask(maskId, geojson)
            .then((data) => {
                baseLayer.addTo(group);
            })
            .catch((error) => {
                console.error(error);
            });
    });

示例代码里演示设置最大层级为 15,当瓦片层级超过15时会自动从15级别的瓦片里切出出对应的子瓦片数据的

terrain-skin-maxAvailableZoom

WARNING

例子里的地形数据只是离线了部分数据，演示效果用而已，你使用时可以换成你的地形服务地址

地形上限制tilelayer最大层级(maxAvailableZoom) ​

怎样解决这个问题? ​

地形上限制tilelayer最大层级(maxAvailableZoom)

怎样解决这个问题?