Как получить на Openlayers 6 множество функций? - PullRequest
0 голосов
/ 01 августа 2020

Я хочу получить набор функций, которые я мог бы добавить на карту с помощью WFS. Я размещаю функции на своем компьютере (GeoServer). Нет проблем с отображением объектов на карте, но я не могу дотянуться до объектов слоя. Я намереваюсь получить набор функций и заполнить ComboBox этими функциями.

Вот мой код:

import 'ol/ol.css';
import {Map, View} from 'ol';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import {Stroke, Style} from 'ol/style';
import WFS from 'ol/format/WFS';


const lyrOSM = new TileLayer({
  source: new OSM()
});

const vectorSource = new VectorSource();

const lyrNeighborhood = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});

// generate a GetFeature request
const featureRequest = (layer) => {
  return new WFS().writeGetFeature({
    srsName: 'EPSG:3857',
    featureNS: 'bugra',
    featurePrefix: 'Bugra',
    featureTypes: [layer],
    outputFormat: 'application/json',
  });
};

// then post the request and add the received features to a layer
fetch('http://localhost:8080/geoserver/Bugra/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest("ABS_MAHALLE_M"))
}).then(function(response) {
  return response.json();
}).then(function(json) {
  const features = new GeoJSON().readFeatures(json);
  vectorSource.addFeatures(features);
  map.getView().fit(vectorSource.getExtent());
});

const view = new View({
  center: [0, 0],
  zoom: 1,
});

const map = new Map({
  target: 'map',
  layers: [lyrOSM, lyrNeighborhood],
  view: view
});

const features = vectorSource.forEachFeature((feature) => {
  console.log(feature);
});

console.log(features);

Последняя часть кода возвращает undefined

const features = vectorSource.forEachFeature((feature) => {
  console.log(feature);
});

console.log(features);

Также это не работает:

lyrNeighborhood.getSource().forEachFeature((feature) => {
  console.log(feature);
});

1 Ответ

0 голосов
/ 01 августа 2020

Fetch похож на любой другой асинхронный метод, например

let message = 'I have no features';
setTimeout(function(){message = 'I have some features';}, 5000);
console.log(message);

Консоль покажет значение сообщения, когда вы установите тайм-аут, а не когда он закончится.

...