如何更改 OpenLayers 標記（“功能”）的外觀？
[英]How to change the appearance of an OpenLayers marker ("feature")?
問題描述
我正在努力通過一些 OpenLayers API 並讓它顯示許多 Feature 對象，但它們是藍色圓圈，我希望它們看起來更像谷歌地圖中的標記。 我怎樣才能改變他們的外表？
<: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>
1 個解決方案
解決方案1
1 已采納 2021-05-30 17:37:28
要更改特征的外觀，您必須給它們一個樣式，例如
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
})
})
);
有關更多原始 Google 圖標 go 到https://kml4earth.appspot.com/icons.html並單擊圖標以獲取鏈接。
Openlayers 3-MultiPoint要素上每個點的樣式/標記都不同
[英]Openlayers 3 - different style/marker for each point on a MultiPoint feature
使用OpenLayers.Feature.Vector在openlayer地圖中添加標記？
[英]Add a marker in openlayer map using the OpenLayers.Feature.Vector?
Gmaps4rails：當用戶點擊側邊欄中的鏈接時，如何更改標記的外觀？
[英]Gmaps4rails : How to change appearance of marker when user clicks link in sidebar?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.