Leaflet_创建地图（官网示例）

Posted 2020-10-11 scevecn_博客园

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Leaflet_创建地图（官网示例）相关的知识，希望对你有一定的参考价值。

官网：http://leafletjs.com/examples.html

快速启动指南

http://leafletjs.com/examples/quick-start/example.html

一个简单的一步一步的引导，很快就会让你开始用传单的基础知识，包括建立一个单张地图（Mapbox瓷砖）在您的网页上，与标记、折线和弹出窗口，和事件处理。

<!DOCTYPE html>
<html>

    <head>
        <title>Leaflet</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
        <style TYPE="text/css">
            body {
                margin: 0px;
                padding: 0px;
            }
            /**
             * 单独设置mapid为00%不显示，可能float坍塌
             */
            
            html,
            body,
            #mapid {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="mapid">
        </div>
    </body>
    <script>
        var mymap = L.map(‘mapid‘).setView([51.505, -0.09], 13);

        L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw‘, {
            maxZoom: 18,
            attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ‘ +
                ‘<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ‘ +
                ‘Imagery ? <a href="http://mapbox.com">Mapbox</a>‘,
            id: ‘mapbox.streets‘
        }).addTo(mymap);

        L.marker([51.5, -0.09]).addTo(mymap)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

        L.circle([51.508, -0.11], 500, {
            color: ‘red‘,
            fillColor: ‘#f03‘,
            fillOpacity: 0.5
        }).addTo(mymap).bindPopup("I am a circle.");

        L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047]
        ]).addTo(mymap).bindPopup("I am a polygon.");

        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on(‘click‘, onMapClick);
    </script>

</html>

移动端

http://leafletjs.com/examples/mobile/example.html

在本教程中，您将学习如何创建一个全屏地图调整为移动设备如iPhone，iPad或android手机，以及如何轻松地检测并使用当前用户的位置。

<!DOCTYPE html>
<html>

    <head>
        <title>Leaflet</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
        <style TYPE="text/css">
            body {
                margin: 0px;
                padding: 0px;
            }
            /**
             * 单独设置mapid为00%不显示，可能float坍塌
             */
            
            html,
            body,
            #mapid {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="mapid">
        </div>
    </body>
    <script>
        var map = L.map(‘mapid‘).fitWorld();

        L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw‘, {
            maxZoom: 18,
            attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ‘ +
                ‘<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ‘ +
                ‘Imagery ? <a href="http://mapbox.com">Mapbox</a>‘,
            id: ‘mapbox.streets‘
        }).addTo(map);

        function onLocationFound(e) {
            var radius = e.accuracy / 2;

            L.marker(e.latlng).addTo(map)
                .bindPopup("You are within " + radius + " meters from this point").openPopup();

            L.circle(e.latlng, radius).addTo(map);
        }

        function onLocationError(e) {
            alert(e.message);
        }

        map.on(‘locationfound‘, onLocationFound);
        map.on(‘locationerror‘, onLocationError);

        map.locate({
            setView: true,
            maxZoom: 16
        });
    </script>

</html>

自定义图标的标记

http://leafletjs.com/examples/custom-icons/example.html

在这个漂亮的教程，你将学习如何轻松地定义自己使用的标记，你把地图上的图标。

//图标
var shadowUrl = "http://leafletjs.com/examples/custom-icons/leaf-shadow.png";
var orangeUrl = "http://leafletjs.com/examples/custom-icons/leaf-orange.png";
var redUrl = "http://leafletjs.com/examples/custom-icons/leaf-red.png";
var greenUrl = "http://leafletjs.com/examples/custom-icons/leaf-green.png";

<!DOCTYPE html>
<html>

    <head>
        <title>Leaflet</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
        <style TYPE="text/css">
            body {
                margin: 0px;
                padding: 0px;
            }
            /**
             * 单独设置mapid为00%不显示，可能float坍塌
             */
            
            html,
            body,
            #mapid {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map">
        </div>
    </body>
    <script>
        var map = L.map(‘map‘).setView([51.5, -0.09], 13);

        L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png‘, {
            attribution: ‘&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors‘
        }).addTo(map);

        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: ‘leaf-shadow.png‘,
                iconSize: [38, 95],
                shadowSize: [50, 64],
                iconAnchor: [22, 94],
                shadowAnchor: [4, 62],
                popupAnchor: [-3, -76]
            }
        });

        var greenIcon = new LeafIcon({
                iconUrl: ‘leaf-green.png‘
            }),
            redIcon = new LeafIcon({
                iconUrl: ‘leaf-red.png‘
            }),
            orangeIcon = new LeafIcon({
                iconUrl: ‘leaf-orange.png‘
            });

        L.marker([51.5, -0.09], {
            icon: greenIcon
        }).bindPopup("I am a green leaf.").addTo(map);
        L.marker([51.495, -0.083], {
            icon: redIcon
        }).bindPopup("I am a red leaf.").addTo(map);
        L.marker([51.49, -0.1], {
            icon: orangeIcon
        }).bindPopup("I am an orange leaf.").addTo(map);
    </script>

</html>

用GeoJSON

http://leafletjs.com/examples/geojson/example.html

在本教程中，您将学习如何创建和使用地图矢量产生互动GeoJSON目标

交互图

http://leafletjs.com/examples/choropleth/example.html

创造一个丰富多彩的互动为例分布图我们国家的人口密度和一些自定义控件GeoJSON。新闻网站会将这份爱。

待续

以上是关于Leaflet_创建地图（官网示例）的主要内容，如果未能解决你的问题，请参考以下文章

leaflet创建简单地图

Leaflet从USPS EDDM路由JSON数据创建地图/多边形

使用自定义创建的 Mapbox 样式（来自 Mapbox Studio）和 Leaflet

如何使用 react-leaflet 从 geojson 数据创建图例

基于leaflet地图可视化

leaflet加载天地图