将地图标记添加到 Open Layers 6

Question

我的问题很简单：如何在特定的经纬度添加标记？

在开放图层中工作example page我创建了一个带有标记的新地图。

我使用 new ol.Feature 添加了标记，但似乎 无论我如何设置标记位置的坐标都不会改变。

谁能提供地图标记未显示在正确位置的原因的建议？

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([53, -2]), //This marker will not move.
  name: 'Somewhere',
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [iconFeature]
      }),
      style: 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'
        })
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([53,-2]),
    zoom: 6
  })
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<div id="map" class="map">
  <div id="popup"></div>
</div>

Answer 1

视图默认为3857投影，单位为米。

因此您输入的坐标距[0;0]53米，在离尼日利亚不远的海域。

你可以输入坐标3857，比如

geometry: new ol.geom.Point([-8185391,5695875]),

否则您必须将坐标投影到 3857，如评论中所示，使用 ol.proj.fromLonLat([53,-2])

请记住，坐标首先表示为经度，然后是纬度，如 doc 中所述。

Answer 2

您可以使用 ol.proj.fromLonLat 将 EPSG:4326 转换为 EPSG:3857，同时用于特征和地图居中。通常你必须这样做，因为默认投影是 EPSG:3857.

图标：

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
  name: 'Somewhere near Nottingham',
});

将 view/map 置于同一位置的中心：

view: new ol.View({
  center: ol.proj.fromLonLat([-2, 53]),
  zoom: 6
})

工作代码片段：

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
  name: 'Somewhere near Nottingham',
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [iconFeature]
      }),
      style: 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'
        })
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-2, 53]),
    zoom: 6
  })
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<div id="map" class="map">
  <div id="popup"></div>
</div>

将地图标记添加到 Open Layers 6

Adding map markers to Open Layers 6

javascript

openlayers

openlayers-6