我如何使用 OpenLayers3 在我的地图中选定的兴趣点上放置一个图标？

Question

我绝对是 OpenLayers 3 的新手，我创建了以下使用它的页面，并在其中显示了 Open Street 地图当用户点击一个点时，它会检索该点的 GPS 坐标：

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

我现在的问题是：如何在地图的 selected 点上放置指针图标之类的东西？我想放一个像本教程中所示的图标：http://openlayers.org/en/v3.13.0/examples/icon-negative.html

但必须在 selected 点显示。

我想做一些事情，例如让用户可以 select 在我的地图上找到一个兴趣点，但我找不到解决方案。我该怎么做？

编辑 1：这是我示例中的 JSFiddle：https://jsfiddle.net/AndreaNobili/uqcyudex/1/

Answer 1

您可以创建一个矢量图层以添加到您使用矢量源配置的地图中。单击地图后，您可以先清除源，然后向源添加要素，该要素将在地图中呈现。

查看更新后的 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]);

要将矢量特征设置为标记样式，请查看此示例以了解它是如何完成的：http://openlayers.org/en/v3.13.0/examples/icon.html

我如何使用 OpenLayers3 在我的地图中选定的兴趣点上放置一个图标？

How can I use OpenLayers3 to put an icon on a selected point of interest in my map?

javascript

gis

javascript-framework

openlayers-3

arcgis-js-api