Javascript OpenLayers重新定位后填充不透明度增加

Question

我创建了一个测试项目，在这里我试图学习如何使用OpenLayers。我尝试对远程地理服务进行获取请求。每当我在地图上重新定位填充的多边形时，不透明度就会增加。因此，我认为多边形相互重叠。在这里，您可以查看我从中获取JSON数据的URL。这是通过本地主机上的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";

这是指向我的codeandbox项目的链接。https://codesandbox.io/embed/vector-wfs-7thkt?fontsize=14&hidenavigation=1&theme=dark

如果我更改了Web服务URL，问题就消失了，一切正常。但关键是要使其与该URL一起使用。如果使用标准URL遇到CORS问题，则可以通过以下链接在Chrome中安装CORS扩展程序：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

该服务在每次调用时都为同一功能返回不同的功能ID，因此bbox策略将无法正常工作，并且功能正在重复使用

看来OBJ_ID属性唯一地标识功能，因此您需要一个自定义加载程序才能将功能ID设置为OBJ_ID