OpenLayers 4-同時顯示多個GeoJSON文件中的功能

Question

選中或取消選中復選框時，我試圖顯示或隱藏標記。 我想在每個標記上顯示一個彈出窗口，其中包含GeoJSON文件中包含的信息。

當我僅選中一個復選框時，按預期執行了正確的代碼塊，但是當我同時選中兩個復選框時，僅顯示最后一個復選框的彈出窗口。 在我的代碼中，我有兩種類型的標記：游泳池和停車場，例如，如果我檢查游泳池的框，則在彈出窗口中顯示正確的信息，但是如果我也檢查了停車場的框，則僅包含在停車場的彈出窗口中的信息是正確的（所有游泳池的彈出窗口都是錯誤的：僅顯示“ undefined”）...

問題是兩個部分沒有同時執行！ 你有什么主意嗎？

我的代碼：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Affichage correct de la page -->
      <title>Markers</title>
      <link rel="stylesheet" href="ol/ol.css">
      <link rel="stylesheet" href="ol/ol3-layerswitcher.css">
      <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
      <script src="ol/ol.js"></script>
      <script src="ol/ol3-layerswitcher.js"></script>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
      <link rel="stylesheet" href="sidebar/css/ol3-sidebar.css" />
      <script src="sidebar/js/ol3-sidebar.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  </head>

    <body>

        <div id="map" class="map"></div>
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content"></div>
        </div>

        <!--Sidemenu-->

        <div id="sidebar" class="sidebar collapsed">

            <div class="sidebar-tabs">
                <ul role="tablist">
                    <li><a href="#home" role="tab"><i class="fa fa-map-marker"></i></a></li>
                </ul>
            </div>


            <div class="sidebar-content">
                <div class="sidebar-pane" id="home">
                    <h1 class="sidebar-header">
                        Marqueurs
                        <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                    </h1>

                    <br>
                    <input type="checkbox" id="swimmpool" name="swimmpool" value="swimmpool">
                    <label for="subscribeNews">Swimming pools</label>
                    <br><br>
                    <input type="checkbox" id="parking" name="parking" value="parking">
                    <label for="subscribeNews">Parkings</label>

                </div>

                <div class="sidebar-pane" id="profile">
                    <h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
                </div>
            </div>
        </div>

          <script>

            //Layers

            var layer1 = new ol.source.TileWMS({
              url: '...',
              params: {...},
              attributions: '...'
            });

            var layer2 = new ol.source.TileWMS({
              url: '...',
              params: {...},
              attributions: '...'
            });

           var layer3 = new ol.source.TileWMS({
            url: '...',
            params: {...},
            attributions: '...'
           });

            //Marker's style

            var parkvert = new ol.style.Style({
              image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'image/parking-vert.png'
              }))
            });

            var parkorange = new ol.style.Style({
              image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'image/parking-orange.png'
              }))
            });

            var parkrouge = new ol.style.Style({
              image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'image/parking-rouge.png'
              }))
            });

            var parknoir = new ol.style.Style({
              image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'image/parking-noir.png'
              }))
            });

            var style_swimmpool = new ol.style.Style({
              image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'image/sports-piscine.png'
              }))
            });

            //GeoJSON files

            var swimmpoolLayer = new ol.source.Vector({
              url: '...',
              format: new ol.format.GeoJSON()
            });

            var parkingLayer = new ol.source.Vector({
              url: '...',
              format: new ol.format.GeoJSON()
            });

            var vectorLayer_Swimmpool = new ol.layer.Vector({
              source: swimmpoolLayer
            });

            var vectorLayer_Parking = new ol.layer.Vector({
              source: parkingLayer
            });



            var view = new ol.View({ //paramètres de la map
              center: [0, 0],
              minZoom: 11,
              maxZoom: 19,
              zoom: 13
            });

            //Map

            var map = new ol.Map({
              layers: [new ol.layer.Group({
                title: 'Fonds de carte',
                layers: [
                  new ol.layer.Tile({
                  title: 'Layer1',
                  source: layer1,
                  type: 'base'
                  }),
                  new ol.layer.Tile({
                  title: 'Layer2',
                  source: layer2,
                  type: 'base',
                  visible: false
                  })
                ]
            }),
            new ol.layer.Group({
              title: 'Surcouche',
              layers: [
                new ol.layer.Tile({
                  title: 'Layer3',
                  source: layer3,
                  format: new ol.format.WFS(), //crée une check box
                  visible: false
                })
              ]
            }),
          ],
              target: 'map',
              view: view
            });

          var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
          map.addControl(sidebar);

          map.addControl(new ol.control.LayerSwitcher());

          $('#swimmpool').on('change', function() {
            var isChecked = $(this).is(':checked');
            if (isChecked) {
              map.addControl(vectorLayer_Swimmpool);
              vectorLayer_SwimmPool.setStyle(style_swimmpool);

            var element = document.getElementById('popup');

          var popup = new ol.Overlay({
              element: element,
              autoPan: true,
              offset: [0, -30]
          });

          map.addOverlay(popup);

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

          closer.onclick = function() {
                popup.setPosition(undefined);
                closer.blur();
                return false;
          };

            map.on('click', function(evt){
                var feature = map.forEachFeatureAtPixel(evt.pixel,
                  function(feature) {
                    return feature;
                  });
                  if (feature) {
                    var geometry = feature.getGeometry();
                    var coord = geometry.getCoordinates();

                    if(feature.get('name')!=null) {
                      var content = '<center><h2>' + feature.get('name') + '</h2></center>' + '<br>';
                    } else {
                      var content = '<h5>' + 'Aucune information' + '</h5>';
                    }

                    if(feature.get('addr:street')!=null) {
                      content += '<h5>' + '<i>Adresse : </i>' + feature.get('addr:street') + '</h5>';
                    }

                    if(feature.get('phone')!=null) {
                      content += '<h5>' + '<i>Numéro de téléphone : </i>' + feature.get('phone') + '</h5>';
                    }

                    if(feature.get('website')!=null) {
                      content += '<h5>' + '<i>Site internet : </i>' + '</h5>' + '<p>' + feature.get('website') + '</p>';
                    }

                    content_element.innerHTML = content;
                    popup.setPosition(coord);
                  }
            });
            } else {
              map.removeControl(vectorLayer_Swimmpool);
            }
          });

          var markers = function style(feature, resolution) {
              if (feature.get('PLACES') == null) {
                return parknoir;

              } else if(feature.get('PLACES') <= feature.get('CAPACITE') * 0.05) {
                return parkrouge;

              } else if(feature.get('PLACES') <= feature.get('CAPACITE') * 0.15){
                return parkorange;

              } else if(feature.get('PLACES') > feature.get('CAPACITE') * 0.15) {
                return parkvert;
              }
          }

          $('#parking').on('change', function() {
            var isChecked = $(this).is(':checked');
            if (isChecked) {
              map.addControl(vectorLayer_Parking);
              vectorLayer_Parking.setStyle(markers);

            var element = document.getElementById('popup');

            var popup = new ol.Overlay({
                element: element,
                autoPan: true,
                offset: [0, -30]
            });

            map.addOverlay(popup);

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

            closer.onclick = function() {
                    popup.setPosition(undefined);
                    closer.blur();
                    return false;
                };

            map.on('click', function(evt){
                var feature = map.forEachFeatureAtPixel(evt.pixel,
                  function(feature) {
                    return feature;
                  });
                  if (feature) {
                    var geometry = feature.getGeometry();
                    var coord = geometry.getCoordinates();

                    if(feature.get('NOM')!=null) {
                      var content = '<center><h2>' + feature.get('NOM') + '</h2></center>' + '<br>';
                    }

                    if(feature.get('ADRESSE')!=null) {
                      content += '<h5>' + '<i>Adresse : </i>' + feature.get('ADRESSE') + '</h5>';
                    }

                    if(feature.get('CAPACITE')!=null) {
                      content += '<h5>' + '<i>Capacité : </i>' + feature.get('CAPACITE') + '</h5>';
                    }

                    if(feature.get('PLACES')!=null) {
                      content += '<h5>' + '<i>Places disponibles : </i>' + feature.get('PLACES') + '<h5>';
                    }

                    content_element.innerHTML = content;
                    popup.setPosition(coord);
                }
            });
            } else {
              map.removeControl(vectorLayer_Parking);
            }
          });

          map.on('pointermove', function(e) {
              if (e.dragging) {
                return;
              };

              var pixel = map.getEventPixel(e.originalEvent);
              var hit = map.hasFeatureAtPixel(pixel);

              map.getViewport().style.cursor = hit ? 'pointer' : '';
          });

          </script>

    </body>
</html>

Answer 1

問題是您要更改同一div的html內容。 第二次設置content_element.innerHTML="content"您將覆蓋第一次設置的內容。 如果您在上面注意到，您已經在上面使用了+= ，因為它不會覆蓋內容，而是添加了內容。 我通過在<div id="popup-content></div>下添加另一個div來解決同一問題，將其命名為<div id="popup-2"></div>然后可以發送第二個因此，如果未選中第一個復選框，則第一個div設置為空content_element.innerHTML="";第二個div則設置為空content_element2.innerHTML="";但是，如果它們都具有信息然后一切都會出現。

至於評論中的問題，我在復選框上使用了切換功能，我相信我向您展示了另一個問題。

document.getElementById("parcel").addEventListener("click", function(){
if(!toggleparcels){
map.addLayer(layerWFS)
} else {
map.removeLayer(layerWFS)
}
toggleparcels=!toggleparcels
});
window.toggleparcels=true;

然后，代替單獨的單擊函數，我為不同的層返回不同的結果。

map.on('click', function(evt){
var feature = map.forEachFeatureAtPixel(evt.pixel,
  function(feature, layer) {
      if (layer == ssbores || layer == ssdischarge || layer == ssfacility) {
        return feature;
      }
   });
      var feature2 = map.forEachFeatureAtPixel(evt.pixel,
      function(feature2, layer2){
      if (layer2===meters) {
        return feature2;
      }
});

從那里開始，所有問題都是if else語句， if(feature)或if(feature2)等。

OpenLayers 4-同時顯示多個GeoJSON文件中的功能

問題描述

1 個解決方案

解決方案1
0 已采納 2018-05-14 15:23:08

OpenLayers 4-同時顯示多個GeoJSON文件中的功能

問題描述

1 個解決方案

解決方案1 0 已采納 2018-05-14 15:23:08

解決方案1
0 已采納 2018-05-14 15:23:08