リーフレットを使用して HTML で Tiandi をロードし、左上隅のズームアイコンと右下隅のロゴを削除します。

序文

このセクションでは、軽量の JavaScript ライブラリを使用して中国の Tiandi マップleafletをロードし、Gaode マップや Baidu マップと同様の効果を実現します。html

レンダリングは次のとおりです。
ここに画像の説明を挿入

早速、本題に入りましょう！！

1. 開発者権限を登録する

Tiantu マッププラットフォームにアカウントを登録し、開発者になるために申請する必要がありますが、ここでは個人の開発者に申請するため、申請プロセスについては説明しません。

Tianditu プラットフォーム: https://www.tianditu.gov.cn/

開発者インターフェイスに入る:
ここに画像の説明を挿入

コンソールに入り、クリックして新しいアプリケーションを作成します:

対応する情報を入力し、[送信] をクリックすると、作成が完了します。
ここに画像の説明を挿入

Key名称作成が完了すると、秘密鍵に相当する 1 つが作成され、安全に保管する必要があります。

2. 天空図をロードする

1. リーフレットをダウンロード

リーフレットのダウンロードアドレス：https ://leafletjs.com/download.html

図に示すように、リーフレットの公式 Web サイトにアクセスし、最新の安定バージョンコードをダウンロードします。
ここに画像の説明を挿入

ダウンロードが完了したら、images、leaflet.css、leaflet.js図に示すように、3 つのメインファイルを保持し、これらの 3 つのファイルをプロジェクトにインポートするだけです。
ここに画像の説明を挿入

2.Tiantuをロードする

1. まず、css ファイルと js ファイルを html にインポートします。

<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>

2. echarts と同様に、リーフレットはマップをロードし、高いフレーム高さのボックスを必要とするため、マップをロードするには高帯域幅の div タグを定義する必要があります。ボックスを一意に識別するために div に ID を与える必要があります (注) : いいえクラスを使用します。そうでない場合、リーフレットはそれを認識しません):

<style>
    #map {
      
      
        position: absolute;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
    }
</style>
<body>
<div id="map"></div>
</body>

3. Tiandi マップをロードするための js コードを記述します。

<script>
    //设置底图
    const map = L.map("map",{
      
      
        center: [23.82319, 109.02358],  //中心点[纬度，经度]
        zoom: 6,  //默认缩放等级
        crs: L.CRS.EPSG4326  //采用wgs84坐标系
    });
    //开发key
    const key = "xxxxxx";


    //xyz方式加载底图
    const tdt_url_bottom = "https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=";
    //xyz方式加载底图的标注
    const tdt_url_label = "https://t0.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=";

    //设置底图图层（url请求地址，偏移量，贴片尺寸大小，最小缩放等级，最大缩放层级）
    const layer_bottom = L.tileLayer(tdt_url_bottom + key, {
      
      
        zoomOffset: 1,
        tileSize: 256,
        minZoom: 7,
        maxZoom: 17
    });
    //设置底图标注
    const layer_label = L.tileLayer(tdt_url_label + key, {
      
      
        zoomOffset: 1,
        tileSize: 256,
        minZoom: 7,
        maxZoom: 17
    });
    //将图层丢到地图上
    layer_bottom.addTo(map);
    layer_label.addTo(map)
</script>

4. 効果は図に示すとおりです。
ここに画像の説明を挿入

3. 左上隅のズームアイコンと右下隅のロゴを削除します。

マップを作成するとき、オプションで 2 つのプロパティを設定します。

const map = L.map("map",{
    
    
    center: [23.82319, 109.02358],  //[纬度，经度]
    zoom: 6,  //默认缩放层级和layer的最小缩放层级一致
    crs: L.CRS.EPSG4326,  //坐标系的代码
    zoomControl: false,  //去掉左上角缩放图标
    attributionControl: false  //去掉右下角的logo
});

要約する

完全なコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leaflet加载天地图</title>
    <link rel="stylesheet" href="leaflet.css">
    <script src="leaflet.js"></script>
</head>
<style>
    #map {
      
      
        position: absolute;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
    }
</style>
<body>
<div id="map"></div>
</body>
<script>
    //设置底图
    const map = L.map("map",{
      
      
        center: [23.82319, 109.02358],  //[纬度，经度]
        zoom: 6,  //默认缩放等级
        crs: L.CRS.EPSG4326  //wgs84坐标系的代码
    });
    //开发key
    const key = "xxxx";


    //xyz方式加载底图
    const tdt_url_bottom = "https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=";
    //xyz方式加载底图标注
    const tdt_url_label = "https://t0.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=";

    //设置底图图层（url请求地址，偏移量，贴片尺寸大小，最大缩放层级）
    const layer_bottom = L.tileLayer(tdt_url_bottom + key, {
      
      
        zoomOffset: 1,
        tileSize: 256,
        minZoom: 7,
        maxZoom: 17
    });
    //设置底图标注
    const layer_label = L.tileLayer(tdt_url_label + key, {
      
      
        zoomOffset: 1,
        tileSize: 256,
        minZoom: 7,
        maxZoom: 17
    });
    //将图层丢到地图上
    layer_bottom.addTo(map);
    layer_label.addTo(map)
</script>
</html>