Display of certain facilities on the OpenLayers 3 map



  • There's a map on the page and 3 checkbox's, there's a layer on the map with two points.

    It is necessary to display a single point at the choice of a chequebox. It's only been possible to hide the entire layer, but how do you hide one object?

    $('#allTeam').change(function() {
      if (!$(this).is(":checked"))
        $(".checkbox").prop("checked", false);
      else
        $(".checkbox").prop("checked", true);
    });
    

    var point_one = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([37.539502, 55.769378])),
    name: "point1"
    });

    var point_two = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([38.539502, 55.669358])),
    name: "point2"
    });

    var pointSource = new ol.source.Vector({
    features: [point_one, point_two]
    });

    var pointLayer = new ol.layer.Vector({
    source: pointSource
    });

    var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
    });

    var map = new ol.Map({
    layers: [rasterLayer],
    target: document.getElementById('map'),
    view: new ol.View({
    projection: 'EPSG:3857',
    center: ol.proj.fromLonLat([37.739502, 55.659368]),
    zoom: 9,
    maxZoom: 16,
    minZoom: 2
    })
    });
    map.addLayer(pointLayer);

    var checkbox = document.getElementById('allTeam');

    checkbox.addEventListener("change", function() {
    var checked = this.checked;
    if (checked !== pointLayer.getVisible()) {
    pointLayer.setVisible(checked);
    }
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
    <ul>
    <li>
    <input type='checkbox' class='checkbox' id='point1' checked/>
    <label for='point1'>point1</label>
    </li>
    <li>
    <input type='checkbox' class='checkbox' id='point2' checked/>
    <label for='point2'>point2</label>
    </li>
    <hr>
    <li>
    <input type='checkbox' class='checkbox' id='allTeam' checked/>
    <label for='allTeam'>Отобразить все</label>
    </li>
    </ul>
    <div id="map" class="map"></div>



  • I've forgotten my question, but I remembered the problem this way:

    var clickItem = document.getElementsByClassName('checkbox'); // получаем все чекбоксы
    for (var i = 0; i < clickItem.length; i++) {  // идем по этим чекбоксам
        clickItem[i].addEventListener("change", function() { 
            var number = this.id;
            var checked = this.checked;
            var routeS = routeSource.getFeatures(); // берем фьючи со слоя
    
        for (var j = 0; j &lt; routeS.length; j++) {  // проходимся по всем фьючам
            if (routeS[j].get('number') === number) { // если номер фьючи равен номеру чекбокса
                if (!checked) {
                    var styleR = [new ol.style.Style({stroke: new ol.style.Stroke({color: [0,0,0,0]})})]; // прозрачность на 0 (возможно можно сделать какой нибудь visible, но я не нашел)
                }
                routeS[j].setStyle(styleR); // применяем стиль
                break;
            };
        };
    
    });
    

    }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2