leaflet 学习备忘

Posted on 2018-05-02 15:04 PHP-张工阅读(506) 评论(0) 编辑收藏举报

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>

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

ZjFree-自由自在

公告

搜索

最新随笔

积分与排名

随笔分类 (385)

阅读排行榜

推荐排行榜

leaflet 学习备忘