OpenLayers 基本标记

Question

我正在使用最新的 CDN 版本的 OpenLayers，但我很难将标记添加到我的地图。这是我到目前为止所拥有的....（为了客户的隐私，一些变量已被省略）

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([long, lat]),
    zoom: 14
  })
});

//Adding a marker on the map
var marker = new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([long, lat])
  ),
  name: name,
});

var iconStyle = new Style({
  image: new Icon(({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: icon_src
  }))
});

marker.setStyle(iconStyle);

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

var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});

map.addLayer(markerVectorLayer);

<div id="map" class="map" style="width:1022px;height:240px;margin-top:15px;"></div>

我在控制台中得到 "Style is not defined"，然后如果我尝试像示例中所示那样导入样式，它会提到如何只能在模块顶部进行导入...我认为需要 webpack 或类似的东西，我很确定我的网站不需要运行。我只需要一个非常基本的地图标记，比如红色的 Google 地图图标，没什么特别的。

Answer 1

OL5 CDN版语法同OL4

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({

将版本 4 添加为书签可能很有用 API，但如果有其他更改，请始终与版本 5 进行交叉检查 http://openlayers.org/en/v4.6.5/apidoc/index.html

OpenLayers 基本标记

OpenLayers basic marker

openlayers