javascript - 带有初始标记的 OpenLayer 加载 map

Question

我正在使用 OpenLayer v4.6.5 在我的 html 页面中显示 map 。我需要在我的 map 上显示标记。单击 map 时它工作正常，但我无法加载最初显示标记的 map 。为什么最后一行代码没有效果？

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

<script>
function createMap(){
        var coordinate = someCoordinate;
        var vectorSource = new ol.source.Vector({});
        var vectorLayer = new ol.layer.Vector({ source: vectorSource });
        var view = new ol.View({ center: ol.proj.fromLonLat(coordinate), zoom: 12, maxZoom: 19, minZoom: 5 });
        var map = new ol.Map({
            layers: [new ol.layer.Tile({ source: new ol.source.OSM({ key: 'myKey', crossOrigin: '' }) }), vectorLayer,],
            target: document.getElementById(mapId),
            controls: ol.control.defaults(),
            view: view
        });

        // create custom marker image with custom text in bottom
        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [12, 37],
                anchorXUnits: 'pixels', //'fraction'
                anchorYUnits: 'pixels',
                opacity: 0.8,
                src: 'marker.png'
            })
        });

        var marker;
        this.setMarker = function (coordinate) {
            marker = new ol.Feature(
                new ol.geom.Point(coordinate)
            );
            marker.setStyle(iconStyle);
            vectorSource.addFeature(marker);
        }

        map.on('click', function (evt) {
            setMarker(evt.coordinate);
        });

        return this;
}

var map = createMap();

// NOTE: This line of code has no effect!!!
map.setMarker(someCoordinate)

</script>

Answer 1

您需要调用 ol.proj.fromLonLat 将坐标转换为正确的投影(就像您对 map 中心所做的那样):

this.setMarker = function (coordinate) {
  marker = new ol.Feature(
    new ol.geom.Point(ol.proj.fromLonLat(coordinate))
  );
  marker.setStyle(iconStyle);
  vectorSource.addFeature(marker);
}

proof of concept link

代码片段:

var mapId = "map";

function createMap() {
  var coordinate = [-117.1610838, 32.715738];
  var vectorSource = new ol.source.Vector({});
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });
  var view = new ol.View({
    center: ol.proj.fromLonLat(coordinate),
    zoom: 12,
    maxZoom: 19,
    minZoom: 5
  });
  var map = new ol.Map({
    layers: [new ol.layer.Tile({
      source: new ol.source.OSM({
        key: 'myKey',
        crossOrigin: ''
      })
    }), vectorLayer, ],
    target: document.getElementById(mapId),
    controls: ol.control.defaults(),
    view: view
  });

  // create custom marker image with custom text in bottom
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [12, 37],
      anchorXUnits: 'pixels', //'fraction'
      anchorYUnits: 'pixels',
      opacity: 0.8,
      src: 'https://maps.google.com/mapfiles/ms/micons/blue.png'
    })
  });

  var marker;
  this.setMarker = function(coordinate) {
    marker = new ol.Feature(
      new ol.geom.Point(ol.proj.fromLonLat(coordinate))
    );
    marker.setStyle(iconStyle);
    vectorSource.addFeature(marker);
  }
  return this;
}

var map = createMap();
map.setMarker([-117.1610838, 32.715738])

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

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

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<div id="map" class="map"></div>