TechOverflow Logo
TechOverflow

使用 Stamen 地形瓦片的最小 leaflet.js 示例

English Deutsch 简体中文

此最小自包含 HTML 示例可以作为你自己的 leaflet 应用程序的良好起点。使用 Stamen Terrain 瓦片不仅提供了自然地理的良好视图，还有不需要任何 API 密钥的额外优势。

minimal_leaflet_example.html
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
        <script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>
        <style>
            #mymap { height: 100%; }
        </style>
    </head>
    <body>
        <div id="mymap"></div>
        <script type="text/javascript">
            var layer = new L.StamenTileLayer("terrain");
            var map = new L.Map("mymap", {
                /* 中心：慕尼黑，德国 */
                center: new L.LatLng(48.1, 11.5),
                /* 显示西欧大部分地区 */
                zoom: 6
            });
            map.addLayer(layer);
        </script>
    </body>
</html>

示例的外观和感觉：

以德国慕尼黑为中心的 Stamen 地形瓦片最小 leaflet.js 地图示例

Check out similar posts by category: HTML, Javascript, Leaflet