前言
在前面的文章中，我們學習了如何使用 Leaflet 創(chuàng)建一個基本的地圖。在本文中，我們將學習如何在 Leaflet 中加載高德地圖，并結(jié)合實際應用構(gòu)建地圖點擊事件。
一、介紹
高德地圖是一款由高德軟件提供的數(shù)字地圖服務，在國內(nèi)使用較為廣泛。高德地圖提供了豐富的地圖數(shù)據(jù)和 API 接口，支持 Web、移動端等多種平臺。本文中，我們將高德地圖的wms服務加入leaflet地圖對象，并構(gòu)建點擊事件輸出高德坐標和WGS-84坐標；
二、內(nèi)容
1.在 Leaflet 中加載高德地圖
地圖初始化教程看上一篇文章
在 Leaflet 中，我們可以使用 L.tileLayer() 方法加載高德地圖。以下是一個加載高德地圖的例子：
// 使用高德的WMS服務
var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: ['1', '2', '3', '4'],
minZoom: 1, // 最小放縮級別
maxZoom: 19 // 最大放縮級別
});
map.addLayer(layer);
如果想要加載影像圖層，則修改wms服務url:
var layer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
subdomains: ['1', '2', '3', '4'],
minZoom: 1,
maxZoom: 19
})
map.addLayer(layer);
subdomains 是一個可選參數(shù)，用于指定瓦片服務器的子域名。在這個例子中，高德地圖提供了四個子域名用于加載瓦片圖層，分別是 webrd01.is.autonavi.com、webrd02.is.autonavi.com、webrd03.is.autonavi.com 和 webrd04.is.autonavi.com。
通過使用多個子域名，可以提高地圖瓦片的加載速度，因為瀏覽器對于同一域名下的并行連接有限制。由于每個子域名都可以被視為不同的域名，因此使用多個子域名可以提高瀏覽器對瓦片的并行下載數(shù)量，從而提高地圖加載速度
在這個例子中，我們使用了高德地圖的 WMS 服務，通過 L.tileLayer() 方法創(chuàng)建了一個瓦片圖層，并將其添加到地圖容器中。
2.構(gòu)建點擊事件
我們這里構(gòu)建一個地圖點擊事件，點擊哪里則視圖飛行至指定位置并放大至指定視圖級別：
map.on("click", (evt) => {
console.log(evt);
map.flyTo(evt.latlng, 13); //參數(shù)1是中心點經(jīng)緯度，參數(shù)2是縮放級別
});
3.坐標轉(zhuǎn)換
當然我們點擊事件得到的坐標的坐標系是高德的火星坐標系，而非通用的wgs84坐標系，因此我們需要進行坐標轉(zhuǎn)換；
因為高德官方只提供了其他坐標系轉(zhuǎn)高德坐標系的API，我們這里想要將高德坐標轉(zhuǎn)換為WGS84坐標需要自定義轉(zhuǎn)換函數(shù)，代碼如下:
//定義一些常量
const PI = 3.1415926535897932384626;
const a = 6378245.0; //長半軸
const ee = 0.00669342162296594323; //扁率
/**
* GCJ02 轉(zhuǎn)換為 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
function gcj02towgs84 (lng, lat) {
lat = +lat
lng = +lng
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
let dlat = transformlat(lng - 105.0, lat - 35.0)
let dlng = transformlng(lng - 105.0, lat - 35.0)
let radlat = lat / 180.0 * PI
let magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
let sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
let mglat = lat + dlat
let mglng = lng + dlng
return [lng * 2 - mglng, lat * 2 - mglat]
}
}
/**
* 判斷是否在國內(nèi)，不在國內(nèi)則不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
function out_of_china (lng, lat) {
lat = +lat
lng = +lng
// 緯度3.86~53.55,經(jīng)度73.66~135.05
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
}
function transformlat (lng, lat) {
lat = +lat
lng = +lng
let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
return ret
}
function transformlng (lng, lat) {
lat = +lat
lng = +lng
let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
return ret
}
let coords = gcj02towgs84(evt.latlng.lng, evt.latlng.lat); // 將高德坐標轉(zhuǎn)化為wgs84坐標
4.完整代碼
以下是一個完整的在 Leaflet 中加載高德地圖的示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet 加載高德地圖</title>
<script src="https://lib.baomitu.com/leaflet/1.9.2/leaflet.js"></script>
<link rel="stylesheet" href="https://lib.baomitu.com/leaflet/1.9.2/leaflet.css">
<style>
* {
margin: 0;
padding: 0
}
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
//定義一些常量
const PI = 3.1415926535897932384626;
const a = 6378245.0; //長半軸
const ee = 0.00669342162296594323; //扁率
/**
* GCJ02 轉(zhuǎn)換為 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
function gcj02towgs84 (lng, lat) {
lat = +lat
lng = +lng
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
let dlat = transformlat(lng - 105.0, lat - 35.0)
let dlng = transformlng(lng - 105.0, lat - 35.0)
let radlat = lat / 180.0 * PI
let magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
let sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
let mglat = lat + dlat
let mglng = lng + dlng
return [lng * 2 - mglng, lat * 2 - mglat]
}
}
/**
* 判斷是否在國內(nèi)，不在國內(nèi)則不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
function out_of_china (lng, lat) {
lat = +lat
lng = +lng
// 緯度3.86~53.55,經(jīng)度73.66~135.05
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
}
function transformlat (lng, lat) {
lat = +lat
lng = +lng
let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
return ret
}
function transformlng (lng, lat) {
lat = +lat
lng = +lng
let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
return ret
}
var map = L.map("map").setView([31.5, 121.5], 10);
//使用高德的WMS服務
var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: ['1', '2', '3', '4'],
minZoom: 1,
maxZoom: 19
})
map.addLayer(layer);
map.on("click", (evt) => {
console.log("高德坐標：",evt.latlng.lat,evt.latlng.lng);
let coords = gcj02towgs84(evt.latlng.lng, evt.latlng.lat);
console.log("wgs-84坐標:",coords[1],coords[0]);
map.flyTo(evt.latlng, 13); //參數(shù)1是中心點經(jīng)緯度，參數(shù)2是縮放級別
});
</script>
</body>
</html>
實現(xiàn)效果如下:
三、總結(jié)
在本文中，我們學習了如何在 Leaflet 中加載高德地圖，并構(gòu)建了地圖點擊事件和坐標轉(zhuǎn)換函數(shù)。通過實際案例，我們了解了如何在 leaflet 中使用高德地圖的矢量和影像底圖，并結(jié)合相關API進行項目開發(fā)。文章來源：http://www.zghlxwxcb.cn/news/detail-843358.html
文章參考
- Leaflet 官方文檔：https://leafletjs.com/reference.html
項目地址
- Github地址
- 拓展閱讀
如果覺得我的文章對您有幫助，三連+關注便是對我創(chuàng)作的最大鼓勵！或者一個star??也可以??.文章來源地址http://www.zghlxwxcb.cn/news/detail-843358.html
到了這里，關于Leaflet 加載高德地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
