Блог

Главная - Вопросы по программированию - Отображение слоя WFS с Геосервером и открытыми слоями 6

Отображение слоя WFS с Геосервером и открытыми слоями 6

#openlayers #geoserver

Вопрос:

я пытаюсь загрузить и отобразить слой wfs с геосервера для отображения на базовой карте

Это прекрасно работает, когда я использую этот код, предоставленный страницей примеров openlayers:

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

const vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      'https://ahocevar.com/geoserver/wfs?service=WFSamp;'  
      'version=1.1.0amp;request=GetFeatureamp;typename=osm:water_areasamp;'  
      'outputFormat=application/jsonamp;srsname=EPSG:3857amp;'  
      'bbox='  
      extent.join(',')  
      ',EPSG:3857'
    );
  },
  strategy: bboxStrategy,
});

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

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),vector
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

Проблема в том, что когда я пытаюсь получить слой с моего геосервера (например, topp:население), это не работает. Например, когда я пишу:

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

const vectorSource = new SourceVector({
  format: new GeoJSON(),
  url: function(extent) {
    return 'http://localhost:8081/geoserver/ows?service=WFSamp;'  
        'version=1.1.0amp;request=GetFeatureamp;typeName=topp:populationamp;'  
        'maxfeatures=50amp;outputformat=jsonamp;srsname=EPSG:4326amp;'  
        'bbox='   extent.join(',')   ',EPSG:4326';
  },
  strategy: bboxStrategy,
});

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

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),vector
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

Мой вопрос в том, как заставить это работать

Комментарии:

1. какие ошибки вы видите? есть ли какой-то ответ? если да, то в чем дело? что говорится в файле журнала геосервера?

2. Вы указываете EPSG:4326 для поля bbox, но ваше представление совпадает с примером EPSG:3857

3. когда я проверяю результат в chrome, появляется сообщение : «Убедитесь, что значения заголовка ответа CORS являются допустимыми».

4. Вы, Geosever, должны внедрить политики CORS, чтобы разрешить приложениям JavaScript за пределами вашего домена использовать GeoServer. docs.geoserver.org/latest/en/user/production/…

Метки: