javascript - 在缩放级别自动切换底图？

Question

我正在尝试使传单根据缩放级别更改底图。我正在尝试什么：（我是编码新手）我收到一条错误声明：

SyntaxError: missing ) 在参数列表之后

我确实检查了几次语法，但找不到错误。

我还想知道是否有更优雅的方式来编写它，而不是那种双重 if-else 语句。

map.addEventListener("zoomend", changeBasemap);

function changeBasemap() {
    var zoomLevel = map.getZoom();
    if (zoomLevel < 5) {
        if (map.hasLayer(osm)) {
            map.removeLayer(osm);
            stamen_Watercolor.addTo(map);
        } else {
            console.log(no need to change basemap)
        }
    } else { 
        if (map.hasLayer(stamen_Watercolor)) {
            map.removeLayer(stamen_Watercolor);
            osm.addTo(map);
        } else {
            console.log(no need to change basemap);
        }
    }
}

标签： javascriptleafletdom-events

Answer 1

错误是因为您忘记了引号：

console.log(no need to change basemap);

更正为：

console.log("no need to change basemap");

以下是关于如何使您的代码看起来更简洁的建议：

function changeBasemap() 
{
    if ( map.getZoom() < 5 && map.hasLayer(osm) ) {
        map.removeLayer(osm);
        stamen_Watercolor.addTo(map);
        return;
    }

    if ( map.getZoom() > 4 && map.hasLayer(stamen_Watercolor) ) {
        map.removeLayer(stamen_Watercolor);
        osm.addTo(map);
        return;
    }

    console.log("no need to change basemap");
}