Question

尝试使用html 5范围滑块更改圆的半径但是它没有删除第一个圆形图层但是map.removeLayer无法正常工作我使用openlayer 2完成了这个但是它没有使用openlayer 3我添加了代码。

在下面的开放层3中需要相同的是代码

IMP - 从1英里到5英里的所需滑块范围

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如果要修改圆的半径，则不必删除图层并添加新图层，只需使用：

yourCircle.setRadius(yourNewRadius);

并确保您使用的是最新版本的OL3，因为此功能仍处于试验阶段

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

2 个答案: