此代码有什么问题，即标记未在地图上显示？

Question

谁能告诉我为什么这不起作用。它实际上与示例相同https://openlayers.org/en/latest/examples/icon.html但在我的项目中不起作用。我正在使用“ ol”：“ ^ 6.3.1”。我花了很长时间没有结果来解决这个问题。

import {Map, View, Feature} from 'ol';
import OSM from 'ol/source/OSM';
import { fromLonLat, transform } from 'ol/proj';
import {Tile as TileLayer, Vector as VectorLayer}  from 'ol/layer'
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
import Point from 'ol/geom/Point';

  const iconFeature = new Feature({
    geometry: new Point([fromLonLat([-66.119412,-17.388694])]),
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
  });

  const iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/latest/examples/data/icon.png',
    }),
  });
  iconFeature.setStyle(iconStyle);

  const vectorSource = new VectorSource({
    features: [iconFeature]
  });

  const vectorLayer = new VectorLayer({
    source: vectorSource
  });

 var map = new Map({
    layers: [
      new TileLayer({
        source: new OSM()
      }), vectorLayer ],
    target: document.getElementById('map'),
    view: new View({
      center: fromLonLat([-66.119412,-17.388694]),
      zoom: 15
    })
  });

Answer 1

正如Mike在其评论中指出的，在Point构造函数的参数中，您还有一组方括号：

geometry: new Point([fromLonLat([-66.119412,-17.388694])]),

应该是

geometry: new Point(fromLonLat([-66.119412,-17.388694])),

proof of concept fiddle

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-66.119412, -17.388694])),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});

const iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://openlayers.org/en/latest/examples/data/icon.png',
  }),
});
iconFeature.setStyle(iconStyle);

const vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }), vectorLayer
  ],
  target: document.getElementById('map'),
  view: new ol.View({
    center: ol.proj.fromLonLat([-66.119412, -17.388694]),
    zoom: 15
  })
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v6.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v6.3.0/build/ol.js" type="text/javascript"></script>
<div id="map" class="map"></div>