change openlayer 3 радиус круга с использованием html 5 слайдер диапазона

Question

Попытка изменить радиус круга с помощью html 5 слайдера, но не удаляет слой 1-го круга, но map.removeLayer не работает. Я сделал это для использования openlayer 2, но не работал с openlayer 3 Я добавил код.

Working copy of openlayer 2

Потребность же в открытом слое 3 ниже код

IMP - Необходимый диапазон слайдера от 1 миль до 5 миль

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>

Answer 1

Вы можете просто изменить ol.Feature#setStyle стиль как:

// we change this on input change 
var radius = 10; 
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) { 
    radius = value; 
    feature.setStyle(styleFunction); 
} 

var feature = new ol.Feature(new ol.geom.Point([400000, 400000])); 
feature.setStyle(styleFunction); 

var vectorLayer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
    features: [feature] 
    }) 
}); 

[Demo]

Answer 2

вы дон 't нужно удалить слой и добавить новый, если вы хотите изменить радиус круга, вы можете просто у использование:

yourCircle.setRadius(yourNewRadius); 

и убедитесь, что вы используете последнюю версию Ol3, поскольку эта функция все еще является экспериментальной