如何在開層中使用滑塊更改圓半徑

Question

需要從滑塊更改圓半徑。半徑是變化的，但圓圈不變則保持不變。

請找到下面的代碼。

options = { 
 
    div: "map", 
 
    zoom: 2, 
 
    center: [0, 0], 
 
    layers: [ 
 
     new OpenLayers.Layer.OSM() 
 
    ] 
 
}; 
 
map = new OpenLayers.Map(options); 
 
vector = new OpenLayers.Layer.Vector(); 
 
map.addLayer(vector); 
 

 

 
var point1 = new OpenLayers.Geometry.Point(0,0); 
 
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000); 
 
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000); 
 
var radius = $("#amount").val(); 
 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0); 
 
    var featurecircle = new OpenLayers.Feature.Vector(mycircle); 
 
     
 

 

 
// var selected_polygon_style = { 
 
//  strokeWidth: 5, 
 
//  strokeColor: '#ff0000' 
 
//  // add more styling key/value pairs as your need 
 
// }; 
 

 
// featurecircle.style = selected_polygon_style; 
 

 
marker1 = new OpenLayers.Feature.Vector(point1, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1, 
 
}); 
 
marker1.style = { display: 'none' }; 
 

 
marker2 = new OpenLayers.Feature.Vector(point2, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1 
 
}); 
 

 
marker3 = new OpenLayers.Feature.Vector(point3, null, { 
 
    externalGraphic: "marker.png", 
 
    graphicWidth: 32, 
 
    graphicHeight: 32, 
 
    fillOpacity: 1 
 
}); 
 
vector.addFeatures([marker1, marker2, marker3, featurecircle]); 
 

 

 

 
$("#slider-range-max").slider({ 
 
     range: "max", 
 
     min: 1000000, 
 
     max: 3000000, 
 
     value: 1000000, 
 
     slide: function(event, ui) { 
 
     $("#amount").val(ui.value); 
 
     radius = $("#amount").val(); 
 

 
     
 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon 
 
(
 
    point2, 
 
    radius, 
 
    40, 
 
    0 
 
); 
 

 
var featurecircle = new OpenLayers.Feature.Vector(mycircle); 
 

 
vector.removeFeatures(featurecircle); 
 
vector.addFeatures(featurecircle); 
 
     console.log(radius); 
 

 
     } 
 
    }); 
 
    $("#amount").val($("#slider-range-max").slider("value")); 
 
$(radius).val($("#slider-range-max").slider("value"));

html, body { 
 
    height:100%; 
 
    width: 100%; 
 
    padding:5px; 
 
    margin:0px; 
 
} 
 
#map { 
 
    height:90%; 
 
    width: 95%; 
 
}

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<link href="http://openlayers.org/en/v3.16.0/css/ol.css" rel="stylesheet"/> 
 
<script src="http://openlayers.org/api/OpenLayers.js"></script> 
 

 

 
<p> 
 
    <label for="amount">Minimum number</label> 
 
    <input type="text" id="amount" value="1000000" style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 
<div id="slider-range-max"></div> 
 
<div id="map"></div>

options = { 
div: "map", 
zoom: 2, 
center: [0, 0], 
layers: [ 
    new OpenLayers.Layer.OSM() 
] 
}; 
map = new OpenLayers.Map(options); 
vector = new OpenLayers.Layer.Vector(); 
map.addLayer(vector); 


var point1 = new OpenLayers.Geometry.Point(0,0); 
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000); 
var radius = $("#amount").val(); 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon 
(
    point2, 
    radius, 
    40, 
    0 
); 

var featurecircle = new OpenLayers.Feature.Vector(mycircle); 

marker1 = new OpenLayers.Feature.Vector(point1, null, { 
    externalGraphic: "marker.png", 
    graphicWidth: 32, 
    graphicHeight: 32, 
    fillOpacity: 1 
}); 

marker2 = new OpenLayers.Feature.Vector(point2, null, { 
    externalGraphic: "marker.png", 
    graphicWidth: 32, 
    graphicHeight: 32, 
    fillOpacity: 1 
}); 

vector.addFeatures([marker1, marker2, featurecircle]); 

$("#slider-range-max").slider({ 
     range: "max", 
     min: 1000000, 
     max: 3000000, 
     value: 1000000, 
     slide: function(event, ui) { 
     $("#amount").val(ui.value); 
     radius = $("#amount").val(); 
     console.log(radius); 
     } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
radius = $("#amount").val(); 

Answer 1

您需要刪除的圈子功能，然後重新添加到矢量圖層。

嘗試添加幻燈片功能

vector.removeFeatures([featurecircle]); 
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon 
(
    point2, 
    radius, 
    40, 
    0 
); 

featurecircle = new OpenLayers.Feature.Vector(mycircle); 
vector.addFeatures([featurecircle]);