javascript - 使用html 5范围滑块更改openlayer 3的圆半径

尝试使用html 5范围滑块更改圆角半径，但未移除第一个圆形图层，但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>

最佳答案

您可以像这样更改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]

关于javascript - 使用html 5范围滑块更改openlayer 3的圆半径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38655874/