问题描述
我正在努力解决一些 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.2));
filter: drop-shadow(0 1px 4px rgba(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>解决方法
要改变特征的外观，你必须给它们一个样式，例如
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 图标，请访问 https://kml4earth.appspot.com/icons.html 并点击图标以获取链接。