使用圆点openlayers 3显示隐藏标记

Question

How to show hide markers (P icon) using circle points (something like point1.distanceTo(point2))

need to show markers If markers comes inside the circle another hide it (currently changing circle radius through slider)

 // we change this on input change var radius = 10; longitude = 400000; latitude = 300000; var styleFunction = function() { return new ol.style.Style({ image: new ol.style.Circle({ radius: radius, stroke: new ol.style.Stroke({ color: [51, 51, 51], width: 2 }), fill: new ol.style.Fill({ color: [51, 51, 51, .3] }) }) }); }; var update = function(value) { // $('#range').val() = value; radius = value; vectorLayer.setStyle(styleFunction); // $('#range').val(value) // document.getElementById('range').value=value; } var feature = new ol.Feature(new ol.geom.Point([longitude, latitude])); var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature] }), style: styleFunction }); var rasterLayer = new ol.layer.Tile({ source: new ol.source.TileJSON({ url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json', crossOrigin: '' }) }); // icon marker start here var iconFeature5 = new ol.Feature({ geometry: new ol.geom.Point([longitude, latitude]), name: 'Missing Person', population: 4000, rainfall: 500 }); var vectorSource5 = new ol.source.Vector({ features: [iconFeature5] }); var vectorLayer5 = new ol.layer.Vector({ source: vectorSource5 }); var iconStyle5 = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://cloud.githubusercontent.com/assets/41094/2833021/7279fac0-cfcb-11e3-9789-24436486a8b1.png' })) }); iconFeature5.setStyle(iconStyle5); // 2nd marker longitude1 = 100000; latitude1 = 100000; var iconFeature1 = new ol.Feature({ geometry: new ol.geom.Point([longitude1, latitude1]), name: 'Missing Person', population: 4000, rainfall: 500 }); var vectorSource1 = new ol.source.Vector({ features: [iconFeature1] }); var vectorLayer1 = new ol.layer.Vector({ source: vectorSource1 }); iconFeature1.setStyle(iconStyle5); var map = new ol.Map({ layers: [rasterLayer,vectorLayer,vectorLayer5,vectorLayer1], target: document.getElementById('map'), view: new ol.View({ center: [400000, 400000], zoom: 4 }) }); 

 html, body, #map { height: 100%; overflow: hidden; } .input { margin: 5px 0; } 

 <script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script> <div class="input"> <input type="range" id="range" min="10" max="50" onchange="update(this.value)"> <input type="text" id="range" value="10"> </div> <div id="map" class="map"></div> 

Answer 1

Since you are using a Point and not an actual circle geometry, as you said distanceTo is probably the solution for this, you have to add it in your update function :

var wgs84Sphere = new ol.Sphere(6378137);

var update = function(value) {
 // $('#range').val() = value;
  radius = value;
  vectorLayer.setStyle(styleFunction);
  if(wgs84Sphere.haversineDistance(feature.getGeometry().getCoordinates(),iconFeature5.getGeometry().getCoordinates())<=radius){
      vectorLayer5.setVisible(true);
  }
  else{
      vectorLayer5.setVisible(false);
  }
  if(wgs84Sphere.haversineDistance(feature.getGeometry().getCoordinates(),iconFeature1.getGeometry().getCoordinates())<=radius){
      vectorLayer1.setVisible(true);
  }
  else{
      vectorLayer1.setVisible(false);
  }
}