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解决方案ith按钮。

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中动态变化

1 个答案: