Search code examples
javascriptopenlayersopacity

Javascript OpenLayers fill opacity increases after repositioning

I have created a test project where i'm trying to learn how to work with OpenLayers. I try to do a get request to a remote geoservice. Every time I reposition the filled polygons on my map get there opacity increased. So I think the polygones are put on top of each other. Here you can view the URL that I from where i get my JSON data. This is done over a Node JS server on localhost beceause the original link doesn't support 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";

This is the link to my codesandbox project. https://codesandbox.io/embed/vector-wfs-7thkt?fontsize=14&hidenavigation=1&theme=dark

If I change the webservice URL the problem is gone and everything behaves normaly. But the point is to get it to work with this URL. If you are experiencing problems with CORS using the standard URL, you can install a CORS extension in Chrome from this link: 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();
Solution

  • The service is returning a different feature id for the same feature at each call, so the bbox strategy won't work correctly and the features are being repeated

    enter image description here

    It looks like the OBJ_ID property uniquely identifies features so you would need a custom loader to set the feature id to OBJ_ID, e.g.

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