angular - 将 Nominatim 与 Angular 一起使用

Question

我正在尝试在我的 Angular 应用程序中使用 OSM。我已将 OSM 包含到应用程序中，但就我而言，我需要 Nominatim 的功能。当用户输入一个地点时，它应该返回该地点的纬度和经度，并且 map 应该聚焦于该地点。
在 Nominatim 网站中，在 URL 中输入地名

https://nominatim.openstreetmap.org/search?query=colombo

它返回经度和纬度。

https://nominatim.openstreetmap.org/search?query=colombo#map=12/6.9220/79.8562

如果有人知道如何使用 Angular 执行此操作，将不胜感激。

这是我的 .ts 文件

import { Component, OnInit } from '@angular/core';
declare var ol: any;

@Component({
  selector: 'app-location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
  map: any;

  constructor() { }

  ngOnInit() {

    var mousePositionControl = new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4),
      projection: 'EPSG:4326',
      undefinedHTML: ' '
    });


    this.map = new ol.Map({
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: {
          collapsible: false
        }
      }).extend([mousePositionControl]),
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([79.859619140625, 6.930062160235181]),
        zoom: 8
      })
    });


    this.map.on('click', function (args) {
      var lonlat = ol.proj.transform(args.coordinate, 'EPSG:3857', 'EPSG:4326');

      var lon = lonlat[0];
      var lat = lonlat[1];

      localStorage.setItem('lat', JSON.stringify(lat));
      localStorage.setItem('long', JSON.stringify(lon));
    });

  }

}

HTML文件

<input type="text" placeholder="place name"  name="place name">
<div id="map" class="map"></div>
<div id="mouse-position"></div>

Answer 1

这可能对您有帮助 - https://developer.mapquest.com/documentation/open/nominatim-search/search/

创建一个 Angular 服务，您可以在其中点击 nominatim 搜索并为 map 对象设置新的经纬度。

例如。

  setCenter() {
    var view = this.map.getView();
    view.setCenter(ol.proj.fromLonLat([this.longitude, this.latitude]));
    view.setZoom(8);
  }