Versuchen, radius des kreises mit html 5 bereich slider, aber es nicht entfernen ersten kreis schicht aber map.removeLayer funktioniert nicht ich getan dies vor mit openlayer 2 aber es funktioniert nicht mit openlayer 3 Ich habe den Code hinzugefügt.ändern openlayer 3 kreis radius mit html 5 bereich slider
3 unten offenen Schicht gleichen benötigen, ist der Code
IMP - Erforderlich Bereich des Schiebers von 1 Meilen bis 5 Meilen
var features = [];
var radius = $('#range').val();
var longitude = 400000;
var latitude = 300000;
var point1 = new ol.Feature(
new ol.geom.Point([400000, 400000])
);
//console.log(point1);
//alert(radius);
//var point1 = new ol.geom.Point(400000,400000);
var circle = new ol.geom.Circle([longitude, latitude], radius);
features.push(new ol.Feature({
geometry: circle
}));
var circleSource = new ol.source.Vector({
features: features
});
var layer = new ol.layer.Vector({
source: circleSource,
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})]
});
// create map
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [400000, 300000],
zoom: 2
})
});
map.addLayer(layer);
function updateTextInput(val) {
document.getElementById('range').value=val;
radius = $("#range").val();
console.log(radius);
map.removeLayer(layer);
// increaseRadius(30000);
var features = [];
//var radius = 100000;
var longitude = 400000;
var latitude = 300000;
var point1 = new ol.Feature(
new ol.geom.Point([400000, 400000])
);
//alert(radius);
//var point1 = new ol.geom.Point(400000,400000);
var circle = new ol.geom.Circle([longitude, latitude], radius);
features.push(new ol.Feature({
geometry: circle
}));
var circleSource = new ol.source.Vector({
features: features
});
var layer = new ol.layer.Vector({
source: circleSource,
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})]
});
map.addLayer(layer);
}
html, body {
height:100%;
width: 100%;
padding:5px;
margin:0px;
}
#map {
height:90%;
width: 95%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<div>
<input type="range" class="slider" name="rangeInput" min="1" max="5" onchange="updateTextInput(this.value);">
<input type="text" id="range" value="1">
</div>
<div id="map"></div>
Vielen Dank. Can u plz schlägt Ihnen vor, den Wert für die Schieberegler auf 1 Meilen und den Maximalwert auf 5 Meilen zu setzen. – Sagar
Schiebereglerwerte in Meilen – Sagar