0

This question already has an answer here:

I only want popups for the layer of the markers (icon), but not for the layer of the polygons (WFS).

        var defaultStyle_polygon_1 = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(173, 255, 47, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: 'black',
                width: 1
            }),
        });

        var defaultStyle_polygon_2 = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(0, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: 'black',
                width: 1
            }),
        });

        var defaultStyle_icon_1 = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                scale: 1,
                src: 'icons/marker-nsg_eule.png'
            })
        });

        var defaultStyle_icon_2 = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                scale: 1,
                src: 'icons/marker-natura2000_eule.png'
            })
        });

        var defaultStyle_icon_3 = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                scale: 1,
                src: 'icons/marker-nsg-natura2000_eule.png'
            })
        });

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

        var map = new ol.Map({
            target: 'mapDiv',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),

                new ol.layer.Vector({
                    source: new ol.source.Vector({
                        format: new ol.format.GeoJSON(),
                        url: function(extent, resolution, projection) {
                        return '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=<Filter><PropertyIsEqualTo><PropertyName>SCHUTZSTATUS</PropertyName><Literal>FFH-Gebiet</Literal></PropertyIsEqualTo></Filter>';
                        },
                        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                            minZoom: 10
                        }))
                    }),
                    style: defaultStyle_polygon_1
                }),

                new ol.layer.Vector({
                    source: new ol.source.Vector({
                        format: new ol.format.GeoJSON(),
                        url: function(extent, resolution, projection) {
                        return '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=<Filter><PropertyIsEqualTo><PropertyName>SCHUTZSTATUS</PropertyName><Literal>Naturschutzgebiet</Literal></PropertyIsEqualTo></Filter>';
                        },
                        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                            minZoom: 10
                        }))
                    }),
                    style: defaultStyle_polygon_2
                }),

                new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'geo_jsons_nsg/nsg.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: defaultStyle_icon_1
                }),

                new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'geo_jsons_nsg/natura2000.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: defaultStyle_icon_2
                }),

                new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'geo_jsons_nsg/nsg-natura2000.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: defaultStyle_icon_3
                }),

            ],
            overlays: [popup],
            view: new ol.View({
                center: ol.proj.transform([13.3833, 52.52], 'EPSG:4326', 'EPSG:3857', 'EPSG:25833'),
                zoom: 10,
                minZoom: 10
            }),

        });

        map.on('click', function(event) {
            var selectedFeatures = [];
            selectFeaturesGlobal = selectedFeatures;

            map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
                selectedFeatures.push(feature);
            });

            if (selectedFeatures.length > 0) {
                var info = [];
                for (var i=0; i<selectedFeatures.length; i++) {
                    info.push(selectedFeatures[i].get('HTML'));
                }

                document.getElementById('nameId').innerHTML = info.join('');
                popup.setPosition(event.coordinate);
            } else {

                document.getElementById('nameId').innerHTML = '';
                popup.setPosition(undefined);
            }
        });

marked as duplicate by JGH, Community Sep 24 '18 at 15:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

I understand it and solved it. Sorry friends for being such a dude. ;)

        var defaultStyle_polygon_1 = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(173, 255, 47, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: 'black',
                width: 1
            }),
        });

        var defaultStyle_polygon_2 = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(0, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: 'black',
                width: 1
            }),
        });

        var defaultStyle_icon_1 = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                scale: 1,
                src: 'icons/marker-nsg_eule.png'
            })
        });

        var defaultStyle_icon_2 = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                scale: 1,
                src: 'icons/marker-natura2000_eule.png'
            })
        });

        var defaultStyle_icon_3 = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                scale: 1,
                src: 'icons/marker-nsg-natura2000_eule.png'
            })
        });

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

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

                var poly1 = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        format: new ol.format.GeoJSON(),
                        url: function(extent, resolution, projection) {
                        return '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=<Filter><PropertyIsEqualTo><PropertyName>SCHUTZSTATUS</PropertyName><Literal>FFH-Gebiet</Literal></PropertyIsEqualTo></Filter>';
                        },
                        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                            minZoom: 10
                        }))
                    }),
                    style: defaultStyle_polygon_1
                });

                var poly2 = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        format: new ol.format.GeoJSON(),
                        url: function(extent, resolution, projection) {
                        return '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=<Filter><PropertyIsEqualTo><PropertyName>SCHUTZSTATUS</PropertyName><Literal>Naturschutzgebiet</Literal></PropertyIsEqualTo></Filter>';
                        },
                        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                            minZoom: 10
                        }))
                    }),
                    style: defaultStyle_polygon_2
                });

                var icon1 = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'geo_jsons_nsg/nsg.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: defaultStyle_icon_1
                });

                var icon2 = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'geo_jsons_nsg/natura2000.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: defaultStyle_icon_2
                });

                var icon3 = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'geo_jsons_nsg/nsg-natura2000.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: defaultStyle_icon_3
                });

        var map = new ol.Map({
            target: 'mapDiv',
            layers: [
                    basemap,
                    poly1,
                    poly2,
                    icon1,
                    icon2,
                    icon3
                    ],
            overlays: [popup],
            view: new ol.View({
                center: ol.proj.transform([13.3833, 52.52], 'EPSG:4326', 'EPSG:3857', 'EPSG:25833'),
                zoom: 10,
                minZoom: 10
            }),

        });

        map.on('click', function(event) {
            var selectedFeatures = [];
            selectFeaturesGlobal = selectedFeatures;

            var feature = map.forEachFeatureAtPixel(event.pixel,
                function(feature, layer) {
                    if (layer == poly1 || layer == poly2) {
                        return feature;
                }
                selectedFeatures.push(feature);
            }
        );

            if (selectedFeatures.length > 0) {
                var info = [];
                for (var i=0; i<selectedFeatures.length; i++) {
                    info.push(selectedFeatures[i].get('HTML'));
                }
                <!-- string aus der Liste erzeugen 'info.join'-->
                document.getElementById('nameId').innerHTML = info.join('');
                popup.setPosition(event.coordinate);
            } else {
                <!-- wenn kein Feature ausgewählt wird, wird nichts angezeigt -->
                document.getElementById('nameId').innerHTML = '';
                popup.setPosition(undefined);
            }
        });

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