【leafletjs】地图创建

案例一，使用在线地图服务：

<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="UTF-8">
    <title>地图测试</title>
    <link rel="stylesheet" href="./static/leaflet.css" />
    <script src="./static/leaflet.js"></script>
    <style type="text/css">
    body,
    html {
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="mapMain" style="cursor: default; 100%;height: 100%"></div>
</body>
<script type="text/javascript">
    var local_img_url = "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}";

    var map_global_settings = {
        zoomControl: false, //关闭左上角放大缩小
        doubleClickZoom: false, // 关闭双击放大
    };

    var set_lat = 37.55;
    var set_long = 122.08;

    var mymap = L.map('mapMain', map_global_settings).setView([set_lat, set_long], 10);

    L.tileLayer(
        local_img_url, 
        {
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,   //如果返回的图块为512*512（而不是256*256）则需要设置缩放偏移值-1
            accessToken: "pk.eyJ1IjoibGlzaTg4ODY2NiIsImEiOiJja2k3N2NnbGUwNnhtMnduMHB0ZmozbmtyIn0.kYrnzNZlgdxvsrmY9G85WQ",
        }).addTo(mymap);

    L.control.attribution({
        "position": "bottomright",
        "prefix": "中心 纬度：" + mymap.getCenter().lat + "经度：" + mymap.getCenter().lng
    }).addTo(mymap);
</script>
</html>

案例二，使用离线地图服务（瓦片图在本地文件夹）：

<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="UTF-8">
    <title>地图测试</title>
    <link rel="stylesheet" href="./static/leaflet.css" />
    <script src="./static/leaflet.js"></script>
    <style type="text/css">
    body,
    html {
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="mapMain" style="cursor: default; 100%;height: 100%"></div>
</body>
<script type="text/javascript">
    var local_img_url = './{z}/{y}/{x}.png';

    var map_global_settings = {
        zoomControl: false, //关闭左上角放大缩小
        doubleClickZoom: false, // 关闭双击放大
    };

    var set_lat = 37.55;
    var set_long = 122.08;

    var mymap = L.map('mapMain', map_global_settings).setView([set_lat, set_long], 10);

    L.tileLayer(
        local_img_url, 
        {
            maxZoom: 13,
            }).addTo(mymap);
    L.control.attribution({
        "position": "bottomright",
        "prefix": "中心 纬度：" + mymap.getCenter().lat + "经度：" + mymap.getCenter().lng
    }).addTo(mymap);
</script>
</html>

案例三，使用自建地图服务：

<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="UTF-8">
    <title>地图测试</title>
    <link rel="stylesheet" href="./static/leaflet.css" />
    <script src="./static/leaflet.js"></script>
    <style type="text/css">
    body,
    html {
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="mapMain" style="cursor: default; 100%;height: 100%"></div>
</body>
<script type="text/javascript">
    var local_img_url = 'http://127.0.0.1:8000/map/v2/google/{x}/{y}/{z}/';

    var map_global_settings = {
        zoomControl: false, //关闭左上角放大缩小
        doubleClickZoom: false, // 关闭双击放大
    };

    var set_lat = 37.55;
    var set_long = 122.08;

    var mymap = L.map('mapMain', map_global_settings).setView([set_lat, set_long], 10);

    L.tileLayer(
        local_img_url,
        {
            maxZoom: 18,
            tileSize: 512,
            zoomOffset: -1,
        }).addTo(mymap);

    L.control.attribution({
        "position": "bottomright",
        "prefix": "中心 纬度：" + mymap.getCenter().lat + "经度：" + mymap.getCenter().lng
    }).addTo(mymap);
</script>

</html>

相关阅读:
[PHP] class_exists类不存在时会调用__autoload函数
 [Redis] Redis的消息机制- 发布订阅
 [发电] 现在正式入驻爱发电平台
 [MySQL] PHP IP登录限制的实现
 [Redis] 哈希表的Rehash机制
 [Redis] redis的hash类型底层结构哈希表
 [Linux] ls命令的几个常用参数实现按时间/文件大小排序
 [Go] 在gin框架gorm下查询一对多的数据
 [Redis] list底层的数据结构
 [GO]go redis实现滑动窗口限流-redis版
原文地址：https://www.cnblogs.com/lisicn/p/14874268.html