Question

前一段时间我曾帮助设置一个项目，我需要在纽约标记随机建筑，并显示一些关于建筑的信息，长话短说，我用openlayers3显示了一个openstreetmap，视图是修复Astoria（纽约皇后区）。现在弹出窗口正在工作，但标记没有显示。

我尝试过试验和更改此

中的几何体

geometry: 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，但没有显示它们，接下来的事情是src styleIcon，我已下载标准的openlayers3标记并试图从像src: 'img/icon.png'这样的图像文件夹中添加它，但这不起作用。

有人可以帮我理解发生了什么，为什么我的标记在地图上没有正确显示？

这是此项目的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', 放src: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',

您还需要缩小一点以查看您的标记

Openlayers3标记未显示在操作系统地图

1 个答案: