Latitude et changement de longitude dynamique dans OpenLayers

Question

Je suis en train de pointer mon adresse sur une carte OpenLayers en utilisant le code ci-dessous:

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

J'ai un champ d'entrée onchange de ce champ d'entrée je vais obtenir les valeurs de latitude et de longitude.

Je veux placer ces valeurs sur mon point, donc j'ai stocké des valeurs que j'obtiens dans la variable globale et accédant dans mon JS: [longitude, latitude]) mais il ne place pas ces valeurs sur la carte. mais si je place des valeurs comme 4.1111, 50.1111, cela fonctionne.

Quand je change mes valeurs d'entrée [longitude, latitude] changements, mais pas appliquer sur le code ci-dessous:

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

Answer 1

Ainsi, votre fonction avec la création de nouvelle fonctionnalité est l'exécution sans variables remplies? Le code a été exécuté et la modification dans les variables ne sera pas actualiser les propriétés de fonctionnalité. Vous devez exécuter la fonction dans l'événement onchange. Si vous n'utilisez aucun framework JS (Angular, React, Vue, etc.), jetez un coup d'œil au bouton 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)