По какой-то причине моя карта OpenLayers полностью исчезает, когда я пытаюсь добавить поддержку отображения значков на карте. Я посмотрел почти везде, где я могу безуспешно;Я также знаю, что страница загружается / должна загружаться должным образом, поскольку боковая панель html, которую я там поместил, загружается совершенно нормально, однако карта - нет. Я был бы признателен за любые отзывы об этом, если это возможно, так как я пока не смог найти значки на карте, если бы это не происходило с помощью различных решений, которые я нашел / нашел. Я прикрепил код ниже.
import "ol/ol.css";
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Map from "ol/Map";
import View from "ol/View";
import {Tile as TileLayer, Vector as VectorLayer} from "ol/layer";
import {defaults as defaultControls, FullScreen} from 'ol/control';
import OSM from "ol/source/OSM";
import {fromLonLat} from 'ol/proj';
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
const newportLonLat = [-71.307607, 41.529193];
const newportWebMercator = fromLonLat(newportLonLat)
var lat = 42;
var lng = -75;
var iconFeature = new Feature({
geometry: new Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')),
name: 'The icon',
population: 4000,
rainfall: 500
});
var iconStyle = new Style({
image: new Icon( /** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new Map({
controls: defaultControls().extend([
new FullScreen()
]),
layers: [
new TileLayer({
source: new OSM()
}),
new VectorLayer({
style: function(feature) {
return feature.get('style');
},
source: new VectorSource({features: [iconFeature]})
})
],
target: "map",
view: new View({
center: newportWebMercator,
zoom: 13
})
});