主要使用了这个表达式进行过滤："text-opacity": ["step", ["zoom"], 0, 5, 1]
这个表达式的意思就是zoom在小于5时text-opacity值等于0，大于5时text-opacity值等于1
const addPortsGeoJSONLayer = (ports) => {
let map = G.map;
map.loadImage(portIcon, function (error, image) {
if (error) throw error;
map.addImage("port-icon", image);
map.addSource("ports", {
type: "geojson",
data: ports,
});
map.addLayer({
id: "ports",
type: "symbol",
source: "ports",
layout: {
visibility: "visible",
"icon-image": "port-icon",
"icon-size": 0.3,
"text-field": ["get", "port"],
"text-size": 13,
"text-anchor": "top",
"text-offset": [0, 0.8],
"symbol-placement": "point",
},
paint: {
"text-color": "black",
"text-halo-color": "#d4eaee",
"text-halo-width": 1,
"text-opacity": ["step", ["zoom"], 0, 5, 1],
},
});
});
};