0

I have a SQLServer database containing geospatial data, have created layers from those data in GEOServer and it works fine, I'm working on a webgis application to allow users select features on the map, so I needed a vector layer and I created one, problem is it won't show up. I tried setting projection and style but it didn't make any difference. Hear is the code:

(Note: Blocks layer which is TileLayer version of the same source works fine, and the ajax actually returns data, but there is no layer on the map enter image description here )

index.html:

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <div>
        <span id="status">&nbsp;0 selected features</span>
    </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

and javascript:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {click, pointerMove, altKeyOnly} from 'ol/events/condition.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Select from 'ol/interaction/Select.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import OSM from 'ol/source/OSM.js';
import VectorSource from 'ol/source/Vector.js';

var layerWFS = new ol.layer.Vector({
    source: new ol.source.Vector({
        loader: function(extent) {
            $.ajax('http://192.168.1.55:7001/geoserver/TR_SQL/ows', {
                type: 'GET',
                data: {
                    service: 'WFS',
                    version: '1.1.0',
                    request: 'GetFeature',
                    typename: 'TR_SQL:GIS_Blocks_Linear',
                    outputFormat: 'application/json'
                }
            }).done(function(response) {
                layerWFS
                .getSource()
                .addFeatures(new ol.format.WFS()
                  .readFeatures(response));
            });
        },
        strategy: ol.loadingstrategy.bbox,
        projection: "EPSG:4326"
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        })
    })
});

var Blocks = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://192.168.1.55:7001/geoserver/TR_SQL/wms',
        params: { 'LAYERS': 'TR_SQL:GIS_Blocks_Linear', 'VERSION': '1.1.1' },
        serverType: 'geoserver',
        projection: 'EPSG:4326'
    })
});

var Stations = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://192.168.1.55:7001/geoserver/TR_SQL/wms',
        params: { 'LAYERS': 'TR_SQL:Stations', 'VERSION': '1.1.1' },
        serverType: 'geoserver',
        projection: 'EPSG:4326'
    })
});

var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
          source: new ol.source.OSM(),
          projection: 'EPSG:4326'
      }),
      layerWFS,
      Stations
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([55, 32]),
        zoom: 5
    })
});

var select = new Select({
    condition: click
});

var changeInteraction = function() {
    if (select !== null) {
        map.addInteraction(select);
        select.on('select', function(e) {
            document.getElementById('status').innerHTML = '&nbsp;' +
                e.target.getFeatures().getLength() +
                ' selected features (last operation selected ' + e.selected.length +
                ' and deselected ' + e.deselected.length + ' features)';
        });
    }
};


/**
 * onchange callback on the select element.
 */
changeInteraction();
  • can you add one of the features that is being returned? most likely issue is that the axis are swapped. – Ian Turton Jan 21 at 8:23
  • @IanTurton do you mean to send a picture of generated map? – Saman Hakimzadeh Abyaneh Jan 21 at 12:03
  • no, one of the elements in the response array – Ian Turton Jan 21 at 12:05
  • @IanTurton I updated the question, the second image shows the first element. – Saman Hakimzadeh Abyaneh Jan 21 at 12:09
2

You are requesting outputFormat: 'application/json' and the output looks like a geojson so I think you need to read it using ol.format.GeoJSON.

Also you have strategy: ol.loadingstrategy.bbox but are not passing bbox in the data, so it should either be strategy: ol.loadingstrategy.all or you would need to set bbox in the data (extent transformed to 'EPSG:4326' and the coordinates supplied in Lat/Lon format).

If you are happy to load all (if only 429 simple features?) the following would be much simpler, OpenLayers will automatically load the url and read the data

source: new ol.source.Vector({
        url: 'http://192.168.1.55:7001/geoserver/TR_SQL/ows' +
                    '?service=WFS' +
                    '&version=1.1.0 +
                    '&request=GetFeature' +
                    '&typename=TR_SQL:GIS_Blocks_Linear' +
                    '&outputFormat=application/json',
        format: new ol.format.GeoJSON()
    }),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.