javascript - 使用 Openlayers 和 JQuery 使用复选框停用脚本

Question

我希望能够选择是否突出显示多边形。如何激活和停用以下脚本？

     var highlightStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
      color: 'navy',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,165,0,0.5)'
    }),
    text: new ol.style.Text({
      font: '16px Arial',
      fill: new ol.style.Fill({
        color: 'white'
      }),
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 0
      })  ,overflow:true
      ,placement:'point'
      ,backgroundFill: new ol.style.Fill({
        color: 'none'
      })
      ,backgroundStroke: new ol.style.Stroke({
        color: 'none',
        width: 0
      })
      ,padding:[3,3,3,3]
      ,offsetY: -60
    })
  });
 var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: function(feature) {

    highlightStyle.getText().setText(feature.get('text_text'));
      return highlightStyle;

    }
  });
 var highlight;
  var displayFeatureInfo = function(pixel) {

    var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
      return feature;
    });


    if (feature !== highlight) {
      if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
      }
      if (feature) {
        featureOverlay.getSource().addFeature(feature);
      }
      highlight = feature;
    }

  };



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

    var pixel = map.getEventPixel(evt.originalEvent);

    displayFeatureInfo(pixel);
  });

 map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });

我想使用复选框激活它。我试图从中创建一个对象并删除它，但它没有效果。我还在对象中创建了一个方法并将其删除，但它也没有带来预期的结果。

标签： javascriptjqueryopenlayers

Answer 1

只有map.forEachFeatureAtPixel在您的复选框被选中时才调用：

  var style = new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.6)'
    }),
    stroke: new ol.style.Stroke({
      color: '#319FD3',
      width: 1
    }),
    text: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      fill: new ol.style.Fill({
        color: '#000'
      }),
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
      })
    })
  });

  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
      format: new ol.format.GeoJSON()
    }),
    style: function(feature) {
      style.getText().setText(feature.get('name'));
      return style;
    }
  });

  var map = new ol.Map({
    layers: [vectorLayer],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 1
    })
  });

  var highlightStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#f00',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.1)'
    }),
    text: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      fill: new ol.style.Fill({
        color: '#000'
      }),
      stroke: new ol.style.Stroke({
        color: '#f00',
        width: 3
      })
    })
  });

  var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: function(feature) {
      highlightStyle.getText().setText(feature.get('name'));
      return highlightStyle;
    }
  });

  var highlight;
  var displayFeatureInfo = function(pixel) {

    // make feature selection conditional on check box
    var feature;
    if (document.getElementById('myCheckBox').checked) {
      feature = map.forEachFeatureAtPixel(pixel, function(feature) {
        return feature;
      });
    }

    if (feature !== highlight) {
      if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
      }
      if (feature) {
        featureOverlay.getSource().addFeature(feature);
      }
      highlight = feature;
    }

  };

  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });

  map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80%;
}

 <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<div><br><b>Highlight: </b><input id="myCheckBox" type="checkbox"></div>