第二层不出现

时间:2019-05-17 20:13:43

标签: openlayers openlayers-5

基于示例https://openlayers.org/en/latest/examples/popup.html,我想添加另一层以显示更多信息。第一层看起来不错,但是第二层没有出现

我尝试调整代码以添加该层

  var attribution = new ol.control.Attribution({
  collapsible: false
  });

 var map = new ol.Map({
 controls: ol.control.defaults({attribution: false}).extend([attribution]),
 layers: [
     new ol.layer.Tile({
         source: new ol.source.OSM({
             url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png',
             maxZoom: 18
         })
     })
 ],
 target: 'map',
 view: new ol.View({
     center: ol.proj.fromLonLat([4.35247, 50.84673]),
     maxZoom: 18,
     zoom: 12
    })
    });

    /* Adding 1st overlay */

    var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
    features: [
    new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
    })
    ]
    })
    });
    map.addLayer(layer);

    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');

     var overlay = new ol.Overlay({
         element: container,
         autoPan: true,
         autoPanAnimation: {
             duration: 250
         }
     });
     map.addOverlay(overlay);

    content.innerHTML = '<b>Hello world!</b><br />I am 1st popup.';
    overlay.setPosition(ol.proj.fromLonLat([4.35247, 50.84673]));

    /* Adding 2nd overlay */
    var layer1 = new ol.layer.Vector({
    source: new ol.source.Vector({
    features: [
    new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.81673]))
    })
    ]
    })
    });
    map.addLayer(layer1);


    var container1 = document.getElementById('popup1');
    var content1 = document.getElementById('popup-content1');

     var overlay1 = new ol.Overlay({
         element: container1,
         autoPan: true,
         autoPanAnimation: {
             duration: 250
         }
     });
     map.addOverlay(overlay1);

    content1.innerHTML = '<b>Hello world 2!</b><br />I am 2nd popup.';
    overlay1.setPosition(ol.proj.fromLonLat([4.35247, 50.81673]));

我希望2弹出窗口。可以在此处查看运行的代码:https://www.corobori.com/sos/testmap.html

0 个答案:

没有答案