我正在使用Openlayers库在Angular 中编程。我想使用这个 API:https : //adresse.data.gouv.fr/api(页面是法语,所以我会解释目的)
这个 API 的目标一方面是在构建 GeoJSON 文件时搜索地图上的一些地址,另一方面是使用反向地理编码。这就是为什么我需要用户的地理位置。
例如这个请求:http 'https://api-adresse.data.gouv.fr/search/?q=8 bd du port'将返回世界上所有回答名称“8 bd du port”的街道
所以我想使用反向地理编码并创建一个这样的请求: http 'https://api-adresse.data.gouv.fr/reverse/?lon=user_lon&lat=user_lat'
这是最好的方法吗?我不想使用另一种 API,例如 Google API
我正在尝试将 OpenLayers 与 Angular 5 一起使用。我正在测试实现地图的不同方法,我已经在简单的 HTML 文件中测试了 Leaflet 和 OpenLayers,并且我选择使用 OpenLayers,这在我的情况下效率更高。
使用这张地图,我想在不同的图层之间切换(使用 ol-layerswitcher),根据 GeoJSON 文件放置标记并显示弹出窗口。所有这些功能在我的 HTML 文件中运行良好,现在,我想用 Angular 5(而不是 angular-openlayers-directive)做同样的事情!
我已经在我的 app.component.ts 文件中调整了我在 Angular 中的 HTML 代码,标记根据我的 GeoJSON 文件显示,我的图层切换器也是,但我有两个函数的问题:forEachFeatureatPixel 和 getEventPixel ...
这是我的 src/app/app.component.ts :
import { Component, OnInit } from '@angular/core';
import OlMap from 'ol/map';
import OlWMS from 'ol/source/tilewms';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import olProj from 'ol/proj';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Point from 'ol/geom/point';
import Style from 'ol/style/style';
import …Run Code Online (Sandbox Code Playgroud) 我正在用Angular用OpenLayers编程一个地图应用程序,我想在复选框上添加一些事件。我创建了带有两个菜单复选框的mat-button。
所有地图组件都在app.component.ts文件中,而带有复选框的菜单创建了一个app.component.html文件。
app.component.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="header">
<mat-toolbar>OpenLayers</mat-toolbar>
<div class="menu">
<button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
<mat-menu #menu="matMenu">
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Piscines</label>
<br>
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Parkings</label>
</mat-menu>
</div>
</div>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
在我的app.component.ts中,我有这段代码来检索复选框状态,但这不起作用(此代码在简单的HTML文件中有效)
app.component.ts:(提取)
$('#piscine').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
this.map.addControl(this.vectorLayer_Piscine);
this.vectorLayer_Piscine.setStyle(piscine);
this.map.addOverlay(popup);
} else …Run Code Online (Sandbox Code Playgroud)