0

I have successfully made a map that computes points from a WFS consisting of polygons and generates them as markers. The calculation is carried out by turf.js. However, I do not get all the properties for the popups back.

I strongly suspect that I'm missing an "on change function" with "getState === ready". Is that correct? Or do I have another mistake?

Since I get the WFS with fetch (), my recent attempts to "on change function" unfortunately failed.

PS: In addition, the script still has a search function by Viglino

My script:

function elem_id(id) {
    return document.getElementById(id);
}

var fspan = document.createElement('i');
fspan.setAttribute('class', 'fa fa-expand');

var styleCache = {};

var defaultStyle_polygon_1 = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'rgba(51, 204, 51, 0.3)'
    }),
    stroke: new ol.style.Stroke({
        color: 'rgba(0, 51, 0, 1)',
        width: 1
    }),
});

var selectStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0)'
    }),
    stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2
    }),
});


var popup = new ol.Overlay({
    element: document.getElementById('popupDiv')
});

var basemap = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var vectorSourceCentroid = new ol.source.Vector({
    format: new ol.format.GeoJSON()
});
var vectorSourcePolygon = new ol.source.Vector({
    format: new ol.format.GeoJSON()
});

var poly1 = new ol.layer.Vector({
    source: vectorSourcePolygon,
    style: defaultStyle_polygon_1
});


var icon1 = new ol.layer.Vector({
    source: new ol.source.Cluster({
        source: vectorSourceCentroid,
        distance: 30
    }),
    style: function(feature, resolution) {
        var size = feature.get('features').length;

        var style = styleCache[size];
        if (size > 1) {
            style = [new ol.style.Style({
                image: new ol.style.Icon({
                    opacity: 1,
                    scale: 1,
                    src: '/senuvk/natur_gruen/naturschutz/includes/lsg_map_scripte/icons/marker-lsg_eule.png'
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    scale: 1.3,
                    offsetY: -1.7,
                    fill: new ol.style.Fill({
                        color: '#fff'
                    })
                })
            })];
            styleCache[size] = style;
        } else {
            style = [new ol.style.Style({
                image: new ol.style.Icon({
                    opacity: 1,
                    scale: 1,
                    src: '/senuvk/natur_gruen/naturschutz/includes/lsg_map_scripte/icons/marker-lsg_eule.png'
                }),
            })];
        }

        return style;
    }

});

var polygonStyle = [new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'white'
    }),
    fill: new ol.style.Fill({
        color: '#1f6b75'
    })
})];


var map = new ol.Map({
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }).extend([new ol.control.FullScreen({
        label: fspan,
        tipLabel: 'Fullscreen'
    })]),
    target: 'mapDiv',
    layers: [basemap,
        poly1,
        icon1
    ],
    overlays: [popup],
    view: new ol.View({
        center: ol.proj.transform([13.3833, 52.52], 'EPSG:4326', 'EPSG:3857', 'EPSG:25833'),
        zoom: 10
    })
});

fetch('https://fbinter.stadt-berlin.de/fb/wfs/geometry/senstadt/re_schutzgebiete?service=WFS&version=2.0.0&request=GetFeature&typeNames=re_schutzgebiete&outputFormat=application/json&crs=EPSG:25833&Filter=%3CFilter%3E%3CPropertyIsEqualTo%3E%3CPropertyName%3ESCHUTZSTATUS%3C/PropertyName%3E%3CLiteral%3ELandschaftsschutzgebiet%3C/Literal%3E%3C/PropertyIsEqualTo%3E%3C/Filter%3E').then(function(response) {
    return response.json().then(function(polygon) {
        vectorSourcePolygon.addFeatures(new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:25833'
        }).readFeatures(polygon, {
            featureProjection: 'EPSG:3857'
        }));
    });
});

vectorSourcePolygon.once('change', function(event) {
    if (vectorSourcePolygon.getState() === 'ready') {
        var result = vectorSourcePolygon.getFeatures();
        var length1 = vectorSourcePolygon.getFeatures().length;
        var format = new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:25833'
        });
        for (var i = 0; i < length1; i++) {
            var centroid = turf.centroid(format.writeFeatureObject(vectorSourcePolygon.getFeatures()[i], {
                featureProjection: 'EPSG:3857'
            }));
            vectorSourceCentroid.addFeature(new ol.format.GeoJSON({
                defaultDataProjection: 'EPSG:25833'
            }).readFeature(centroid, {
                featureProjection: 'EPSG:3857'
            }));
            var attr1 = result[i].getProperties().GEBIETSNAME;
            var attr2 = result[i].getProperties().DOKU_INTRANET;
            var feat = vectorSourceCentroid.getFeatures()[i];
            feat.set('GEBIETSNAME', attr1);
            feat.set('DOKU_INTRANET', attr2);
        }
    }
});




var popup = elem_id('popupDiv');
var popup_closer = elem_id('popup-closer');
var popup_content = elem_id('popup-content');
var olpopup = new ol.Overlay({
    element: popup,
    autoPan: true,
    autoPanAnimation: {
        duration: 750
    },
});

map.addOverlay(olpopup);
popup_closer.onclick = function() {
    olpopup.setPosition(undefined);
    return false;
};


var OpenPopup = function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            if (layer === poly1) {
                return feature;
            }
            if (feature) {
                var coord = map.getCoordinateFromPixel(evt.pixel);
                if (typeof feature.get('features') === 'undefined') {
                    popup_content.innerHTML = 'LSG: ' + feature.get('GEBIETSNAME') + '</b>' + feature.get('DOKU_INTRANET') + '</b>';
                } else {
                    var cfeatures = feature.get('features');
                    if (cfeatures.length > 1) {
                        popup_content.innerHTML = '<h4><strong>Landschaftsschutzgebiete <br><br></strong></h4>';
                        for (var i = 0; i < cfeatures.length; i++) {
                            $(popup_content).append('LSG: ' + cfeatures[i].get('GEBIETSNAME') + '<br>' + cfeatures[i].get('DOKU_INTRANET') + '<br><br>');
                        }
                    }
                    if (cfeatures.length == 1) {
                        popup_content.innerHTML = 'LSG: ' + cfeatures[0].get('GEBIETSNAME') + '<br>' + cfeatures[0].get('DOKU_INTRANET') + '</b><br>';

                    }
                }

                olpopup.setPosition(coord);
            } else {
                popup_content.innerHTML = '';
                olpopup.setPosition(undefined);
            }
        });
};

map.on('click', OpenPopup);

var select = new ol.interaction.Select({
    layers: [poly1],
    style: selectStyle
});
map.addInteraction(select);

var search = new ol.control.SearchFeature({
    target: $(".options").get(0),
    source: vectorSourcePolygon,
    property: "GEBIETSNAME"
});
map.addControl(search);

search.on('select', function(e) {
    select.getFeatures().clear();
    select.getFeatures().push(e.search);
    var p = e.search.getGeometry().getFirstCoordinate();

    var selectedFeatures = [];
    selectFeaturesGlobal = selectedFeatures;
    var ft = vectorSourcePolygon.getClosestFeatureToCoordinate(p);
    selectedFeatures.push(ft);

    if (ft) {
        popup_content.innerHTML = 'LSG: ' + ft.get('GEBIETSNAME') + '</b><br>' + ft.get('DOKU_INTRANET');
        olpopup.setPosition(p);
    } else {
        olpopup.setPosition(undefined);
    }

    map.getView().animate({
        center: p,
        zoom: 14
    });

});

var Legende = function() {
    var anchor = document.createElement('div');
    anchor.innerHTML = '<div id="infoDiv"><table><tr><td><img src="/senuvk/natur_gruen/naturschutz/includes/lsg_map_scripte/icons/marker-lsg_eule.png" width="25" height="41" alt="Landschaftsschutzgebiete" /></td><td><strong>Landschaftsschutzgebiete</strong></td></tr></table></div>';
    anchor.className = 'legend';
    ol.control.Control.call(this, {
        element: anchor,
    });
};
ol.inherits(Legende, ol.control.Control);
map.addControl(new Legende());

Your Answer

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

Browse other questions tagged or ask your own question.