簡體   English   中英

使用OpenLayers在OpenStreetMap-tile上簡單說明一點

[英]Put a simple point at OpenStreetMap-tile using OpenLayers

我讀過很多線程,試圖在我的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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM