如何在openlayer中使用滑块更改圆半径

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

如何在openlayer中使用滑块更改圆半径

How to change circle radius using slider in openlayer

openlayers