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

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

0 голосов
/ 13 февраля 2019

У меня есть карта, которую я создал с помощью Openlayers.Карта берет точки из базы данных и наносит их на карту после нажатия кнопки на странице.Эти работы, как и ожидалось.Что я хотел бы сделать, это добавить новую точку, когда пользователь дважды щелкает мышью где-нибудь на карте.Я пока не беспокоюсь о сохранении его в базе данных, и это просто для добавления новой точки к существующему слою с включенными в нее точками загрузки базы данных.

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

map.on('dblclick', function (evt) {
console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
addMarker(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));

и 

function addMarker(evt) {



var array = evt.toString().split(",").map(Number);
var long = array[0];
var lat = array[1];
toastr.info(long);
toastr.info(lat);
var marker = new ol.Feature(
    new ol.geom.Point([long, lat])
);



var zIndex = 1;
marker.setStyle = [new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 36], 
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "images/pinother.png", 
        zIndex: zIndex
    })),
    zIndex: zIndex
})];

vectorSource.addFeature(marker);}

Это создает точку на карте с правильным видом, но она всегда находится наисходная точка;0,0 широта / долгота!

Используя toastr (функцию оповещений в стиле) в моей функции addMarker, я вижу, что переменные "lat" и "long" заполняются правильно, поэтому он должен быть частью 

var marker = new ol.Feature(
new ol.geom.Point([long, lat])

создание точки, которую я делаю неправильно.Передаваемые координаты имеют большие значения, например, «62.915233039476135», есть ли предел того, как долго это должно быть, или я пропускаю что-то еще, что мешает моей новой точке принимать какие-либо координаты?

1 Ответ

0 голосов
/ 14 февраля 2019

Как указано в комментариях Mike , просто передайте координаты от события в функцию addMarker.

FYI - у вас также есть проблемы со стилем маркера.

рабочий пример

соответствующий код: 

  map.on('dblclick', function (evt) {
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
    addMarker(evt.coordinate);
  });

  function addMarker(coordinates) {
    console.log(coordinates);
    var marker = new ol.Feature(new ol.geom.Point(coordinates));
    var zIndex = 1;
    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 36], 
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "mapIcons/pinother.png", 
        zIndex: zIndex
      })),
      zIndex: zIndex
    }));
    vectorSource.addFeature(marker);
  }

фрагмент кода: 

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<script>
  var vectorLayer = new ol.layer.Vector({ // VectorLayer({
    source: new ol.source.Vector(),
  });
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({ // TileLayer({
        source: new ol.source.OSM()
      }),
      vectorLayer,
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });
  console.log(map.getInteractions());
  var dblClickInteraction;
  // find DoubleClickZoom interaction
  map.getInteractions().getArray().forEach(function(interaction) {
    if (interaction instanceof ol.interaction.DoubleClickZoom) {
      dblClickInteraction = interaction;
    }
  });
  // remove from map
  map.removeInteraction(dblClickInteraction)
  var vectorSource = vectorLayer.getSource();

  function addMarker(coordinates) {
    console.log(coordinates);
    var marker = new ol.Feature(new ol.geom.Point(coordinates));
    var zIndex = 1;
    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 36],
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "https://openlayers.org/en/latest/examples/data/icon.png",
        zIndex: zIndex
      })),
      zIndex: zIndex
    }));
    vectorSource.addFeature(marker);
  }
  map.on('dblclick', function(evt) {
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
    addMarker(evt.coordinate);
  });
  var south = 24.0;
  var west = -125.8;
  var north = 49.6;
  var east = -66.4;
  // [maxx, maxy, minx, miny]
  var extent = ol.proj.transformExtent([east, north, west, south], 'EPSG:4326', 'EPSG:3857');
  map.getView().fit(extent, {
    size: map.getSize(),
    padding: [5, 5, 5, 5]
  });
</script>
...