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

如您所见，我了解到，只要您将其指定为“源”，就可以在地图后立即加载“向量源”，因为它可以容纳显示在地图上的所有“向量”。

这是我用来生成圆（ source ）的代码 （我在getPointResolution对其进行了调整，因为OP犯了一个错误）：

  //code from https://stackoverflow.com/a/28299599
  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);
  }

问题

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

加载第二个圆圈看起来比上一个更加不透明。 将地图移动到上一个圆时，它也更加不透明。

随着每个添加的圆， 所有显示的圆的表观不透明度都会增加。

在每一个圆生成中运行vectorLayer.getOpacity()导致1 ，这显然是半透明的，每个新圆变得越来越不透明。

摘要

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

OpenLayers是否有可能在每个新圈子中重画所有以前的圈子？

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

题

我希望每个圆在绘制新圆后都保持不变。 默认的不透明度和颜色很好。

难道我做错了什么？

这是一个小提琴作为示例-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);
}