Openlayers - 在地图上的弹出窗口中显示来自 geojson 文件的数据

Question

我正在制作具有不同矢量图层的开放图层地图。我正在尝试通过弹出窗口在图层上显示 geojson 中的要素信息。我找到了这两个参考：

• http://jsfiddle.net/zt2tyzqo/2/
• https://embed.plnkr.co/plunk/GvdVNE

感谢您的支持。 :)

这是地理：

{
"type": "FeatureCollection",
"name": "dachnotnull",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 9, "GEBFLAECHE": 214.0, "GREENAR05": 13.0, "GREENAR20": 0.0, "SHAPE_AREA": 214.42924681599999, "SHAPE_LEN": 0.0, "p_intensiv": 0.060626058212800003, "p_extensiv": 0.0, "p_gesamt": 0.060626058212800003, "flaeche": 214.42924681599999 }, "geometry": { "type": "MultiPolygon", "coordinates":

这是主要的.js：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {
fromLonLat,
toLonLat
} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {
circular
} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';
// define the map
const map = new Map({
target: 'map',
view: new View({
center: fromLonLat([16.37, 48.2]),
zoom: 13
})
});
sync(map);
//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
source: searchResultSource
});
searchResultLayer.setStyle(new Style({
image: new Circle({
fill: new Fill({
color: 'rgba(0, 128, 0, 1)'
}),
stroke: new Stroke({
color: '#000000',
width: 1.25
}),
radius: 15
})
}));
var element = document.getElementById('search');
element.addEventListener('keydown', listenerFunction);
function listenerFunction(event) {
console.log(event);
console.log(event.keyCode);
if (event.keyCode === 13) {
const xhr = new XMLHttpRequest;
xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
xhr.onload = function () {
const json = JSON.parse(xhr.responseText);
const geoJsonReader = new GeoJSON({
featureProjection: 'EPSG:3857'
});
searchResultSource.clear();
const features = geoJsonReader.readFeatures(json);
console.log(features);
searchResultSource.addFeatures(features);
if (!searchResultSource.isEmpty()) {
map.getView().fit(searchResultSource.getExtent(), {
maxZoom: 18,
duration: 500
});
}
};
xhr.send();

}
}
//OpenStreetMap
const OSMbaseLayer = new TileLayer({
type: 'base',
source: new OSM()
});
// Statellit
const satellitLayer = new TileLayer({
source: new XYZ({
attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 30
})
});
//shape
const parkLayer = new VectorLayer({
source: new Vector({
name: 'park',
url: 'data/park1.geojson',
format: new GeoJSON()
})
});
parkLayer.setStyle(new Style({
fill: new Fill({
color: 'green'
}),
stroke: new Stroke({
color: 'green',
width: 1.25
}),
}));
const hitzeLayer = new VectorLayer({
source: new Vector({
name: 'hitze',
url: 'data/hitze.geojson',
format: new GeoJSON()
})
});
hitzeLayer.setStyle(new Style({
fill: new Fill({
color: 'red'
}),
stroke: new Stroke({
color: 'yellow',
width: 1.25
}),
}));
hitzeLayer.setStyle(function(feature) {
let fillColor;
const hitzeindex = feature.get('AVG_UHVI_A');
if (hitzeindex < 0.5) {
fillColor = 'rgba(255, 228, 225, 0.7)';
}  else if (hitzeindex < 0.75) {
fillColor = 'rgba(240, 128, 128, 0.7)';
} else {
fillColor = 'rgba(128, 0, 0, 0.7)';
}
return new Style({
fill: new Fill({
color: fillColor
}),
stroke: new Stroke({
color: 'rgba(4, 4, 4, 1)',
width: 1
})
});
}); 
const dachLayer = new VectorLayer({
minZoom: 17.9999,
source: new Vector({
name: 'dach',
url: 'data/dachnotnull.geojson',
format: new GeoJSON()
})
});

dachLayer.setStyle(function(feature) {
let fillColor;
const begruenung = feature.get('p_gesamt');
if (begruenung < 0.2) {
fillColor = 'rgba(143, 188, 143, 1)';
}  else if (begruenung < 0.4) {
fillColor = 'rgba(60, 179, 113, 1)';
} else if (begruenung < 0.6) {
fillColor = 'rgba(46, 139, 87, 1)';
} else if (begruenung < 0.8) {
fillColor = 'rgba(34, 139, 34, 1)';
} else {
fillColor = 'rgba(0, 100, 0, 1)';
}
return new Style({
fill: new Fill({
color: fillColor
})
});
});
// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
dachLayer.setZIndex(15);
parkLayer.setZIndex(10);
hitzeLayer.setZIndex(5);
// gruenflaechen layer anzeigen
const park = document.getElementById('park');
park.addEventListener('click', function (event) {
var checkBox = document.getElementById("park");
if (checkBox.checked == true) {
parkLayer.setMap(map);
// parkLayer.setVisible(true);
} else {
parkLayer.setMap(undefined);
//parkLayer.setVisible(false);
}
});
// hitze layer anzeigen
const hitze = document.getElementById('hitze');
hitze.addEventListener('click', function (event) {
var checkBox = document.getElementById("hitze");
if (checkBox.checked == true) {
hitzeLayer.setMap(map);
//hitzeLayer.setVisible(true);
} else {
//hitzeLayer.setVisible(false);
hitzeLayer.setMap(undefined);
}
});
// dach layer anzeigen
const dach = document.getElementById('dach');
dach.addEventListener('click', function (event) {
var checkBox = document.getElementById("dach");
if (checkBox.checked == true) {
dachLayer.setMap(map);
//hitzeLayer.setVisible(true);
} else {
//hitzeLayer.setVisible(false);
dachLayer.setMap(undefined);
}
}); 

// Get the OSMbase Base-Button
const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function (event) {
//contr.style.color = 'ffffff';
//Andere Layer entfernen
map.removeLayer(satellitLayer);
map.removeLayer(searchResultLayer);
//OSM Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
});
// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function (event) {
//Andere Layer entfernen
map.removeLayer(OSMbaseLayer);
map.removeLayer(searchResultLayer);
//Satelliten Layer hinzufügen
map.addLayer(satellitLayer);
map.addLayer(searchResultLayer);
});
//GPS Location
const GPSsource = new Vector();
const GPSlayer = new VectorLayer({
source: GPSsource
});
map.addLayer(GPSlayer);

navigator.geolocation.watchPosition(function (pos) {
const coords = [pos.coords.longitude, pos.coords.latitude];
const accuracy = circular(coords, pos.coords.accuracy);
GPSsource.clear(true);
GPSsource.addFeatures([
new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
new Feature(new Point(fromLonLat(coords)))
]);
}, function (error) {
alert(`ERROR: ${error.message}`);
}, {
enableHighAccuracy: true
});
const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function () {
if (!GPSsource.isEmpty()) {
map.getView().fit(GPSsource.getExtent(), {
maxZoom: 18,
duration: 500
});
}
});
map.addControl(new Control({
element: locate
}));

Answer 1

您需要为地图对象添加叠加层; 使用叠加对象的 setPosition 捕捉到一个点

例： https://openlayers.org/en/latest/examples/popup.html

接口：https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html