Leaflet初始化

一、引入leaflet

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
或者

<!--integrity:&#45;&#45;子資源完整性 (SRI) 是一項安全功能，-->
<!--可讓瀏覽器驗證其抓取的文件 (例如，從一個 CDN) 是在沒有意外操作的情況下傳遞的。-->
<!--它的工作原理是允許您提供一個獲取的文件必須匹配的加密散列/哈希。-->
<!--crossorigin-->
<!--該枚舉屬性指定在加載相關圖片時是否必須使用CORS。可取的值包括以下兩個：-->

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>

或者
下載到本地引入同第一個
下載插件leaflet.ChineseTmsProviders.js.在leaflet下引入（

主要谷歌地圖、高德地圖、天地圖和 OSM 地圖

）

百度地圖的瓦片組織方式是不同的。
百度從中心點經緯度(0,0)度開始計算瓦片，
而谷歌地圖是從左上角經緯度(-180,90)度開始計算瓦片；
如果直接使用百度瓦片地圖服務會請求不到瓦片，
因此需要轉換一下。借助 leaflet-tileLayer-baidu 這個插件（我沒用過）

 

 

 但是天地圖更改了，需要修改為一下

TianDiTu: {
    Normal: {


        Map: "https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密鑰",
        Annotion: "https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密鑰"
    },
    Satellite: {
        Map: "https://t{s}.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=您的密鑰",
        Annotion: "https://t{s}.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=您的密鑰"
    },
    Terrain: {
        Map: "https://t{s}.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=您的密鑰",
        Annotion: "https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密鑰"
    },
    Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
}
二、在html頁面新建<div>設置好寬高

 

 

 在<script>標簽內聲明變量

 圖中所畫來源於

 

 

 

leaflet.ChineseTmsProviders.js。自己選擇要加載的地圖類型，把對應數據寫上去。maxzoom,minzoom。代表地圖最大最小縮放等級

 

再次聲明一個變量。

這是初始化地圖語法

var map = L.map('map',{
    center:[31.59, 120.29],//地圖中心經緯度
    zoom:13,//當前縮放等級
    minZoom:5,//最小縮放等級
    maxZoom:15,//最大縮放等級
    layers:[nomal1],
    dragging:true,//是否允許拖拽
    attributionControl: false,//是否去除右下角標志
    zoomControl:false//是否顯示地圖縮放圖例
});
運行項目地圖初始化完成