国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Leaflet 加載高德地圖

這篇具有很好參考價值的文章主要介紹了Leaflet 加載高德地圖。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

leaflet 高德底圖加載,Leaflet 從入門到精通,html5,前端,leaflet,webgis,GIS,高德地圖,javascript

前言

在前面的文章中,我們學習了如何使用 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)效果如下:
leaflet 高德底圖加載,Leaflet 從入門到精通,html5,前端,leaflet,webgis,GIS,高德地圖,javascript
leaflet 高德底圖加載,Leaflet 從入門到精通,html5,前端,leaflet,webgis,GIS,高德地圖,javascript

三、總結(jié)

在本文中,我們學習了如何在 Leaflet 中加載高德地圖,并構(gòu)建了地圖點擊事件和坐標轉(zhuǎn)換函數(shù)。通過實際案例,我們了解了如何在 leaflet 中使用高德地圖的矢量和影像底圖,并結(jié)合相關API進行項目開發(fā)。

文章參考

  • 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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權(quán),不承擔相關法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • leaflet-uniapp 縮放地圖的同時 顯示當前縮放層級

    leaflet-uniapp 縮放地圖的同時 顯示當前縮放層級

    記錄實現(xiàn)過程: 需求為移動端用戶在使用地圖時,縮放地圖的同時,可以獲知地圖此時縮放的級別。 效果圖如下:此時縮放地圖級別為13 map.on(\\\'\\\') 有對應的諸多行為 查看官網(wǎng)即可,這里根據(jù)需要為--zoomstart zoom zoomend 代碼如下: ?

    2024年02月14日
    瀏覽(23)
  • LeafLet加載自定義Legend的設計與實現(xiàn)

    LeafLet加載自定義Legend的設計與實現(xiàn)

    ????????眾所周知,在GIS的世界里,圖例和地圖永遠是一對一起出現(xiàn)的對象。在地圖上表示地理環(huán)境各要素,比如山脈、河流、城市、鐵路等所用的符號叫做圖例。這些符號所表示的意義,常注明在地圖的邊角上。圖例是表達地圖內(nèi)容的基本形式和方法,是現(xiàn)代地圖的語言

    2023年04月27日
    瀏覽(56)
  • 一.Leaflet入門

    一.Leaflet入門

    ??為什么第一個 GIS 前端開發(fā)框架選擇 Leaflet。 ??Leaflet 是一款輕量級,用于移動友好交互式地圖的JavaScript庫。輕量級的意思就是代碼總大小比較小。Leaflet利用HTML5和CSS3在現(xiàn)代瀏覽器上的優(yōu)勢,同時也可以在舊瀏覽器上訪問。它可以通過大量插件進行擴展,具有漂亮的、

    2024年01月25日
    瀏覽(23)
  • Leaflet開發(fā)入門

    Leaflet開發(fā)入門

    電子地圖已經(jīng)滲透到O2O、生活服務、出行等領域,傳統(tǒng)的GIS也孕育著互聯(lián)網(wǎng)基因。在國內(nèi)互聯(lián)網(wǎng)電子地圖領域,百度地圖和高德地圖較為出色,天地圖作為國家地理信息公共服務平臺,推出了面向互聯(lián)網(wǎng)的公眾版在線地圖服務與API。國內(nèi)在開放源代碼這一方面做得遠遠不夠,

    2024年02月11日
    瀏覽(21)
  • leaflet使用L.geoJSON加載文件,參數(shù)pointToLayer的使用方法(130)

    leaflet使用L.geoJSON加載文件,參數(shù)pointToLayer的使用方法(130)

    第130個 點擊查看專欄目錄 本示例的目的是介紹演示如何在vue+leaflet中加載geojson文件,這里介紹pointToLayer的使用方法。 點的處理方式不同于折線和多邊形。默認情況下,簡單標記使用為GeoJSON點繪制。在創(chuàng)建GeoJSON涂層時,我們可以通過pointToLayer在GeoJSON選項對象中傳遞函數(shù)來改

    2023年04月09日
    瀏覽(33)
  • 【leaflet】1. 初見

    【leaflet】1. 初見

    需求 要做游戲地圖了,看到大量產(chǎn)品都使用的leaflet,所以開始學習這個。 開發(fā)環(huán)境 版本號 描述 文章日期 2023-11-09 操作系統(tǒng) Win10 - 22H2 19045.3570 leaflet 1.9.4 leaflet 是一個 開源 的 JavaScript 庫,用于創(chuàng)建 交互式 的地圖應用程序。 它提供了一系列的工具和類,用于實現(xiàn)地圖的基本

    2024年02月03日
    瀏覽(20)
  • leaflet基本使用

    目錄 創(chuàng)建地圖(map) 添加圖層(tileLayer) 創(chuàng)建標記(marker) 圖標(icon/divIcon) 彈框(bindPopup) options選項 方法 工具提示(bindTooltip) options選項 窗格(pane) 常用方法 options選項 ? maxZoom:地圖最大的縮放等級 ? minZoom:地圖最小的縮放等級 ? zoom:地圖默認的縮放等級 ? center:地圖默認的中心

    2024年02月04日
    瀏覽(73)
  • leaflet 示例教程100+ 目錄

    leaflet 示例教程100+ 目錄

    目前已發(fā)表134篇文章 vue+leaflet系列教程旨在為開發(fā)者提供簡單快捷的 代碼示例 , 復制即可用 。在每一個示例中,解釋相應的API知識點,做到 簡易實現(xiàn),輕松學會 。 基礎設置 類別 標題 搭建 從0 到1 搭建開發(fā)環(huán)境 Layer 清除所有圖層的通用方法 Layer 刪除所有的marker圖層,保

    2024年02月08日
    瀏覽(43)
  • 前端加載高德離線地圖的解決方案

    前端加載高德離線地圖的解決方案

    核心是需要下載地圖瓦片放在本地,脫離在線地圖服務,實現(xiàn)離線加載地圖。 使用BIGMap工具下載地圖離線瓦片到本地 下載地址: http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-全能版 需要注冊試用版(免費) 試用版可以下載到16級別的瓦片,單次下載不能超過

    2023年04月08日
    瀏覽(18)
  • leaflet顯示大箭頭的線(124)

    leaflet顯示大箭頭的線(124)

    第124個 點擊查看專欄目錄 本示例的目的是介紹如何在vue+leaflet中顯示大箭頭的線。 直接復制下面的 vue+openlayers源代碼,操作2分鐘即可運行實現(xiàn)效果. 示例效果

    2024年02月03日
    瀏覽(16)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包