Більше

Створіть і покажіть векторний шар із Geoserver за допомогою Openlayers3


Здається, перехід від OL2 до OL3 буде важчим, ніж я думав. Існують значні відмінності, і підтримка в Інтернеті все ще обмежена (щодо прикладів тощо)

Я намагаюся зробити щось порівняно просто ... для відображення шару WFS на моїй карті за допомогою OpenLayers3. Я знайшов цей приклад і намагався змінити його відповідно до своїх потреб.

Він представляє 3 різні способи створення векторного шару з геосервера, і я використав останній (формат JSONP). Це означає, що мені довелося ввімкнути JSONP в геосервері, як описано тут.

Коли я намагаюся побачити карту, я отримую порожню сторінку з помилкою:

Uncaught TypeError: undefined не є функцією

у рядку 82, який:

стратегія: ol.loadingstrategy.tile (новий ol.tilegrid.XYZ ({

Якщо я зміню цей рядок на:

стратегія: ol.loadingstrategy.box

тоді я бачу шар карти (але не векторний шар), і я отримую цю помилку:

XMLHttpRequest не може завантажити http: // localhost: 8080 / geoserver / wfs? Service = WFS & version = 1.1.0 & request = GetFe… 4558475.055843057% 2C2678334.3618555046% 2C4592871.718571385% 2CEPSG% 3A900913. На запитаному ресурсі немає заголовка 'Access-Control-Allow-Origin'. Таким чином, вихідне значення "null" не має доступу.

Це мій код у функції init ()

функція init () {var center = ol.proj.transform ([23.709719,37.973333], 'EPSG: 4326', 'EPSG: 900913'); var view = new ol.View ({center: center, zoom: 12,}); var newLayer = new ol.layer.Tile ({джерело: new ol.source.OSM ()}); // Шар WFS із геосервера loadFeatures = функція (відповідь) {formatWFS = new ol.format.WFS (), sourceVector.addFeatures (formatWFS.readFeatures (відповідь)); }; sourceVector = new ol.source.Vector ({завантажувач: функція (екстент) {$ .ajax ('http: // localhost: 8080 / geoserver / wfs', {type: 'GET', data: {service: 'WFS' , версія: '1.1.0', запит: 'GetFeature', ім'я типу: 'dSpatialAnalysis: categoriesdata', ім'я srsname: 'EPSG: 900913', outputFormat: 'application / json', bbox: exte.join (',') + ', EPSG: 900913'},}). Зроблено (loadFeatures);}, стратегія: ol.loadingstrategy.bbox}); layerVector = new ol.layer.Vector ({source: sourceVector, style: new ol.style.Style ({stroke: new ol.style.Stroke ({color: 'rgba (0, 0, 255, 1.0)', ширина : 2})})}); map = new ol.Map ({target: 'map', renderer: 'canvas', view: view, layer: [newLayer, layerVector],});

}

Я завантажив бібліотеку і називаю її локально:

   

РЕДАГУВАТИ

Видалення порту з URL-адреси робить запит коректним, і я бачу у Firebug відповідь. Але у мене все ще є проблеми з відображенням точок на карті.


Про проблему міждоменних сценаріїв, як @iant, підказує, що потрібно встановити проксі-сервер. Видалення порту просто змусить його працювати локально або принаймні працювати, коли ваші http-запити виконуються з того самого домену та порту.

Тепер щодо вашої другої проблеми, я думаю, це пов’язано з проекцією, яку ви використовуєте. Наскільки мені відомоновий ol.source.OSM ()прогнозується вEPSG: 3857тому я б рекомендував звернути до цього кожну проекцію, яку ви пройдете, і перевірити ще раз


Ось так мені вдалося це все. Як @iant та @pavlos запропонували, я використав проксі:

var url = "http: // localhost: 8080 / geoserver / wfs? & service = wfs & version = 1.1.0 & request = GetFeature & typeNames = dSpatialAnalysis: categoriesdata"; var vector_layer = new ol.layer.Vector ({title: 'ім'я_слою', джерело: new ol.source.Vector ({url: '/cgi-bin/proxy.cgi?url='+ encodeURIComponent (url), format: новий ol.format.WFS ({})}), стиль: iconStyle});


Перегляньте відео: OpenLayers Add Vector Layer to Web Map (Жовтень 2021).