如何使用圆点显示隐藏标记(P图标)(类似于point1.distanceTo(point2))
需要显示标记如果标记位于圆圈内,则另一个隐藏它(当前通过滑块更改圆半径)
// 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>
&#13;
答案 0 :(得分:0)
由于你使用的是Point而不是实际的圆几何,正如你所说distanceTo可能就是这个的解决方案,你必须在更新函数中添加它:
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);
}
}