logo标签列表

如何在OpenLayers地图上添加标记？

javascriptopenlayers
8
我想在我的网站上使用OpenLayers库展示OpenStreetMap。我想添加一个标记，但标记没有显示在地图上。
我在谷歌上搜索过，找到了以下代码与我的代码相似。有很多添加标记的示例，但它们主要是针对谷歌地图的。我想使用开源地图。
 <!doctype html>
 <html lang="en">
   <head>
     <link rel="stylesheet" 
 href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css">
     <style>
       .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

///SHOW MAP
      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([106.8478695, -6.1568562]),
          zoom: 17
        })
      });
///ADD MARKER
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('marker.png', size, offset);
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon));
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon.clone()));

    </script>
    </body>
    </html>

代码片段：

///SHOW MAP
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([106.8478695, -6.1568562]),
    zoom: 17
  })
});
///ADD MARKER
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon.clone()));
.map {
  height: 400px;
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
<h2>My Map</h2>
<div id="map" class="map"></div>

我期望地图上显示标记，但是我没有看到标记。
2个回答
12
您正在使用OpenLayers 2代码将标记添加到OpenLayers 5地图中。
OpenLayers 3/4/5的等效代码如下：
    var markers = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: 'marker.png'
        })
      })
    });
    map.addLayer(markers);
    
    var marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([106.8478695, -6.1568562])));
    markers.getSource().addFeature(marker);
2

您没有提到您正在使用哪个版本的OpenLayers。因此，这里给出一个在OpenLayers v3上运行的例子：

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([39.8262, 21.4225]),
    zoom: 15
  })
});

var markerGeometry = new ol.geom.Point(ol.proj.transform([39.8262, 21.4225], 'EPSG:4326','EPSG:4326'));
var markerFeature = new ol.Feature({
    geometry: markerGeometry
});

var markerStyle = new ol.style.Icon(({
    src: 'https://github.com/openlayers/openlayers/blob/v3.20.1/examples/resources/logo-70x70.png'
}));

markerFeature.setStyle(new ol.style.Style({
    image: markerStyle,
}));

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

var markerLayer = new ol.layer.Vector({
    title: "RoutePoint",
    visible: true,
    source: vectorSource
});

map.addLayer(markerLayer);
.map {
  height: 400px;
  width: 100%;
}
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" rel="stylesheet" />

<title>OpenLayers example</title>
<h2>Sample Map</h2>
<div id="map" class="map"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接