Comment puis-je utiliser OpenLayers3 pour placer une icône sur un point d'intérêt sélectionné dans ma carte?

Je suis absolument nouveau dans OpenLayers 3 et je créer la page suivante qui l'utilisent et qui montrent un Open Street carte dans lequel, lorsque l'utilisateur clique sur un point, il récupère les coordonnées GPS de ce point:Comment puis-je utiliser OpenLayers3 pour placer une icône sur un point d'intérêt sélectionné dans ma carte?

<!doctype html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css"> 

    <style> 
     .map { 
     height: 400px; 
     width: 100%; 
     } 
    </style> 

    <script src="http://openlayers.org/en/v3.12.1/build/ol.js" type="text/javascript"></script> 

    <title>OpenLayers 3 example</title> 
    </head> 
    <body> 
    <h2>My Map</h2> 
    <div id="map" class="map"></div> <!-- Map Container --> 


    <!-- JavaScript to create a simple map, With this JavaScript code, a map object is created with a MapQuest Open Aerial layer 
     zoomed on the African East coast: --> 
    <script type="text/javascript"> 
     var rome = ol.proj.fromLonLat([12.5, 41.9]); 


     var map = new ol.Map({    // Creates an OpenLayers Map object 
      target: 'map',      // Attach the map object to the <div> having id='map0 

       // The layers: [ ... ] array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer: 
       layers: [  
       new ol.layer.Tile({ 
        source: new ol.source.OSM() 
       }) 
      ], 

      // The view allow to specify the center, resolution, and rotation of the map: 
      view: new ol.View({ 
       // The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out: 
       center: ol.proj.fromLonLat([12.5, 41.9]), 
       zoom: 10 
      }) 
     }); 


     map.on('click', function(evt) { 
      var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2); 
      alert("COORDINATE: " + prettyCoord); 
     }); 

    </script> 
    </body> 
</html>

donc, comme vous pouvez le voir dans mon code, il est assez simple j'utiliser cette fonction pour récupérer les coordonnées GPS:

map.on('click', function(evt) { 
     var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2); 
     alert("COORDINATE: " + prettyCoord); 
    });

mon problème est maintenant: comment puis-je mettre quelque chose comme un pointeur icône sur le point sélectionné sur la carte? Je veux mettre une icône comme celle montrée dans ce tutoriel: http://openlayers.org/en/v3.13.0/examples/icon-negative.html

mais cela doit être affiché au point sélectionné.

Je veux faire quelque chose comme donner à l'utilisateur la possibilité de sélectionner un point d'intérêt sur ma carte, mais je ne trouve pas de solution. Comment puis-je le faire?

EDIT 1: c'est le jsFiddle sur mon exemple: https://jsfiddle.net/AndreaNobili/uqcyudex/1/

Source

2016-01-21 AndreaNobili

Cela dépend. Si vous voulez que le point soit exactement au centre d'un point de la carte, vous aurez besoin d'un moyen d'obtenir la coordonnée de ce point en premier, par exemple un serveur WMS. Si vous voulez juste mettre un marqueur sur lequel l'utilisateur a cliqué, cela devrait être facile. Si vous pouviez créer un JSFiddle à partir de votre exemple, je serais prêt à vous montrer comment cela pourrait être fait. –

@ AlexandreDubé A la fin de mon article original, j'ai ajouté un JSFiddle de l'exemple sur lequel je travaille. Comme vous pouvez le voir dans le JSFiddle, en cliquant sur un point de la carte, un message d'alerte montrant les coordonnées du point cliqué est récupéré, il montre quelque chose comme: "COORDONATE: 41 ° 54 '46" N 12 ° 20' 30 "E" que je pense représenter les coordonnées GPS du point cliqué. Ce dont j'ai besoin est simplement d'ajouter quelque chose comme une "icône de vecteur" sur le point cliqué pour l'éclairer. – AndreaNobili

Ici, j'ai posé une question similaire, http://stackoverflow.com/questions/34731134/display-markers-popups-whit-openlayer3/34769351#34769351, vous avez un exemple de travail jsfiddle comme une réponse à la question – PetarP

Vous pouvez créer une couche de vecteur pour ajouter à la carte vous auquel vous configurez avec une source de vecteur. En cliquant sur la carte, vous pouvez d'abord effacer la source, puis ajouter une fonctionnalité à la source, qui est rendue dans la carte.

Consultez votre mise à jour jsFiddle: https://jsfiddle.net/uqcyudex/5/

var vectorSource = new ol.source.Vector(); 
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource 
}); 

... 

// add it to the map 
layers: [  
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }), 
vectorLayer 
], 

... 

// clear the source and add the feature 
vectorSource.clear(); 
var feature = new ol.Feature(new ol.geom.Point(evt.coordinate)); 
vectorSource.addFeatures([feature]);

Pour avoir la fonction de vecteur de style comme marqueur, regardez cet exemple pour voir comment il est fait: http://openlayers.org/en/v3.13.0/examples/icon.html

Source

2016-01-21 16:32:53

Comment puis-je utiliser OpenLayers3 pour placer une icône sur un point d'intérêt sélectionné dans ma carte?

Répondre

Questions connexes