Anzeigen Verbergen Marker Kreispunkte Openlayers 3

Question

Wie verbergen Marker zeigen (P-Symbol) mit Kreispunkte (so etwas wie point1.distanceTo (Punkt2))

müssen Markierungen zeigen Wenn Marker innerhalb des Kreises eine andere ausblenden kommt (zur Zeit ändernden Kreisradius durch Schieber)

// 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

da Sie einen Punkt verwenden und nicht eine tatsächliche Kreisgeometrie, wie Sie DistanceTo sagte ist wahrscheinlich die Lösung für dieses Problem, Sie ha habe es in Ihrer Update-Funktion hinzuzufügen:

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); 
    } 
}