Широта и долгота динамически меняются в OpenLayers

Я пытаюсь указать свой адрес на карте в OpenLayers, используя приведенный ниже код:

var rome = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
});

rome.setStyle(new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        color: '#8959A8',
        crossOrigin: 'anonymous',
        src: 'https://openlayers.org/en/v4.3.1/examples/data/dot.png'
    }))
}));

var vectorSource = new ol.source.Vector({
    features: [rome]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
        crossOrigin: ''
    })
});

var map = new ol.Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
        center: ol.proj.fromLonLat([2.896372, 44.60240]),
        zoom: 3
    })
});

У меня есть одно поле ввода onchange этого поля ввода. Я получу значения широты и долготы.

Я хочу поместить эти значения в свою точку, поэтому я сохранил значения, которые я получаю в глобальной переменной и получаю доступ в моем JS: [longitude, latitude]), но он не помещает эти значения на карту. но если я помещаю такие значения, как 4.1111, 50.1111, это работает.

Когда я меняю свои входные значения, [longitude, latitude] изменяется, но не применяется к приведенному ниже коду:

var rome = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude]))
});

javascript dom-events openlayers angular-openlayers gwt-openlayers
person v. josh    schedule 22.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, ваша функция с созданием новой функции выполняется без заполненных переменных? Код был выполнен, и изменение переменных не приведет к обновлению свойств функции. Вам нужно запустить функцию в событии onchange. Если вы не используете какой-либо JS-фреймворк (Angular, React, Vue и т. Д.), Поищите простое JS-решение с кнопкой на jsfiddle.

HTML:

  <input id="x" type="number" step="0.0001" value="4.1111">
  <input id="y" type="number" step="0.0001" value="50.1111">
  <button id="button">Add point</button>
  <div id="map"></div>

JS:

  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  })

  document.getElementById("button").addEventListener("click", function( event ) {
    var x = parseFloat(document.getElementById('x').value)
    var y = parseFloat(document.getElementById('y').value)
    var feature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([x, y], 'EPSG:4326',     
      'EPSG:3857'))
    })
    var vectorSource = new ol.source.Vector({
      features: [feature]
    })
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
    })
    map.addLayer(vectorLayer)
  }, false)
person Sebastian Schulz    schedule 28.08.2017