成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

leaflet常用功能

derek_334892 / 2879人閱讀

摘要：簡(jiǎn)介純?cè)诘貓D上進(jìn)行操作坐標(biāo)點(diǎn)路徑曲線等的一個(gè)庫(kù)只提供操作地圖實(shí)際加載某個(gè)地圖由開發(fā)者決定創(chuàng)建地圖對(duì)象頁(yè)面創(chuàng)建設(shè)置屬性撐滿整個(gè)屏幕設(shè)置中屬性使用初始化地圖對(duì)象為名字參數(shù)地圖中心坐標(biāo)位置參數(shù)地圖加載級(jí)別數(shù)字越大地圖加載越近為地圖加載瓦片圖層常用

簡(jiǎn)介

純JavaScript,在地圖上進(jìn)行操作(坐標(biāo)點(diǎn),路徑,曲線等)的一個(gè)庫(kù),只提供操作地圖API,實(shí)際加載某個(gè)地圖,由開發(fā)者決定

創(chuàng)建地圖對(duì)象

1) 頁(yè)面創(chuàng)建div,設(shè)置div屬性撐滿整個(gè)屏幕,設(shè)置div中id屬性
2) 使用leafletAPI初始化地圖對(duì)象

// mapDiv為id名字,setView參數(shù)1: 地圖中心坐標(biāo)位置  參數(shù)2: 地圖加載級(jí)別(數(shù)字越大,地圖加載越近) 
const map = L.map("mapDiv").setView([33.6528734492,104.7626939500], 5)

3) 為地圖加載瓦片圖層

常用API tileLayer

作用: 在頁(yè)面加載瓦片地圖圖片

  const corner1 = L.latLng(50.4838600000, 77.1125230000) // 地圖左上角
  const corner2 = L.latLng(22.5557360000, 138.0866980000) // 地圖右上角
  const bounds = L.latLngBounds(corner1, corner2) // 根據(jù)2個(gè)經(jīng)緯度來(lái)確定一個(gè)矩形 
  const attr = " Map data © OpenStreetMap contributors, © 
marker

作用: 根據(jù)給定經(jīng)緯度,在地圖上加載一個(gè)標(biāo)記
1) 加載默認(rèn)標(biāo)記


// title: 鼠標(biāo)移動(dòng)到標(biāo)記上,會(huì)顯示該信息 opacity: 設(shè)置標(biāo)記透明度
// zIndexOffset: 設(shè)置標(biāo)記重疊關(guān)系,場(chǎng)景: 在標(biāo)記上插入圖片,可設(shè)置該屬性,讓標(biāo)記在圖片的上層
L.marker([39.9094390677,116.3699341216], {title: "this is title", opacity: "0.8", zIndexOffset: 9999}).addTo(map)


2) 加載自定義icon(一般是圖片)


// iconUrl: 圖片url地址 iconSize: 圖片尺寸
 const myIcon = L.icon({
    iconUrl: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
    iconSize: [80, 30]
  });
  L.marker([40, 108], {icon: myIcon, alt: "this is google"}).addTo(map);

popup

作用: 在地圖上顯示文字


/*
* closeButton: 是否有關(guān)閉按鈕
* autoClose: 當(dāng)使用openOn的時(shí)候,用該屬性來(lái)確定是否關(guān)閉上一個(gè)
* closeOnClick: 鼠標(biāo)點(diǎn)擊,是否會(huì)關(guān)閉該popup
* className: 自定義class的名字,如果需要調(diào)整popup的位置,可通過(guò)設(shè)置class樣式來(lái)完成
* openOn(): 將彈出窗口添加到地圖并關(guān)閉上一個(gè)
* addTo(): 將該popup添加到地圖上
* */
L.popup({closeButton: true, autoClose: true, closeOnClick: false, className: "my-popup"})
  .setLatLng([38, 98])
  .setContent("
Hello world!
This is a nice popup.
")
  .addTo(map);

L.popup({closeButton: true, autoClose: true, closeOnClick: false})
  .setLatLng([37, 98])
  .setContent("
Hello world!")
  .addTo(map);

polyline

作用: 將經(jīng)緯度通過(guò)連接起來(lái),在地圖上形成一根線,如果要做從出發(fā)到結(jié)束動(dòng)畫效果,可使用第三方庫(kù)Leaflet.Polyline.SnakeAnim
參考地址: https://github.com/zettvs/Lea...


// css代碼
/*stroke-dasharray: 為svg設(shè)置虛線,數(shù)字越大,虛線段越長(zhǎng),
  設(shè)置2個(gè)參數(shù),參數(shù)1: 虛線的長(zhǎng)度  參數(shù)2: 虛線和虛線之間的間隔, 如果只設(shè)置一個(gè)參數(shù),說(shuō)明兩個(gè)值一樣大小
  stroke: 設(shè)置svg的顏色
*/
.testSvg {
    animation: animate 0.5s linear infinite;
    stroke-dasharray: 10;
    stroke: blue;
}
// js代碼
const polyline2 = L.polyline(latlngs, {weight: 6, className: "testSvg", opacity: 0.5})
    .addTo(leafletMap);
leafletMap.fitBounds(polyline2.getBounds());

  const polyline1 = L.polyline(latlngs, {color: "#fff", weight: 6, opacity: 0.5})
.addTo(leafletMap);
leafletMap.fitBounds(polyline1.getBounds());

circle

作用: 給定經(jīng)緯度位置上形成一個(gè)圓圈


/*
* radius: 圓直徑
* weight: 圓最外層圈的厚度大小
* color: 圓最外層圈的顏色
* fillColor: 圓里面的顏色
* */
L.circle([38, 98], {radius: 111200, weight: 1, color: "red", fillColor: "blue"}).addTo(map)

geojson

作用: 類似json格式,用來(lái)表示地理數(shù)據(jù),如果需要在地圖上對(duì)某個(gè)區(qū)域進(jìn)行顏色或者背景的覆蓋,請(qǐng)使用該技術(shù)
參考地址: http://geojson.io/#map=2/20.0...
https://zh.wikipedia.org/wiki...





使用方式:


// color: 覆蓋顏色 weight: 覆蓋深淺度 fillColor: 外圈顏色 fillOpacity:外圈透明度
L.geoJSON(geoJson數(shù)據(jù), {
      style: function () {
        return {
          color: "#263238",
          weight: 0.8,
          fillColor: "#002132",
          fillOpacity: 0.5
        };
      }
    })

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106622.html

相關(guān)文章

  • 入門Leaflet之小Demo

    入門 Leaflet 之小 Demo 寫在前面 ---- WebGIS 開發(fā)基礎(chǔ)之 Leaflet GIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates； GIS 開發(fā)概述：架構(gòu)模式、常用平臺(tái)和 SDK、二維三維 使用 Lea...

    Eminjannn 評(píng)論0 收藏0

  • Leaflet中L.Point與L.LatLng的區(qū)別聯(lián)系

    摘要：數(shù)組格式普通對(duì)象格式二者互相轉(zhuǎn)換這兩個(gè)函數(shù)會(huì)根據(jù)當(dāng)前地圖的縮放程度轉(zhuǎn)換地理點(diǎn)與像素點(diǎn)，返回值分別是和。方法返回值描述在同一縮放級(jí)別下，將地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo)。 Leaflet an open-source JavaScript library for mobile-friendly interactive maps ??Leaflet中有兩種表示坐標(biāo)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)，一種是最常用的Lat...

    Raaabbit 評(píng)論0 收藏0

  • 實(shí)用js庫(kù)－使用JS庫(kù)Leaflet.js生成世界地圖并獲取標(biāo)注地址經(jīng)緯度。

    摘要：大小僅僅只有，同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。微信公眾號(hào)嘻嘻圖如下使用生成世界地圖非常方便，配置參數(shù)記錄下，有興趣的可以看看本例中引入操作。當(dāng)用戶同意瀏覽器分享用戶位置后，地圖將自動(dòng)調(diào)整視窗中心為該位置。 介紹：Leaflet是一個(gè)開源的JavaScript庫(kù)，對(duì)移動(dòng)端友好且對(duì)地圖有很好的交互性。 大小僅僅只有 33 KB， 同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。 Leaflet設(shè)計(jì)的非常簡(jiǎn)...

    seasonley 評(píng)論0 收藏0

  • 實(shí)用js庫(kù)－使用JS庫(kù)Leaflet.js生成世界地圖并獲取標(biāo)注地址經(jīng)緯度。

    摘要：大小僅僅只有，同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。微信公眾號(hào)嘻嘻圖如下使用生成世界地圖非常方便，配置參數(shù)記錄下，有興趣的可以看看本例中引入操作。當(dāng)用戶同意瀏覽器分享用戶位置后，地圖將自動(dòng)調(diào)整視窗中心為該位置。 介紹：Leaflet是一個(gè)開源的JavaScript庫(kù)，對(duì)移動(dòng)端友好且對(duì)地圖有很好的交互性。 大小僅僅只有 33 KB， 同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。 Leaflet設(shè)計(jì)的非常簡(jiǎn)...

    Lucky_Boy 評(píng)論0 收藏0

  • 實(shí)用js庫(kù)－使用JS庫(kù)Leaflet.js生成世界地圖并獲取標(biāo)注地址經(jīng)緯度。

    摘要：大小僅僅只有，同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。微信公眾號(hào)嘻嘻圖如下使用生成世界地圖非常方便，配置參數(shù)記錄下，有興趣的可以看看本例中引入操作。當(dāng)用戶同意瀏覽器分享用戶位置后，地圖將自動(dòng)調(diào)整視窗中心為該位置。 介紹：Leaflet是一個(gè)開源的JavaScript庫(kù)，對(duì)移動(dòng)端友好且對(duì)地圖有很好的交互性。 大小僅僅只有 33 KB， 同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。 Leaflet設(shè)計(jì)的非常簡(jiǎn)...

    isaced 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<