OpenLayers отображает белые экраны, когда я пытаюсь добавить к ним функциональность значков - PullRequest
0 голосов
/ 07 ноября 2019

По какой-то причине моя карта 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
  })
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...