Как получить координаты точки, по которой я щелкнул, используя Выбор взаимодействия? - PullRequest
Новая
       5

Как получить координаты точки, по которой я щелкнул, используя Выбор взаимодействия?

0 голосов
/ 19 февраля 2020

Мы используем Vue. js и OpenLayers (4.6.5) в нашем веб-проекте. У нас на карте много объектов, и некоторые из них являются полигонами. Когда я выбираю какой-то определенный многоугольник, его стиль меняется на другой цвет, что означает, что он выделен (выделен). Конечно, я могу получить координаты выбранного многоугольника. Но как я могу получить координаты точки внутри того многоугольника, где я щелкнул?

Код выглядит следующим образом: 

markObject (mark) {
  if (!mark) {
    this.map.un('select', this.onMarkObject)
    if (this.markSelection) {
      this.markSelection.getFeatures().remove(this.lastSelectedFeature)
      this.map.removeInteraction(this.markSelection)
    }
    return
  }

  if (!this.markSelection) {
    this.markSelection = new Select({
      condition: condition.click,
      layers: [this.vectorLayer]
    })
    this.markSelection.on('select', this.onMarkObject)
  }

  this.map.addInteraction(this.markSelection)
},
onMarkObject (event) {
  if (event.selected && event.selected.length > 0) {
    const coordinates = event.selected[0].getGeometry().getCoordinates()
  }
}

Ответы [ 2 ]

1 голос
/ 20 февраля 2020

На самом деле, я нашел решение: 

onMarkObject (event) {
    const clickCoordinates = event.mapBrowserEvent.coordinate
    ...
}

В любом случае, спасибо.

0 голосов
/ 19 февраля 2020

Вам нужно захватить событие щелчка на карте, а затем преобразовать пиксель в координаты карты, взгляните на этот пример, который я сделал для вас, 

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
			#a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Click Pixel Coord</title>
  </head>
  <body>
    <h2>Click on Map to get pixel and coord values</h2>
    <p id="p"></p>
    <div id="map" class="map"></div>
		<script type="text/javascript">
		var map = new ol.Map({
			target: 'map',
			layers: [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				})
			],
			view: new ol.View({
				center: ol.proj.fromLonLat([37.41, 8.82]),
				zoom: 4
			})
		});
    map.on('click', function(evt) {
      const coord = map.getCoordinateFromPixel(evt.pixel);
      document.getElementById('p').innerHTML =
      `Pixel:${evt.pixel[0]} ${evt.pixel[0]}` + '<br>' + 
      `Coord:${coord[0].toFixed(2)} ${coord[1].toFixed(2)}`;
    });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...