如何使用OpenLayers3將圖標放置在我地圖上的選定興趣點上？

我是絕對新的的OpenLayers 3，我必須創建使用它，這顯示出開街圖，其中當上一個點的用戶點擊它檢索該點的GPS座標如下頁面：如何使用OpenLayers3將圖標放置在我地圖上的選定興趣點上？

<!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>

所以，你可以在我的代碼中看到，這是很簡單的我都用這個功能來檢索GPS座標：現在

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

我的問題是：我怎樣才能把像一個指針地圖上選定點的圖標？我想放置一個像本教程中顯示的圖標：http://openlayers.org/en/v3.13.0/examples/icon-negative.html

但必須在選定點中顯示。

我想要給用戶提供在我的地圖上選擇興趣點的可能性，但我找不到解決方案。我該怎麼做？

編輯1：這是的jsfiddle在我的例子：https://jsfiddle.net/AndreaNobili/uqcyudex/1/

來源

2016-01-21 AndreaNobili

那要看情況。例如，如果您希望點位於地圖中某個點的中心位置，則需要首先獲取該點的座標，例如通過WMS服務器。如果你只是想在用戶點擊的地方放一個標記，那應該很容易。如果你可以從你的例子中創建一個JSFiddle，我願意告訴你它是如何完成的。 –

@AlexandreDubé在我原來發布的文章的最後，我添加了一個JSFiddle，這是我正在使用的示例。因此，您可以在JSFiddle中看到，單擊地圖上的點，會顯示一條警告消息，顯示點擊點的座標，它會顯示如下內容：「座標：41°54'46」N 12°20' 30「E」，我認爲它代表點擊點的GPS座標。我需要的僅僅是在點擊點上添加一個像「矢量圖標」的東西來點亮它。 – AndreaNobili

在這裏，我問了一個類似的問題，http://stackoverflow.com/questions/34731134/display-markers-popups-whit-openlayer3/34769351#34769351，你有一個工作jsfiddle的例子作爲一個問題 – PetarP

您可以創建一個矢量圖層添加到您映射到您配置與一個矢量源。點擊地圖後，您可以先清除源，然後將特徵添加到在地圖上呈現的源。

看到更新後的jsfiddle：

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

要有風格作爲標記的載體功能，看看下面這個例子，看看它是如何做：http://openlayers.org/en/v3.13.0/examples/icon.html

來源

2016-01-21 16:32:53

如何使用OpenLayers3將圖標放置在我地圖上的選定興趣點上？

回答

相關問題