Openlayers

Question

我正在对地图进行编程，并根据 GeoJSON 文件在其上放置标记。我的标记以良好的坐标很好地显示在地图上，现在我想实现一个侧边菜单。我创建了一个带有复选框的侧边菜单，我希望标记仅在我单击关联的复选框时出现。

我的代码有两部分，第一部分包含导入、div 和 sidemenu（以及一部分），第二部分包含显示地图和标记（在标记中）所需的所有 OpenLayers 代码。

我该怎么做？我找到了这段代码：

function verifyCheckBoxes(source){
    document.getElementById('button-checkbox-'+source).checked = false;
}

但是我如何才能选择复选框信息以便在我的标记中使用这些信息？

我有这个代码：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Map</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="sidebar/css/ol3-sidebar.css" />
      <script src="sidebar/js/ol3-sidebar.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
  </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="piscine" name="piscine" value="piscine">
                <label for="subscribeNews">Piscines</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>

            //Fonds de carte

            var layer1 = new ol.source.TileWMS({
              url: '...',
              params: {'LAYERS': '...', 'FORMAT': 'image/png'},
            });

            //other layers

            //Pictogrammes

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

            //Marqueurs

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

            var vectorLayer = new ol.layer.Vector({
              source: sourceLayer
            });

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

            //Map

            var map = new ol.Map({
              layers: [new ol.layer.Group({
                title: 'Menu1',
                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: 'Menu2',
              layers: [
                new ol.layer.Tile({
                  title: 'layer3',
                  source: layer3,
                  format: new ol.format.WFS(),
                  visible: false
                })
              ]
            }),
          ],
              target: 'map',
              view: view
            });

          map.addControl(vectorLayer);

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

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

          var markers = function style(feature, resolution) {
              if (feature.get('name')!=null) {
                return piscine;
              } else {
                return null;
              }
          }

        vectorLayer.setStyle(markers);

        // Popup

        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>' + 'No informations' + '</h5>';
                  }

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

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

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

                  content_element.innerHTML = content;
                  popup.setPosition(coord);
              }
          });

          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

公平地说，这类问题有很多例子。我有 fiddle 类似的东西，但我 adding/removing 底图

而不是矢量图层

$('#customCheck1').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmBasic)
  } else {
    map.removeLayer(osmBasic);
  }
})

这里是fiddle

Fiddle

Openlayers - 边栏中的复选框事件

Openlayers - Checkbox events in Sidebar

html

javascript

checkbox

side-menu