У меня странная проблема со следующим кодом
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:11}),
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
target:'map'
});
var tree_coordinates = [[16.9071388, 52.4901917],[16.964607, 52.483672],[16.924611, 52.422056],[16.9207344, 52.4116696],[16.931853, 52.407052],
[16.9175298, 52.4045977],[16.9001992, 52.4026734],[16.9022317, 52.4062569],[17.021935, 52.400591],[16.82640,52.46133],[17.0587858,52.4159424],[17.022485,52.415796],
[17.020697,52.399145],[16.916187,52.390276],[17.029799,52.395083],[16.828552,52.464013]];
var forest_coordinates = [[16.901194,52.488556],[16.847889,52.460917],[16.841861,52.448778],[16.891983,52.452014],[16.878281,52.432017],
[16.894575,52.425061],[16.922955,52.414592],[16.923432,52.413709],[16.888663,52.4091499],[16.8480334,52.3875927],[16.9269882,52.3785911],[16.986917,52.305361]];
var stone_coordinates = [[16.897222,52.488056],[16.942774,52.463806],[16.881964,52.419917]];
var tree = [];
var forest = [];
var stone = [];
for(i=0;i<=15;i++){
tree.push(this["tree"+i] = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(tree_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
}));
}
for(i=0;i<=11;i++){
forest.push(this["forest"+i] = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(forest_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
}));
}
for(i=0;i<=2;i++){
stone.push(this["stone"+i] = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(stone_coordinates[i], 'EPSG:4326', 'EPSG:3857')),
}));
}
var tree_markers = new ol.source.Vector({
features: tree,
});
var forest_markers = new ol.source.Vector({
features: forest,
});
var stone_markers = new ol.source.Vector({
features: stone,
});
var treeVectorLayer = new ol.layer.Vector({
source: tree_markers,
});
var forestVectorLayer = new ol.layer.Vector({
source: forest_markers,
});
var stoneVectorLayer = new ol.layer.Vector({
source: stone_markers,
});
map.addLayer(treeVectorLayer);
map.addLayer(forestVectorLayer);
map.addLayer(stoneVectorLayer);
treeVectorLayer.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
src:'https://image.flaticon.com/icons/svg/46/46564.svg',
scale:0.08,
}))
}))
forestVectorLayer.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
src:'https://image.flaticon.com/icons/svg/1081/1081231.svg',
scale:0.08,
}))
}))
stoneVectorLayer.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
src:'https://image.flaticon.com/icons/svg/826/826968.svg',
scale:0.08,
}))
}))
</script>
</body>
</html>
Я не понимаю, почему «setStyle» не отображает значок изображения на «stoneVectorLayer». Все так же, как и в двух других векторных слоях, которые работают. Маркеры есть, потому что я вижу их, когда убираю setStyle. «setStyle» каким-то образом работает, потому что делает эти маркеры исчезающими или, по крайней мере, невидимыми, но я не понимаю, почему вместо этого не отображается значок.
Я провел некоторое тестирование, и это похоже на проблему с изображением. Некоторые изображения работают, когда я помещаю это туда, но некоторые нет. Изображение, используемое в этом коде, также не работает на других слоях, поэтому вопрос в том, почему OpenLayers не отображает некоторые изображения? .png копии одинаковых иконок тоже не работают.
Значок также правильно отображается в браузере Edge, но не в Firefox.