小编Adr*_*ien的帖子

如何使用 Angular 从用户那里检索地理位置

我正在使用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

javascript api openlayers reverse-geocoding angular

3
推荐指数
1
解决办法
1万
查看次数

Angular 5 和 OpenLayers 4:无法读取属性“getEventPixel”和“forEachFeatureAtPixel”

我正在尝试将 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)

javascript openlayers typescript angular

0
推荐指数
1
解决办法
2357
查看次数

Angular-在复选框上添加事件

我正在用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)

javascript jquery openlayers angular

0
推荐指数
1
解决办法
2808
查看次数