Question

我正在使用OpenLayers来显示动态加载的图像。我正在使用的代码是：

      var map;
      function init(strURL) {
      map = new OpenLayers.Map('map');

      var options = { numZoomLevels: 3,
                isBaseLayer: true, };

      var graphic = new OpenLayers.Layer.Image(
            'City Lights',
            strURL + "?sc=page",
            new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
            new OpenLayers.Size(580, 288),
            options
        );

    //    graphic.events.on({
    //      loadstart: function () {
    //        OpenLayers.Console.log("loadstart");
    //      },
    //      loadend: function () {
    //        OpenLayers.Console.log("loadend");
    //      }
    //    });

    var jpl_wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
            "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
            { layers: "landsat7" }, options);

    map.addLayers([graphic, jpl_wms]);


    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.zoomToMaxExtent();

  }

我在按钮单击事件上调用此函数并在此时传递strURL（图像的源）。结果是，每次单击时，加载并在网页上显示不同的图像，但不清除先前的图像。所以我在网页上显示5个不同的图像，点击5次，依此类推。

我的javascript知识有限，所以如果这是一个愚蠢的问题我很抱歉。如何阻止这种行为？感谢您的帮助。

另外，我不太了解这些内容：

    var jpl_wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
        "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
        { layers: "landsat7" }, options);

但是我知道这些行是必需的，因为如果我删除了js错误。

Answer 1

所以目前你在点击每个按钮时调用init（strURL）？将该代码分为两部分：

在页面加载时，创建地图和图层对象
点击按钮，只需更新现有图像层的URL。图像层具有setUrl（url）方法：http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/Image-js.html#OpenLayers.Layer.Image.setUrl

以下是示例，应该解释一下：http://jsfiddle.net/mEHrN/6/

关于var jpl_wms = ... - 它会创建WMS图层，该图层应显示Landsat图像（但该图片似乎不起作用）。如果您将其删除，请记住将其从map.addLayers中删除：

map.addLayers([graphic]);

可能这是理由，为什么你有JS错误。

OpenLayers - 清除'map'div

1 个答案: