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

Question

我创建了一个测试项目，试图学习如何使用 OpenLayers。我尝试向远程地理服务发出获取请求。每次我在地图上重新定位填充的多边形时，不透明度都会增加。所以我认为多边形是相互叠加的。在这里，您可以查看 URL，我从那里获取 JSON 数据。这是通过本地主机上的 Node JS 服务器完成的，因为原始 link 不支持 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 项目的 link。 https://codesandbox.io/embed/vector-wfs-7thkt?fontsize=14&hidenavigation=1&theme=dark

如果我更改 web 服务 URL 问题就消失了，一切正常。但重点是让它与这个 URL 一起工作。如果您在使用标准 URL 时遇到 CORS 问题，您可以通过 link 在 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，例如

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

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

Javascript OpenLayers fill opacity increases after repositioning

javascript

opacity

openlayers