使用 OpenLayers 在 OpenStreetMap-tile 上放置一个简单的点

我已经读到了很多线程，试图在我的OpenStreetMap上放置一个简单的点（矢量层）。我猜这是不同投影的问题，但我自己无法弄清楚。

我在下面的代码中做错了什么？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://openlayers.org/en/v3.13.1/build/ol.js" type="text/javascript"></script>
    <title>Openstret</title>
</head>
<body>
    <div id="map">
        <script type="text/javascript">
           var vectorSource = new ol.source.Vector();
            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point([0, 0])
            });
            vectorSource.addFeature(iconFeature);       
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });
            var olmap = new ol.Map({
                view: new ol.View({
                    center: [0, 0],
                    zoom: 2
                }),
                target: 'map'
            });
            var bakgrund = new ol.layer.Tile({source: new ol.source.OSM()});
            olmap.addLayer(bakgrund,vectorLayer);
        </script>
    </div>
</body>
</html>

ol.Map.addLayer 只接受一个参数。您必须分别添加这两个图层。

改变

olmap.addLayer(bakgrund,vectorLayer);

自

olmap.addLayer(bakgrund);
olmap.addLayer(vectorLayer);

您也没有在任何地方包含 ol.css 文件。确保添加它。这是一个工作 JSFiddle。

相关内容

最新更新

热门标签：