Загрузка векторного слоя в OL3 с и без ajax

Я пытаюсь использовать OL3 для загрузки векторного слоя с геосервера с помощью следующего кода JavaScript.Загрузка векторного слоя в OL3 с и без ajax

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" /> 
<link rel="stylesheet" href="ol3-layerswitcher-master/src/ol3-layerswitcher.css" /> 
</head> 
<body> 
<div id="map" class='map'></div> 
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script> 
<script src="ol3-layerswitcher-master/src/ol3-layerswitcher.js"></script> 
<script> 
var geojasonFormat = new ol.format.GeoJSON(); 

var vectorSource = new ol.source.Vector({ 
    loader: function(extent, resolution, projection) { 
     var url = 'http://bart.nateko.lu.se:8080/geoserver/wfs?&service=wfs&version=1.1.0&request=GetFeature&typeName=Ehsan:nyc_roads&outputFormat=application/json&maxFeatures=100&format_options=callback:loadFeatures'; 
     // use jsonp: false to prevent jQuery from adding the "callback" 
     // parameter to the URL 
     $.ajax({url:url,dataType:'jsonp',jsonp:true}); 
    }, 
    strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({ 
    maxZoom: 19 
    })) 
}); 

window.loadFeatures = function(httpOutPut){ 
    vectorSource.addFeatures(geojsonFormat.readFeatures(response)) 
    }; 


var vectorLayer = new ol.layer.Vector({ 
        title:'road layer', 
        source: vectorSource, 
        style: new ol.style.Style({ 
         stroke: 'rgba(255,255, 255, 1.0)', 
         width: 2 
        }) 
       }); 

var vectorGroup = new ol.layer.Group({ 
    'title':'vector', 
    layers:[vectorLayer]}); 


var map = new ol.Map({ 
    target: document.getElementById('map'), 
    layers:[ 
     new ol.layer.Group({ 
      'title': 'Base maps', 
      layers:[ 
       new ol.layer.Tile({ 
       title: 'base map', 
       type: 'base', 
       source: new ol.source.MapQuest({layer: 'sat'}) 
       }) 
      ], 
     }),vectorGroup 

    ], 
    view: new ol.View({ 
     center: ol.proj.transform([-74, 40.74], 'EPSG:4326', 'EPSG:3857'), 
     zoom: 15 }) 
}); 
/*var extent = vectorLayer.getSource().getExtent(); 
map.getView().fit(extent, map.getSize());*/ 

var layerSwitcher = new ol.control.LayerSwitcher(); 
map.addControl(layerSwitcher); 

</script> 
</body> 
</html>

Я пытался следовать OpenLayers WFS пример с использованием Ajax для загрузки функции в источнике вектора, но он не работает.

Кроме того, мне интересно, есть ли более простое решение для загрузки векторного слоя из геосервера WFS, что-то без AJAX. ol2 кажется более прямым.

источник

2015-09-03 msc87

Привет, там. Какую версию Openlayers вы используете точно? это 3.9.0? – slevin

Ваш обратный вызов

window.loadFeatures = function(httpOutPut){ 
    vectorSource.addFeatures(geojsonFormat.readFeatures(response)) 
    };

Если изменить httpOutPut к response и ответ от сервера является правильным, вероятно, вы должны быть в порядке.

Вы не отправляете размер/bbox на геосервер, чтобы вы могли получать функции вне пределов.

Это текущий способ загрузки данных WFS в ol3. Для освоения было recent change, поэтому OpenLayers 3.9.0 будет содержать упрощенный способ использования WFS и использовать новый пример WFS.

источник

2015-09-06 20:13:07

Привет. Какой из этих примеров является официальным, чтобы получить WFS от Geoserver до OL? Код в вопросе или [это] (http://openlayers.org/en/v3.9.0/examples/vector-wfs.html?q=wfs)? Пример OL меня смущает. Знаете ли вы какие-либо учебники, которые объясняют, что это такое? Спасибо – slevin

@slevin: Вы предоставляете ссылку на официальные примеры OpenLayers (версия 3.9). Код в вопросе сильно вдохновлен официальным примером, как это было в OpenLayers 3.8 и ниже. Так что оба являются официальными примерами, но из разных релизов. –

Загрузка векторного слоя в OL3 с и без ajax

ответ

Смежные вопросы