Openlayers 4.6 上的多个标记具有不同的图标?

Question

我正在尝试在Openlayers 4.6上使用具有不同图标的多个标记。 问题是在加载地图时，我只看到一个标记图像。我缺少什么以及如何解决此错误？

var lamarin = ol.proj.fromLonLat([29.1728363, 40.8950354]);
var view = new ol.View({
center: lamarin,
zoom: 4
});
var vectorSource = new ol.source.Vector({});
var places = [
[29.1728363, 40.8950354, 'http://www.binaprekast.com/wp-content/uploads/2018/04/MG_2371.jpg'],
[29.1741285, 40.8960586, 'http://www.binaprekast.com/wp-content/uploads/2018/04/3-4.jpg'],
[29.1728363, 40.8950354, 'http://www.binaprekast.com/wp-content/uploads/2018/04/DSC1554.png'],
];
for (var i = 0; i < places.length; i++) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: places[i][2],
})
});
}
vectorSource.addFeature(iconFeature);
iconFeature.getStyle(iconStyle);
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true,
style: function(feature, resolution) {
iconStyle.getImage().setScale(map.getView().getResolutionForZoom(18) / resolution);
return iconStyle;
}
});
var map = new ol.Map({
target: 'map',
view: view,
layers: [
new ol.layer.Tile({
preload: 3,
source: new ol.source.OSM(),
}),
vectorLayer,
],
loadTilesWhileAnimating: true,
});
map.once('postrender', function(event) {
view.animate({
center: lamarin,
zoom: 17,
duration: 10000,
mapTypeId: 'roadmap',
});
});

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map" class="map"></div>

Answer 1

您只是将最后一个添加到vectorSource.要向地图添加所有标记，请更改：

for (var i = 0; i < places.length; i++) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: places[i][2],
})
});
}
// outside the loop
vectorSource.addFeature(iconFeature);

自：

for (var i = 0; i < places.length; i++) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: places[i][2],
})
});
// inside the loop
vectorSource.addFeature(iconFeature);
}

概念验证小提琴

代码片段：

var lamarin = ol.proj.fromLonLat([29.1728363, 40.8950354]);
var view = new ol.View({
center: lamarin,
zoom: 15 // 5
});
var vectorSource = new ol.source.Vector({});
var places = [
[29.1728363, 40.8950354, 'https://openlayers.org/en/v4.6.5/examples/data/dot.png', '#8959A8'],
[29.1741285, 40.8960586, 'https://openlayers.org/en/v4.6.5/examples/data/dot.png', '#4271AE'],
[29.1733, 40.894, 'http://maps.google.com/mapfiles/ms/micons/blue.png', /* [113, 140, 0]*/ ],
];
var features = [];
for (var i = 0; i < places.length; i++) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
/* from https://openlayers.org/en/latest/examples/icon-color.html
rome.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/v4.6.5/examples/data/dot.png'
}))
})); */
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: places[i][2],
color: places[i][3],
crossOrigin: 'anonymous',
})
});
iconFeature.setStyle(iconStyle);
vectorSource.addFeature(iconFeature);
}
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true,
});
var map = new ol.Map({
target: 'map',
view: view,
layers: [
new ol.layer.Tile({
preload: 3,
source: new ol.source.OSM(),
}),
vectorLayer,
],
loadTilesWhileAnimating: true,
});

html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map" class="map"></div>