瀏覽分類:

Openlayers

Openlayers 初體驗

載點

https://openlayers.org/download/

不知不覺中 Openlayers 已經從我剛開始用的 3.x 上升到了 5.x 我到現在只有更新到 4.x 。5.x 感覺變革還是挺多的用起來不太習慣。尤其是他官方的 example 全部都採用 import 真是很不方便… 所幸發現他有個老式的 QuickStart

關鍵就是要把他 import 的部分如創建 OSM 圖層時

new OSM 等價於 new ol.source.OSM

<!DOCTYPE html>
<html>

<head>
    <title>XYZ</title>
    <link rel="stylesheet" href="./v5.3.0-dist/ol.css" type="text/css">
    <style>
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .map{
            height:100%;
            width:100%;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <script src="./v5.3.0-dist/ol.js"></script>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://127.0.0.1:5500/TGOS/{z}/{x}/{y}.png'
                    })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([120.5, 23.5]),
                zoom: 8
            })
        });
    </script>
</body>

</html>