如何使用 OpenLayers3 将图标放在地图中选定的兴趣点上？答案

【问题标题】：How can I use OpenLayers3 to put an icon on a selected point of interest in my map?如何使用 OpenLayers3 将图标放在地图中选定的兴趣点上？
【发布时间】：2016-04-27 20:56:18
【问题描述】：

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

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

但必须在所选点显示。

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

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

【问题讨论】：

这取决于。如果您希望该点位于地图中某个点的确切中心，您将需要一种方法来首先获取该点的坐标，例如通过 WMS 服务器。如果您只想在用户点击的地方放置一个标记，那应该很容易。如果您可以从您的示例中创建一个 JSFiddle，我愿意向您展示它是如何完成的。
@AlexandreDubé 在我原始帖子的末尾，我添加了我正在处理的示例的 JSFiddle。因此，正如您在 JSFiddle 中看到的那样，单击地图上的一个点，会检索到一条显示单击点坐标的警报消息，它显示如下内容：“COORDINATE: 41° 54′ 46″ N 12° 20′ 30 “E”我认为代表点击点的 GPS 坐标。我需要的只是在点击的点上添加类似“矢量图标”的东西来突出显示它。
在这里，我问了一个类似的问题，stackoverflow.com/questions/34731134/…，你有一个有效的 jsfiddle 示例作为问题的答案
这是一个工作示例jsfiddle.net/copser/0zpm9mws/5，我正在使用 openlayes3 在 openstreetmap 上显示标记

标签： javascript gis openlayers-3 javascript-framework arcgis-js-api

【解决方案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

【讨论】：