Использование Nominatim с угловой - PullRequest
Новая
       11

Использование Nominatim с угловой

0 голосов
/ 15 апреля 2019

Я пытаюсь использовать 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>

1 Ответ

2 голосов
/ 15 апреля 2019

Это может помочь вам - https://developer.mapquest.com/documentation/open/nominatim-search/search/

Создайте угловой сервис, в котором вы можете выполнить поиск nominatim и установить новый интервал для объекта карты.

например. 

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