如何更改 OpenLayers 标记（“功能”）的外观？

Question

I am struggling through some of the OpenLayers API and got it to display a number of Feature objects, but they are blue circles and I would like them to look somewhat more like the markers in Google Maps.我正在努力通过一些 OpenLayers API 并让它显示许多 Feature 对象，但它们是蓝色圆圈，我希望它们看起来更像谷歌地图中的标记。 How can I change their appearance?我怎样才能改变他们的外表？

 <: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 https://stackoverflow.com/questions/20946616/ol3-getfeature-from-layers-by-coordinate --> <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

To change the appearance of the features you must give them a style, for example要更改特征的外观，您必须给它们一个样式，例如

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

For more original Gooogle icons go to https://kml4earth.appspot.com/icons.html and click on an icon to get a link.有关更多原始 Google 图标 go 到https://kml4earth.appspot.com/icons.html并单击图标以获取链接。

如何更改 OpenLayers 标记（“功能”）的外观？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-30 17:37:28

如何更改 OpenLayers 标记（“功能”）的外观？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-30 17:37:28

解决方案1
1 已采纳 2021-05-30 17:37:28