Невозможно воссоздать тестовый проект для импорта полигонов WFS - PullRequest
Новая
       18

Невозможно воссоздать тестовый проект для импорта полигонов WFS

0 голосов
/ 03 марта 2020

Я не могу воссоздать пример проекта для автоматического импорта полигонов WFS из веб-службы. Я нашел этот пример проекта на сайте Openlayers: Пример проекта Openlayers

В этом проекте они использовали URL в переменной vectorSource. Это ссылка на сервис WFS. Я добавил несколько операторов console.log, чтобы проверить содержание ссылок и некоторых переменных. Вот прямая ссылка на работающий тестовый проект codeandbox.

В моем тестовом проекте я просто изменил URL-адрес переменной vectorSource на службу WFS, которую я намерен использовать. Но это не работает в моем случае. Я также обновил координаты центральной переменной вида внизу, чтобы он находился внутри моих полигонов. Вот прямая ссылка на мою версию проекта codesandbox.

Я также добавил сюда два файла javascript, если люди не хотят использовать проекты codeandbox и просто хотят просматривать код.

Рабочий проект от openlayers: 

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 { Stroke, Style } from "ol/style";

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    var text =
      "https://ahocevar.com/geoserver/wfs?service=WFS&" +
      "version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
      "outputFormat=application/json&srsname=EPSG:3857&" +
      "bbox=" +
      extent.join(",") +
      ",EPSG:3857";

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

console.log(vectorSource);

var vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: "rgba(0, 0, 255, 1.0)",
      width: 2
    })
  })
});

console.log(vector);

var raster = new TileLayer({
  source: new BingMaps({
    imagerySet: "Aerial",
    key: "BING KEY"
  })
});

var map = new Map({
  layers: [raster, vector],
  target: document.getElementById("map"),
  view: new View({
    center: [-8908887.277395891, 5381918.072437216],
    maxZoom: 19,
    zoom: 12
  })
});

исходный код моей попытки 

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 { Stroke, Style } from "ol/style";

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    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";
    console.log(text);
    return text;
  },
  strategy: bboxStrategy
});

console.log(vectorSource);

var vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: "rgba(0, 0, 255, 1.0)",
      width: 2
    })
  })
});

var raster = new TileLayer({
  source: new BingMaps({
    imagerySet: "Aerial",
    key: "BING KEY"
  })
});

console.log(raster);

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

1 Ответ

0 голосов
/ 04 марта 2020

Проблема заключалась в том, что URL не поддерживает CORS. Чтобы это исправить, я создал прокси-сервер Node: Для получения инструкций перейдите по ссылке.

...