javascript - Openlayers3 标记未显示在操作系统 map 上

Question

不久前，我在设置一个项目时得到了帮助，我需要在纽约标记随机建筑物并显示有关该建筑物的一些信息，长话短说，我已经使用 openlayers3 显示了一个 openstreetmap， View 已修复为 Astoria(纽约市皇后区)。 现在弹出窗口可以工作，但标记没有显示。

我尝试从此尝试并改变几何形状

几何:new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633]))

到此ol.geom.Point(ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857')),

并使用transform代替fromLonLat，但是没有显示它们，接下来是styleIcon中的src >，我已经下载了标准的 openlayers3 标记并尝试从图像文件夹中添加它，例如 src: 'img/icon.png'，但这不起作用。

有人可以帮助我了解发生了什么事吗？为什么地雷标记无法在 map 上正确显示？

这是JSFiddle对于这个项目，您将看到弹出窗口工作但没有标记。

这个JSFiddle已更新，现在可以正常工作，标记可以正确显示。

/* Create the map */

// Elements that make up the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

// Add a click handler to hide the popup.
// @return {boolean}.
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

// Create an overlay to anchor the popup
// to the map
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

// setting up coordinates for map to display
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857'); 

// setting up openlayer3 view
var view = new ol.View({
    center: city,
    zoom: 15
});

// Create the map
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        crossOrigin: 'anonymous'
      })
    })
  ],
  overlays: [overlay],
  target: 'map',
  view: view
});

// Setup markers
var markers = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633])),
        name: 'Crescent St',
        description: 'Apartment'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.917356, 40.763958])),
        name: 'Long Island City',
        desctiption: 'Apartment'
      })
    ]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixel',
      opacity: 0.75,
      src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png',
    })
  })
});
map.addLayer(markers);

// Setting up click handler for the map
// to render the popup
map.on('singleclick', function(evt) {
  var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
    return feature.get('name');
  })
  var coordinate = evt.coordinate;
  content.innerHTML = name;
  overlay.setPosition(coordinate);
});
map.on('pointermove', function(evt) {
  map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});

Answer 1

只需从您的 src 样式中删除 https 即可。

而不是src:'https://openlayers.org/en/v3.12.1/examples/data/icon.png'， putsrc: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',

您还需要缩小一点才能看到您的标记