緯度とOpenLayersを

Question

における動的経度の変更：

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 
    }) 
}); 

は、私が取得すること、入力フィールドの1つの入力フィールド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ソリューションのi番目のボタンを見てください。

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)