由于某种原因，每当我尝试增加对在地图上显示图标的支持时，我的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
  })
});