如何使用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);
    });

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

但必须在所选点中显示。

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

编辑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在地图上选定的兴趣点上放置图标？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-21 16:32:53

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-21 16:32:53

解决方案1
1 已采纳 2016-01-21 16:32:53