zoukankan      html  css  js  c++  java

  • 【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>
  • 相关阅读:
    置换笔记
    7.23
    Conveyor Belts
    CF #134 A~D
    Blocks && Fixing the Great wall
    Kakuro
    Deadlock Detection
    关于KeyFile的破解，含注册机源代码
    BMP位图之代码实现
    BMP位图之8位位图（三）
  • 原文地址：https://www.cnblogs.com/lisicn/p/14874268.html
Copyright © 2011-2022 走看看