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

问题

正常加载一个圆圈，在指定半径的指定位置添加蓝色条纹不透明圆圈。

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()组合有关...

问题

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

我做错了吗？

这是一个小提琴作为例子 - 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添加圆形特征会增加所有的不透明度

背景

问题

摘要

问题

1 个答案: