OpenLayers 添加具有相同 vectorSource 的圆形特征会增加所有的不透明度

Question

背景

规格

OpenLayers 4.4.1
OSM

我是 OpenLayers 的新手，之前从未使用过矢量（主要是因为我发现我使用的是 OpenLayers 版本 1，因此不得不重新学习所有内容）。

我的应用程序将圆圈添加到与位置相关的地图，该位置具有指示位置精度的特定半径。

在它的操作中，多个圆在不同的时间被添加到地图上。

这是我加载地图的代码：

var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'mapdiv',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }),
    view: new ol.View({
      //center: [0, 0],
      zoom: 16
    })
  });

  //this is where all map 'features' (circles) are stored
  var vectorSource = new ol.source.Vector({
   projection: 'EPSG:4326'
  });

如您所见，我在地图后立即加载 'vector source'，因为我知道它包含地图上显示的所有 'vectors'，只要您将其指定为 'source'.

这是我用来生成圆圈的代码 (source)（我在 getPointResolution 处对其进行了调整，因为 OP 出错了）：

  //code from 
  function addCircle(map, vectorSource, radius) {
    var view = map.getView();
    var projection = view.getProjection();
    var resolutionAtEquator = view.getResolution();
    var center = view.getCenter();
    var pointResolution = ol.proj.getPointResolution(projection, resolutionAtEquator, center);
    var resolutionFactor = resolutionAtEquator/pointResolution;
    var radius = (radius / ol.proj.METERS_PER_UNIT.m) * resolutionFactor;


    var circle = new ol.geom.Circle(center, radius);
    var circleFeature = new ol.Feature(circle);

    // vector layer
    vectorSource.addFeature(circleFeature);
    var vectorLayer = new ol.layer.Vector({
     source: vectorSource
    });

    map.addLayer(vectorLayer);
  }

问题

正常加载一个圆，在指定位置添加一个具有指定半径的蓝色描边不透明圆。

Loading a second circle appears more opaque than the last. Moving the map to the previous circle, it is also more opaque.

With each added circle, the apparent opacity increases for all displayed circles.

运行 vectorLayer.getOpacity() 在每个圆圈生成中导致 1，当显然圆圈是半透明时，随着每个新圆圈变得越来越不透明。

总结

环顾四周，似乎开发人员经常会一遍又一遍地重新加载同一个圆圈，直到许多圆圈彼此堆叠在一起。对我来说似乎也是如此，除了我已经三次检查我只运行 addCircle() 一次并且圆圈的位置与上一次不同。

OpenLayers 是否有可能用每个新圆重新绘制所有以前的圆？

也许这与 getOpacity 无关，但与 color 作为 rgba() 组合有关...

问题

我希望每个圆圈在绘制新圆圈后都保持不变。默认的不透明度和颜色就可以了。

我是不是做错了什么？

这里有一个 fiddle 作为例子 - https://jsfiddle.net/f5zrLt20/5/

Answer 1

在定义vectorSource时定义图层：

var layer = null;

//this is where all map 'features' (circles) are stored
var vectorSource = new ol.source.Vector({
  projection: 'EPSG:4326'
});

并在创建新圈子时检查它是否存在：

// If layer is not yet set, create new layer and add it to map
if (!layer) {
  vectorSource.addFeature(circleFeature);
  layer = new ol.layer.Vector({
    source: vectorSource
  });
  map.addLayer(layer);
}
//Otherwise, just add feature to the source
else {
  layer.getSource().addFeature(circleFeature);
}

OpenLayers 添加具有相同 vectorSource 的圆形特征会增加所有的不透明度

OpenLayers adding circle feature with same vectorSource increases opacity of all

javascript

vector-graphics

openlayers

openstreetmap

openlayers-3

背景

问题

总结

问题