在已从提取查询(GeoJSON 响应)检索到的点上放置弹出窗口

Question

我正在使用OpenLayers(4.6.5(和Angular(6(编程地图。我使用法语 API，它允许构建这样的查询：https://api-adresse.data.gouv.fr/reverse/?lon=2.37&lat=48.357。我的目标是使用浏览器地理位置将lon和lat替换为客户端的真实坐标。我能做的事情。

在以前的项目中，我使用了一些函数，允许我创建一个弹出窗口，其中包含静态 GeoJSON 文件中包含的信息(没有适应性查询(，并且有效，但在这种情况下并非如此。我猜函数没有使用 GeoJSON 文件，因为我收到此错误：

ERROR TypeError: Cannot set property 'innerHTML' of null

法典：

import { Component, OnInit } from '@angular/core';
import Map from 'ol/map';
import WMS from 'ol/source/tilewms';
import TileLayer from 'ol/layer/tile';
import View from 'ol/view';
import OSM from 'ol/source/osm';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Geolocation from 'ol/geolocation';
import GeoJSON from 'ol/format/geojson';
import proj from 'ol/proj';
import Style from 'ol/style/style';
import IconStyle from 'ol/style/icon';
import $ from 'jquery';
import Overlay from 'ol/overlay';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
map: Map;
view: View;
locationSource: VectorSource;
vectorLayerLocation: VectorLayer;
loc: Style;
popup: Overlay;
constructor() {
}
getLocation() {
var geolocation = new Geolocation({
projection: this.view.getProjection()
});
geolocation.setTracking(true);
geolocation.on('change:position', () => {
var [longitude, latitude] = proj.toLonLat(geolocation.getPosition());
fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${longitude}&lat=${latitude}`).then(response => response.json())
.then(json => {
var features = (new GeoJSON()).readFeatures(json, <any> {
featureProjection: 'EPSG:3857'
})
var coordinates = geolocation.getPosition();
this.locationSource.clear();
this.locationSource.addFeatures(features);
var pos = geolocation.getPosition();
this.view.setCenter(pos);
console.log(this.locationSource.getFeatures()[0].getProperties());
});
});
}
ngOnInit() {
this.loc = new Style({
image: new IconStyle(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'assets/image/adresse.png'
}))
});
this.view = new View({
center: [0, 0],
maxZoom: 19,
zoom: 10
});
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: this.view
});
this.locationSource = new VectorSource();
this.vectorLayerLocation = new VectorLayer({
source: this.locationSource,
style: this.loc
});
this.map.addLayer(this.vectorLayerLocation);
$('#bouton_loc').on('click', function(){
$('#bouton_loc').attr("disabled", true);
});
//popup
var element = document.getElementById('popup');
this.popup = new Overlay({
element: element,
autoPan: true,
offset: [0, -30]
});
//Display popups
var content_element = document.getElementById('popup-content');
this.map.on('click', evt => {
var feature = this.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
if(feature.get('label') != null) {
var content = '<h2>' + 'Adress : ' + feature.get('label') + '</h2>';
}
if(feature.get('context') != null) {
content += '<h2>' + 'Region : ' + feature.get('context') + '</h2>';
}
content_element = document.getElementById('popup-content');
content_element.innerHTML = content;
this.popup.setPosition(coord);
var closer = document.getElementById('popup-closer');
closer.onclick = () => {
this.popup.setPosition(undefined);
closer.blur();
return false;
};
}
});
this.map.on('pointermove', (e) => {
if (e.dragging) {
return;
};
var pixel = this.map.getEventPixel(e.originalEvent);
var hit = this.map.hasFeatureAtPixel(pixel);
this.map.getViewport().style.cursor = hit ? 'pointer' : '';
});
}
}

Answer 1

ERROR TypeError: Cannot set property 'innerHTML' of null

此错误意味着您尝试设置 innerHTML 的元素不存在。

弹出窗口叠加已定义，但从未添加到地图中。