纬度和经度在 OpenLayers 中动态变化

Question

我正在尝试使用以下代码将我的地址指向 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]))
});

Answer 1

所以你创建新特征的函数是在没有填充变量的情况下执行的？代码已执行，变量更改不会刷新功能属性。您需要运行在 onchange 事件中发挥作用。如果您没有使用任何 JS 框架（Angular、React、Vue 等），请查看 jsfiddle.

按钮上的普通 JS 解决方案

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)

纬度和经度在 OpenLayers 中动态变化

Latitude and longitude change dynamically in OpenLayers

javascript

dom-events

openlayers

angular-openlayers

gwt-openlayers