Open openlayer 3円半径html 5範囲スライダーを使用

Question

html 5範囲スライダーを使用して円の半径を変更しようとしましたが、第1サークルレイヤーを削除していませんでしたがmap.removeLayerが機能しませんopenlayer 2を使用していますが、 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スタイルを変更することができますが、OL3の最新バージョンを使用していることを確認してください。

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

と、この機能はまだ実験