在 Web WorldWind 中切换图层

Posted 2023-03-23

【中文标题】在 Web WorldWind 中切换图层

【英文标题】：Toggle Layers in Web WorldWind

【发布时间】：2018-07-26 14:21:30

【问题描述】：

我是 Web WorldWind 的新手，如果这是一个简单的问题，请原谅我，但我还没有在文档或其他地方找到解决方案。我有以下内容：

<div style="position: absolute; top: 5px; left: 5px;">
    <!-- Create a canvas for Web WorldWind. -->
    <canvas id="canvasOne"  >
    Your browser does not support html5 Canvas.
</canvas>
</div>

<script>
var wwd;
window.addEventListener("load", eventWindowLoaded, false);

// Define the event listener to initialize Web WorldWind.
function eventWindowLoaded() 
    // Create a WorldWindow for the canvas.
    wwd = new WorldWind.WorldWindow("canvasOne");
    // Add some image layers to the WorldWindow's globe
    //wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer());.
    wwd.addLayer(new WorldWind.BingRoadsLayer());

    // Add a compass, a coordinates display and some view controls to the WorldWindow.
    wwd.addLayer(new WorldWind.CompassLayer());
    wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
    wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));

</script>

当地图显示时，我想添加一个切换开关以在道路图层和高分辨率空中窗口之间切换。任何帮助表示赞赏。

【参考方案1】：

设置布尔值enabled 属性以显示/隐藏单个图层。

// Create the roads and aerial imagery layers and set the initial visability
var aerialLayer = new WorldWind.BingAerialWithLabelsLayer(),
    roadsLayer = new WorldWind.BingRoadsLayer();
aerialLayer.enabled = true;
roadsLayer.enabled = false;

// Add the layers to the WorldWindow (globe)
wwd.addLayer(aerialLayer);
wwd.addLayer(roadsLayer);

// Toggles the display of the roads and aerial imagery layers
function toggleLayers() 
    aerialLayer.enabled = !aerialLayer.enabled;
    roadsLayer.enabled = !roadsLayer.enabled;

仅供参考：WorldWindow (wwd) 对象有一个 layers 数组属性，您可以在其中访问图层。

见：WorldWind.Layer

另见：layers in WorldWind.WorldWindow