How can I use OpenLayers3 to put an icon on a selected point of interest in my map?
Question
I am absolutly new in OpenLayers 3 and I have create the following page that use it and that show an Open Street map in which when the user click on a point it retrieve the GPS coordinates of this point:
<!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>
So, as you can see in my code, it is pretty simple I have use this function to retrieve the GPS coordinates:
map.on('click', function(evt) {
var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
alert("COORDINATE: " + prettyCoord);
});
My problem now is: how can I put something like a pointer icon on the selected point in the map? I want put an icon like the one shown in this tutorial: http://openlayers.org/en/v3.13.0/examples/icon-negative.html
but that have to be shown in the selected point.
I want to do something like give to the user the possibility to select a point of interest on my map but I can't find a solution. How can I do it?
EDIT 1 : this is the JSFiddle on my example: https://jsfiddle.net/AndreaNobili/uqcyudex/1/
1 answers
solution1
1 ACCPTED 2016-01-21 16:32:53
You can create a vector layer to add to you map to which you configure with a vector source. Upon clicking on the map, you can clear the source first, then add a feature to the source, which gets rendered in the map.
See your updated 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]);
To have the vector feature styled as a marker, look at this example to see how it's done: http://openlayers.org/en/v3.13.0/examples/icon.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.