leaflet 学习备忘

leaflet 开源js地图工具。非常好用。
特性：
完全开源，可以基于不同的第三方瓦片生成地图。
基于原始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>
猜你喜欢
