Openlayers 5 图标未显示在地图上
Openlayers 5 icons are not showing on the map
我正在使用 OpenLayers 5 创建带有图标的简单地图。我遵循了 Icon Colors example 并且它有效。现在,我更改了数组中的源数据。例如,我有四个点要显示在地图上。
window.locs = [{
"y": "52,51241",
"x": "13,38961"
}, {
"y": "52,52107",
"x": "13,38773"
}, {
"y": "52,52488",
"x": "13,40369"
}, {
"y": "52,54902",
"x": "13,41655"
}];
我只改变了我们创建矢量源的部分,从一个一个地手动设置到使用循环。
for (var i in window.locs) {
var data = window.locs[i];
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
});
iconFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({
color: [113, 140, 0],
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
}))
}));
window.iconFeatures.push(iconFeature);
}
var vectorSource = new ol.source.Vector({
features: window.iconFeatures
});
很遗憾,地图上没有显示图标。如果我不使用循环,则会显示图标。我的数据很多,无法一一赋值
这是我的 JSFiddle:Fiddle
我该如何解决这个问题?
图层需要添加到地图
map.addLayer(vectorLayer);
我正在使用 OpenLayers 5 创建带有图标的简单地图。我遵循了 Icon Colors example 并且它有效。现在,我更改了数组中的源数据。例如,我有四个点要显示在地图上。
window.locs = [{
"y": "52,51241",
"x": "13,38961"
}, {
"y": "52,52107",
"x": "13,38773"
}, {
"y": "52,52488",
"x": "13,40369"
}, {
"y": "52,54902",
"x": "13,41655"
}];
我只改变了我们创建矢量源的部分,从一个一个地手动设置到使用循环。
for (var i in window.locs) {
var data = window.locs[i];
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
});
iconFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({
color: [113, 140, 0],
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
}))
}));
window.iconFeatures.push(iconFeature);
}
var vectorSource = new ol.source.Vector({
features: window.iconFeatures
});
很遗憾,地图上没有显示图标。如果我不使用循环,则会显示图标。我的数据很多,无法一一赋值
这是我的 JSFiddle:Fiddle
我该如何解决这个问题?
图层需要添加到地图
map.addLayer(vectorLayer);