我正在使用以下代码加载图像:
map.on('load', function () {
map.loadImage('....png', function(error, image) {
if (error) throw error;
map.addImage('b7', image);
map.addLayer({
"id": "b7",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
},
"layout": {
"icon-image": "b7",
"icon-size": 0.2
}
});
});
如何在某个缩放级别将可见性设置为无?
看起来你不能在loadImage上使用map.setLayoutProperty。在控制台中,它显示: 错误:图层"b7"在地图样式中不存在,无法设置样式。
乳清我尝试类似的东西:
map.setLayoutProperty( 'b7', 'visibility', 'none' );
有什么想法吗?
关于如何解决这个问题的两个建议:
首先,确保映像名称和图层名称不同。可能是该函数正在寻找 b7 层,但它首先找到一个名为 b7 的图像(反之亦然(。无论哪种方式,都应该更改此设置,因为它会创建冲突的变量。
其次,如果这不起作用,请尝试单独添加源而不是在图层内添加源。
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.981906, 41.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
然后添加带有源的图层。
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
现在,您可以在缩放启动侦听器上调用 setLayoutProperty。如果只想使用map.getZoom();
在特定缩放级别添加条件 您需要在此处设置图层的可见性,而不是图像。
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})
片段如下,如果您遇到任何问题,请告诉我。
map.on('load', function() {
map.loadImage('myImage.png', function(error, image) {
if (error) throw error;
map.addImage('myImage', image);
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.981906, 40.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
});
});
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})