使用html 5範圍滑塊更改開放圖層3的圓半徑

Question

嘗試更改使用html 5範圍滑塊的圓的半徑，但不刪除第1個圓形圖層，但map.removeLayer不工作我使用了openlayer 2完成了這個befor，但它不能與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

你不如果你想修改你的圓的半徑，你不需要移除圖層並添加一個新圖層，你可以簡化y使用：

yourCircle.setRadius(yourNewRadius); 

，並確保您使用的是最新版本的OL3，因爲這個功能仍然處於試驗階段