Leaflet_创建地图（官网示例）

时间：2017-10-20 14:11:19 阅读：266 评论：0 收藏：0 [点我收藏+]

官网：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/leaflet@1.2.0/dist/leaflet.css">
        <script src="https://unpkg.com/leaflet@1.2.0/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/leaflet@1.2.0/dist/leaflet.css">
        <script src="https://unpkg.com/leaflet@1.2.0/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/leaflet@1.2.0/dist/leaflet.css">
        <script src="https://unpkg.com/leaflet@1.2.0/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_创建地图（官网示例）

标签：nbsp 启动 new circle with ons 定义包括事件

原文地址：http://www.cnblogs.com/scevecn/p/7699145.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行