Question

我iserver发布了二维矢量瓦片数据，现在想根据mapbox地图的缩放级别的改变，显示线条的宽度也改变，这个能实现吗？比如地图级别为10时，线条宽度为3；缩放级别为12时，线条宽度为4,，加载代码如下：

let url = import.meta.env.VITE_ISERVER_URL + "map-mvt-cundaogonglu1/restjsr/v1/vectortile/maps/cundao@gonglu1/style.json"
    axios.get(url).then(mvtStyle => {
        mvtStyle.data.layers.map(item => {
            item.layout && (item.layout.visibility = "none", item.layout["line-join"] = "round", item.layout["line-cap"] = "square");
            item.paint && (item.paint["line-width"] = 2.8);
        })
        let layer = window.map.addStyle(mvtStyle.data)
    });

Answer 1

您好，1、如果是通过iserver发布的mvt，可以在桌面进行分级配图后再发服务。

2、前端在加载mvt时，通过addLayer对需要分级的图层进行线宽设置，例如：

  map.addLayer({
            "id": "China_Boundary",
            "type": "line",
            "source": "vector-tiles",
            "source-layer": "China_Boundary_A_ln@China",
            "paint": {
                "line-color": "hsl(230, 8%, 51%)",
                "line-width": {
                    "base": 1,
                    "stops": [
                        [3,6],
                        [10,6]
                    ]
                }
            }

        });

参考示例：https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile