javascript - 停止在 openlayers 中覆盖特征

Question

我有一个矢量图层，我正在向它添加多边形几何的多个特征。向图层添加功能的代码如下所述：

        let recentPointStyle = new Style({
            stroke: new Stroke({
                color: '#1c568f',
            }),
            fill: new Fill({
                color: 'rgba(28, 86, 143, 0.5)'
            })
        });

        let pointStyle = new Style({
            fill: new Fill({
                color: 'rgba(124, 252, 0, 0.5)'
            })
        });

        let feature = new Feature({
            geometry: new Polygon([bounds]),
        });

        feature.setStyle(recentPointStyle);

        let allFeatures = [feature];

        let previousBounds = [...this.props.areaVisited];

        for (let i = 0; i < previousBounds.length; i++) {
            let currBound = previousBounds[i];

            let currFeature = new Feature({
                geometry: new Polygon([currBound]),
            });

            currFeature.setStyle(pointStyle);

            allFeatures.push(currFeature);
        }

        previousBounds.push(bounds);

        this.props.dispatch(updateVisitedArea(previousBounds));

        vectorLayer.setSource(new VectorSource({
            features: allFeatures,
            wrapX: false
        }));

现在这段代码工作得非常好，但是当用户回到同一个区域时，再次绘制该特征，它变得越来越暗，并且另一层的内容不可见。那么我怎样才能阻止这种情况并保持图层的不透明度呢？

我尝试向图层添加多个多边形而不是多个特征。但同样的结果即将到来。这是更新的代码。

               let recentPointStyle = new Style({
                    stroke: new Stroke({
                        color: '#1c568f',
                    }),
                    fill: new Fill({
                        color: 'rgba(28, 86, 143, 0.5)'
                    })
                });

                let pointStyle = new Style({
                    fill: new Fill({
                        color: 'rgba(124, 252, 0, 0.5)'
                    })
                });

                let allPolygons = [];
                let previousBounds =[...this.props.areaVisited];

                for(let i = 0; i < previousBounds.length; i++) {
                    let currBound = previousBounds[i];

                    allPolygons.push(new Polygon([currBound]));
                }

                let feature = new Feature({
                    geometry: new Polygon([bounds]),
                });

                feature.setStyle(recentPointStyle);

                let allFeatures = [feature];

                let currFeature = new Feature({
                    geometry: new MultiPolygon(allPolygons),
                });

                currFeature.setStyle(pointStyle);

                allFeatures.push(currFeature);

                if(!previousBounds.includes(bounds)) {
                    previousBounds.push(bounds);
                }

                this.props.dispatch(updateVisitedArea(previousBounds));
                
                vectorLayer.setSource(new VectorSource({
                    features: allFeatures,
                    wrapX: false
                }));

标签： javascriptreactjsopenlayersopenlayers-6