如何更改 OpenLayers 标记 ("feature") 的外观？

Question

我正在努力通过一些 OpenLayers API 并让它显示一些特征对象，但它们是蓝色圆圈，我希望它们看起来更像 [=21] 中的标记=] 地图。我怎样才能改变它们的外观？

<!doctype html>
<html>
  <head>
      <!-- see http://openlayersbook.github.io/ch02-key-concepts-in-openlayers/example-02.html 
        https://openlayers.org/en/latest/examples/popup.html
    
    -->
    <title>OpenLayers Overlays</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
    type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <style type='text/css'>
    .ol-popup {
            font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif !important;
            font-size: 12px;
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 100px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
            color: #c3c3c3;
        }

    </style>    
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    <div id="overlay" style="background-color: white; border-radius: 10px; border: 1px solid black; padding: 5px 10px;">
    <script>

        var marker_data = [
            {name: 'Tower Bridge',        lat:51.5053591, lon:-0.0829981},
            {name: 'Dover Castle',        lat:51.120034,  lon:1.2712337},
            {name: 'Washington Monument', lat:38.8894541, lon:-77.0373655},
            {name: 'Eiffel Tower',        lat:48.8583701, lon:2.2922873},
            {name: 'Statue of Liberty',   lat:40.6892494, lon:-74.0466944}
        ];

        var layer = new ol.layer.Tile({
          source: new ol.source.OSM()
        });

        var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

        /*var overlay = new ol.Overlay({
          element: document.getElementById('overlay'),
          positioning: 'bottom-center'
        });*/

        var popup = document.getElementById('popup-content');
        var container = document.getElementById('popup');
        var closer = document.getElementById('popup-closer');

        var overlay = new ol.Overlay({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250
                }
        });

        var view = new ol.View({
          center: center,
          zoom: 6
        });

        var map = new ol.Map({
          target: 'map',
          layers: [layer],
          view: view
        });
        map.addOverlay(overlay);

        var styles = {
            icon: 'todo'
        };

        /*
        // register an event handler for the click event
        map.on('click', function(event) {
          // extract the spatial coordinate of the click event in map projection units
          var coord = event.coordinate;
          // transform it to decimal degrees
          var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
          // format a human readable version
          var hdms = ol.coordinate.toStringHDMS(degrees);
          // update the overlay element's content
          var element = overlay.getElement();
          element.innerHTML = hdms;
          // position the element (using the coordinate in the map's projection)
          overlay.setPosition(coord);
          // and add it to the map
          map.addOverlay(overlay);
        });*/

        var vsource = new ol.source.Vector();
        marker_data.forEach(function(data,index){
            var marker = new ol.Feature({
                type: 'icon',
                name:index,
                geometry: new ol.geom.Point(ol.proj.fromLonLat([data.lon, data.lat]))
            });
            vsource.addFeature(marker);
        });
        var animating = false;
        var vectorLayer = new ol.layer.Vector({
            source: vsource
        });

        map.on('singleclick', function (event) {
                if (map.hasFeatureAtPixel(event.pixel) === true) {
                    console.log(event);
                    var coordinate = event.coordinate;
                    /*
                    map.getFeatures({pixel: event.pixel,
                                     layers: [vectorLayer],
                                     success: function(featuresbylayer) {
                                        console.log(featuresbylayer);
                                     }});
                    */
                    var f = vsource.getClosestFeatureToCoordinate(coordinate);
                    console.log(f);
                    var fcoords = f.getGeometry().getCoordinates();
                    var index = f.get('name');
                    var marker_info = marker_data[index];

                    popup.innerHTML = '<b>'+marker_info['name']+'</b>';
                    overlay.setPosition(fcoords);
                } else {
                    overlay.setPosition(undefined);
                    closer.blur();
                }
        });


    map.addLayer(vectorLayer);
    </script>
  </body>
</html>

Answer 1

要更改功能的外观，您必须为它们指定样式，例如

marker.setStyle(
  new ol.style.Style({
    image: new ol.style.Icon({
      src: 'https://maps.google.com/mapfiles/kml/paddle/red-blank.png',
      anchor: [0.5, 1],
      scale: 0.5
    })
  })
);

如需更多原创 Gooogle 图标，请转至 https://kml4earth.appspot.com/icons.html 并单击图标以获得 link。

如何更改 OpenLayers 标记 ("feature") 的外观？

How to change the appearance of an OpenLayers marker ("feature")?

javascript

openlayers

openlayers-5