Leaflet 接入天地图服务

Leaflet 接入天地图服务

说明

接入天地图服务的步骤非常简单,不用担心注册申请 API Key 的步骤会很复杂,几分钟就能搞定,如果不需要显示路网、省市区域信息,将影像注记去除即可。

附上 Leaflet 官方文档地址:https://leafletjs.com/reference.html#tilelayer

源码

html 复制代码
<!DOCTYPE html>
<html lang="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="./leaflet/leaflet.css"/>
    <script src="./leaflet/leaflet.js"></script>
    <title>leaflet</title>
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
    var map = L.map('map', {
        center: [28.224276, 112.953187],
        zoom: 7
    });
    // 地形晕渲
    const terTileLayerUrl = "http://t0.tianditu.gov.cn/ter_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=替换为APIKey";
    // 影像底图
    const imgTileLayerUrl = "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=替换为APIKey";
    // 影像注记 - 路网、省市区域名称
    const ciaTileLayerUrl = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=替换为APIKey";
    // L.tileLayer(terTileLayerUrl).addTo(map);
    L.tileLayer(imgTileLayerUrl).addTo(map);
    L.tileLayer(ciaTileLayerUrl).addTo(map);
</script>

获取 API Key

  1. 注册天地图 https://uums.tianditu.gov.cn/register

  2. 进入开发页 http://lbs.tianditu.gov.cn 点击影像底图

  3. 点击申请 Key

  4. 创建新应用获取 Key

效果展示

影像底图 + 影像注记

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹11 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript