More

Loading WFS point layer with OpenLayers3?

Loading WFS point layer with OpenLayers3?


I am trying to get a point layer from GeoServer to load in my web app as a WFS. I can get a sample set of polygon data to load, but my points will not. Here is the code I am using for this:

var geojsonFormat = new ol.format.GeoJSON(); var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, projection) { var url = 'http://… ?service=WFS&' + 'version=1.1.0&request=GetFeature&typename=Store:layer&' + 'outputFormat=text/javascript&format_options=callback:loadFeatures' + '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857'; $.ajax({url: url, dataType: 'jsonp', jsonp: true}); }, strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ maxZoom: 19 })) }); window.loadFeatures = function(response) { vectorSource.addFeatures(geojsonFormat.readFeatures(response)); }; var centerlocations = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width: 5 }) }) });

Is there something different that needs to be done for loading point data?


The style you have defined is not applied on points. For point you need to set an imageStyle like this:

new ol.style.Style({ image: new ol.style.Circle({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width: 5 }), radius: 5 }) });

Watch the video: Tethys Training - GeoServer and Web Mapping