Javascript Непрозрачность заполнения OpenLayers увеличивается после изменения положения

Question

Я создал тестовый проект, в котором я пытаюсь научиться работать с OpenLayers. Я пытаюсь сделать запрос на получение удаленного геосервиса. Каждый раз, когда я перемещаю заполненные полигоны на мою карту, прозрачность увеличивается. Так что я думаю, что полигоны расположены друг над другом. Здесь вы можете просмотреть URL-адрес, откуда я получаю свои JSON данные. Это делается на сервере Node JS на локальном хосте, потому что исходная ссылка не поддерживает CORS.

var text =
      "http://localhost:3030/map/https://geoservices.landbouwvlaanderen.be/PUBLIC/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=PUBLIC:LBGEBRPERC2019&srsname=EPSG:3857&outputFormat=application/json&count=1000&bbox=" +
      extent.join(",") +
      ",EPSG:3857";

Это ссылка на мой проект codesandbox. https://codesandbox.io/embed/vector-wfs-7thkt?fontsize=14&hidenavigation=1&theme=dark

Если я изменю URL-адрес веб-службы, проблема исчезнет, ​​и все будет нормально. Но дело в том, чтобы заставить его работать с этим URL. Если у вас возникают проблемы с CORS при использовании стандартного URL, вы можете установить расширение CORS в Chrome по этой ссылке: https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=nl

var text =
      "https://geoservices.landbouwvlaanderen.be/PUBLIC/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=PUBLIC:LBGEBRPERC2019&srsname=EPSG:3857&outputFormat=application/json&count=1000&bbox=" +
      extent.join(",") +
      ",EPSG:3857";

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import GeoJSON from "ol/format/GeoJSON";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { bbox as bboxStrategy } from "ol/loadingstrategy";
import BingMaps from "ol/source/BingMaps";
import VectorSource from "ol/source/Vector";
import { Style, Fill, Stroke } from "ol/style";
import Select from "ol/interaction/Select";

var raster = new TileLayer({
  source: new BingMaps({
    imagerySet: "Aerial",
    key: "AsVf4lj-tiANM5N4_P56DC_oQQM9fjb0lMosBxFtgovzGEgcMnQuqYpeKpX-1KL2"
  })
});

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    var text =
      "http://localhost:3030/map/https://geoservices.landbouwvlaanderen.be/PUBLIC/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=PUBLIC:LBGEBRPERC2019&srsname=EPSG:3857&outputFormat=application/json&count=1000&bbox=" +
      extent.join(",") +
      ",EPSG:3857";

    console.log(text);
    return text;
  },
  strategy: bboxStrategy
});

var vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    fill: new Fill({
      color: "rgba(255,0,0,0.3)"
    }),
    stroke: new Stroke({
      color: "rgba(255,0,0,0.3)"
    })
  })
});

var map = new Map({
  layers: [raster, vector],
  target: document.getElementById("map"),
  view: new View({
    center: [589973.4805179046, 6575521.818939352],
    maxZoom: 19,
    zoom: 15
  })
});
// ref to currently selected interaction

var changeInteraction = function () {
  var select = new Select();
  map.removeInteraction(select);
  map.addInteraction(select);
};

/**
 * onchange callback on the select element.
 */
changeInteraction();

Answer 1

Служба возвращает разные идентификаторы функций для одной и той же функции при каждом вызове, поэтому стратегия bbox не будет работать правильно, и функции будут повторяться

Похоже, что свойство OBJ_ID уникальным образом идентифицирует функции, поэтому вам потребуется пользовательский загрузчик, чтобы установить идентификатор функции в OBJ_ID, например,

     var features = vectorSource.getFormat().readFeatures(xhr.responseText));
     features.forEach(function(feature) {
       feature.setId(feature.get('OBJ_ID'));
     });
     vectorSource.addFeatures(features);