0

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

1 回答 1

0

因此，您创建新功能的功能在没有填充变量的情况下执行？代码已执行，变量的更改不会刷新特征属性。您需要在 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)
于 2017-08-28T17:20:55.563 回答