Meanwhile, I have found a solution. You can see it here:
https://gispublic.stadt-ibb.de/xplanung/dist/
CSS:
@import "node_modules/ol/ol.css";
@import "node_modules/ol-ext/dist/ol-ext.css";
@import "node_modules/ol-ext/overlay/Popup.css";
html, body {
margin: 0;
height: 100%;
font-family:Verdana, Geneva, sans-serif;
font-size: 1em;
}
#map {
position: relative;
float:left;
top: 0;
bottom: 0;
height:80%;
width: 100%;
}
.container{
}
.hinweis {
float:left;
top: 0; /* Ganz oben */
left: 0; /* Ganz links */
font-size:0.7em;
width: 60%; /* Volle Breite */
}
.treffer {
float: left;
top: 0; /* Ganz oben */
left: 0; /* Ganz links */
font-size:0.9em;
width: 30%; /* Volle Breite */
}
.info {
left: 5px; /* Ganz links */
height:1.4em;
}
.options {
font-size:0.9em;
position: absolute;
border-radius: 14px;
padding:6px;
left:10px;
bottom:120px;
width: 250px;
height: 320px;
background-color: white;
z-index:1;
border-width: 3px;
border-style: solid;
border-radius: 0.375rem;
border-color: #dee2e6;
}
.ol-okk {
margin:10px !important;
}
.ol-control.ol-select
{
display:none !important;
}
.ol-popup h1 {
font-size: 1em;
background-size: 2em;
padding-left: 3em;
}
#suche_auffrischen {
background-color:#13c023;
padding:5px;
font-size:0.9em;
}
#suche_auffrischen:hover {
background-color:#5eb566;
}
#suche_auffrischen2 {
background-color:#13c023;
padding:5px;
font-size:0.9em;
}
#suche_auffrischen2:hover {
background-color:#5eb566;
}
JS:
import Map from 'ol/Map.js';
import LayerSwitcher from "ol-ext/control/LayerSwitcher"
import Select from "ol-ext/control/Select.js"
/*import SearchFeature from 'ol-ext/control/SearchFeature.js';
import SelectMulti from 'ol-ext/control/SelectMulti.js';
import SelectFulltext from 'ol-ext/control/SelectFulltext.js';
import SelectPopup from 'ol-ext/control/SelectPopup.js';
import SelectCheck from 'ol-ext/control/SelectCheck.js';
import SelectCondition from 'ol-ext/control/SelectCondition.js';*/
import PopupFeature from "ol-ext/overlay/PopupFeature.js"
import MultiPoint from 'ol/geom/MultiPoint.js';
import Point from 'ol/geom/Point.js';
import CircleStyle from 'ol/style/Circle.js';
import {boundingExtent} from 'ol/extent';
import {getCenter} from 'ol/extent';
//import Control from 'ol/control/Control.js';
import VectorSource from 'ol/source/Vector.js';
import VectorLayer from 'ol/layer/Vector.js';
import {singleClick} from 'ol/events/condition.js';
import Selecti from "ol/interaction/Select.js"
import View from 'ol/View.js';
import {easeIn, easeOut} from 'ol/easing.js';
import TileLayer from 'ol/layer/Tile.js';
import {fromLonLat} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Fill from 'ol/style/Fill.js';
import Icon from 'ol/style/Icon.js';
import Stroke from 'ol/style/Stroke.js';
import Style from 'ol/style/Style.js';
import RegularShape from 'ol/style/RegularShape.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageSource from 'ol/source/Image.js';
import {createLoader} from 'ol/source/wms.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import {defaults as defaultControls} from 'ol/control/defaults.js';
import ScaleLine from 'ol/control/ScaleLine.js';
const ibben = fromLonLat([7.716052,52.274762]);
const gruendken = fromLonLat([7.7945,52.2691]);
const kloster = fromLonLat([7.7154,52.2741]);
const tecklenburger_ost = fromLonLat([7.7305,52.2604]);
const nutzungsart = document.getElementById('nutzungsart');
const wmsSource = new ImageWMS({
url: 'https://gispublic.stadt-ibb.de/cgi-bin/qgis_mapserv.fcgi?MAP=/home/qgis/projects/xplanung/xplanung.qgs',
params: {'LAYERS': 'baugebiet_gesamt,Gründkenliet_Nord,Klosterstraße,Tecklenburger_Damm_Ost'},
ratio: 1,// serverType: 'mapserver',
});
const wmsSource2 = new ImageWMS({
url: 'https://gispublic.stadt-ibb.de/cgi-bin/mapserv?map=XPLANUNG',
params: {'LAYERS': 'teilflaechen'},
ratio: 1,
serverType: 'mapserver',
});
const wmsLayer = new ImageLayer({
title: 'Bebauungspläne',
source: wmsSource,
});
const wmsSourceLubi = new ImageWMS({
url: 'https://www.wms.nrw.de/geobasis/wms_nw_dop',
params: {'LAYERS': 'nw_dop_rgb'},
ratio: 1,// serverType: 'mapserver',
});
const wmsLayerLubi = new ImageLayer({
title: 'Luftbild',
source: wmsSourceLubi,
visible: false,
});
const view = new View({
center: ibben,
zoom: 11,
});
const map = new Map({
target: 'map',
controls: defaultControls().extend([
new ScaleLine({
units: 'metric',
}),
]),
layers: [
new TileLayer({
name: 'Hintergrundkarte',
preload: 4,
source: new OSM()
}),wmsLayerLubi,wmsLayer
],
view: view,
});
const switcher = new LayerSwitcher;
// You can add it to the map
map.addControl(switcher)
function onClick(id, callback) {
document.getElementById(id).addEventListener('click', callback);
}
onClick('pan-to-gruendken', function () {
view.animate({
center: gruendken,
zoom: 16,
duration: 2000,
});
});
onClick('pan-to-kloster', function () {
view.animate({
center: kloster,
zoom: 18,
duration: 2000,
});
});
onClick('pan-to-tecklenburger_ost', function () {
view.animate({
center: tecklenburger_ost,
zoom: 16,
duration: 2000,
});
});
//Attributabfrage per WMS
/*
map.on('singleclick', function (evt) {
document.getElementById('info').innerHTML = '</br>';
const viewResolution = view.getResolution();
const url = wmsSource2.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
'EPSG:3857',
{'INFO_FORMAT': 'text/html'},
);
if (url) {
fetch(url)
.then((response) => response.text())
.then((html) => {
document.getElementById('info').innerHTML = html;
});
}
}); */
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const data = wmsLayer.getData(evt.pixel);
const hit = data && data[3] > 0;
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
var vectorSource = new VectorSource({
url: '../xplanung.geojson',
format: new GeoJSON()
});
const styles = [
new Style({
/* stroke: new Stroke({
color: 'black',
width: 1,
}),*/
fill: new Fill({
color: 'rgba(0, 0, 255, 0.0)',
}),
}),
];
map.addLayer(new VectorLayer({
name: 'Suchergebnisse',
source: vectorSource,
style: styles,
}));
const selectStyle=new Style({
stroke: new Stroke({ color: [255,128,0], width:15 }),
fill: false,
/* image: new RegularShape({
radius:35,
points: 35,
fill: new Fill({ color: [255,128,0,.6] }),
stroke: new Stroke({ color: [255,128,0], width:9 })
})*/
})
const selectStyle2=new Style({
stroke: new Stroke({ color: [0,0,255], width:3 }),
fill: null,
})
//Style mit Symbol für Fläche
const selectStyle3= new Style({
image: new Icon({
src: "../b.png",
width: 25,
height:25
}),
geometry: function (feature) {
const coordinates = feature.getGeometry().getInteriorPoints().getPoint(0).getCoordinates();
return new Point(coordinates);
},
})
//Suche zeige.....
// ******************************************************************************************************Select interaction
//Setzt Filter auf Basis der Suchstrings, ermittelt Extent
function setzeFilter(wert) {
const meineFilter = [];
meineFilter.length = 0;
if (flaeche.value !=''){
meineFilter.push({attr: "flaeche", op: ">=", val:flaeche.value });
}
if (gfz.value !=''){
meineFilter.push({attr: "gfz", op: ">=", val:gfz.value });
}
if (grz.value !=''){
meineFilter.push({attr: "grz", op: ">=", val:grz.value });
}
if (nutzungsart.value !=''){
meineFilter.push({attr: "allgartnutztxt", op: "=", val:nutzungsart.value });
}
document.getElementById('treffer').innerHTML='';
var a= selectCtrl.doSelect({conditions:meineFilter});
const anzahlObjekte = Object.keys(a).length;
document.getElementById('treffer').innerHTML='Insgesamt wurde/n '+anzahlObjekte+' Objekt/e gefunden.';
if (anzahlObjekte==0){
return;
}
//Ermittlung der gefilterten FEatures
var sources = selectCtrl.getSources();
sources.forEach(function (s) {
var meineFeatures= selectCtrl._selectFeatures(a, s.getFeatures(), meineFilter, true,true);
const coords = meineFeatures.map((f) => {
const polygon = f.getGeometry();
return polygon.getExtent();
});
const extentx = boundingExtent(coords);
extentx[0]=extentx[0]-500;
extentx[3]=extentx[3]+500;
var extentCoords = [
[
extentx[0]-1400,
extentx[1]
],
[
extentx[2]+1400,
extentx[3]
]
];
var extentNeu = boundingExtent(extentCoords);
//setViewExtent(extent);
if (wert!=0){
map.getView().fit(extentNeu, {duration: 2000});
}
});
}
nutzungsart.addEventListener('input', function () {
setzeFilter();
// selectCtrl.addCondition( {attr: "allgartnutztxt", op: "=", val:nutzungsart.value });
});
flaeche.addEventListener('input', function () {
setzeFilter();
//var waslos=selectCtrl.getConditions();
//alert (JSON.stringify(waslos));
});
gfz.addEventListener('input', function () {
setzeFilter();
// selectCtrl.addCondition( {attr: "allgartnutztxt", op: "=", val:nutzungsart.value });
});
grz.addEventListener('input', function () {
setzeFilter();
// selectCtrl.addCondition( {attr: "allgartnutztxt", op: "=", val:nutzungsart.value });
});
// Select control
var selecti = new Selecti({
hitTolerance: 5,
style:selectStyle2,
condition: singleClick
});
map.addInteraction(selecti);
//Attributsuche
var selectCtrl = new Select({
source: vectorSource,
addLabel: "Suche absenden",
property: $(".options select").val()
});
selectCtrl.on('select', function(e) {
selecti.getFeatures().clear();
for (var i=0, f; f=e.features[i]; i++) {
selecti.getFeatures().push(f);
f.setStyle(selectStyle);
}
});
//******************************************************************************************************************************
//Darstellung von Infos in Popup
var popup = new PopupFeature({
popupClass: 'default anim',
select: selecti,
canFix: true,
template: {
title:
// 'nom', // only display the name
function(f) {
return "Id: "+f.get('fid')+' ('+f.get('gebiet')+')';
},
attributes: // [ 'region', 'arrond', 'cantons', 'communes', 'pop' ]
{
'allgartnutztxt': { title: 'Allgemeine Art der Nutzung:' },
'besartnutztxt': { title: 'Besondere Art der Nutzung:' },
'flaeche': { title: 'Fläche (m²):' },
'gfz': { title: 'GFZ:' },
'grz': { title: 'GRZ:' },
}
}
});
map.addOverlay (popup);
onClick('suche_auffrischen', function () {
setzeFilter();
});
onClick('suche_auffrischen2', function () {
setzeFilter(0);
});
