使用Nominatim与角度

Question

我正在尝试在我的角应用程序中使用OSM。我已将OSM包含在应用程序中，但在我的情况下，我需要Nominatim的功能。当用户输入一个地点时，它应该返回该地点的纬度和经度，地图应该聚焦到那个地方。 在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/

创建一个角度服务，您可以在其中点击nominatim搜索并将新的lat lon设置为地图对象。

例如。

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