leaflet 學習備忘

時間 2019-12-06

標籤 leaflet 學習備忘简体版

原文原文鏈接

leaflet 開源js地圖工具。很是好用。css

特性：jquery

徹底開源，能夠基於不一樣的第三方瓦片生成地圖。
基於原始GPS，無需轉換
可建立離線地圖，不依賴網絡
使用起來，靈活方便。

調用代碼備忘：網絡

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>leaflet</title>
    <link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>
    <style>
    html,body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        overflow:hidden;
    }
    </style>
</head>
<body>

<!--地圖容器-->
<div style="width:100%;height:100%;font-size:12px" id="map"></div>
<script>

var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
var layerList = {
    '道路地圖':L.layerGroup([
        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),
        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),
    ]),
    '影像地圖':L.layerGroup([
        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),
        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),
    ]),
    'OpenStreet':L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}),
    "ArcGIS": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{  
        maxZoom: 18,  
        reuseTiles: true
    }),
    "osm": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'),
    
    "google_m": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }),
    "google_Streets": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }),
    "google_Hybrid": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=s,h@189&gl=cn&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }),
    "google_Satellite": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }),
    "google_Terrain": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=p@189&gl=cn&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }),
};

var map = L.map("map", {
    center:[34,109],
    zoom: 5,
    layers: layerList['道路地圖'],
    zoomControl: true
});

L.control.scale({imperial:false}).addTo(map);
L.control.layers(layerList, null).addTo(map);

L.marker([34.2609052589,108.9423344082]).addTo(map);

var imageUrl = 'http://i2.hexunimg.cn/2016-03-09/182664922.jpg',
    imageBounds = [[34, 108], [33, 109]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。