成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

leaflet常用功能

derek_334892 / 2792人閱讀

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

簡介

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

創(chuàng)建地圖對象

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

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

3) 為地圖加載瓦片圖層

常用API tileLayer

作用: 在頁面加載瓦片地圖圖片

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

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


// title: 鼠標(biāo)移動到標(biāo)記上,會顯示該信息 opacity: 設(shè)置標(biāo)記透明度
// zIndexOffset: 設(shè)置標(biāo)記重疊關(guān)系,場景: 在標(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的時候,用該屬性來確定是否關(guān)閉上一個
* closeOnClick: 鼠標(biāo)點擊,是否會關(guān)閉該popup
* className: 自定義class的名字,如果需要調(diào)整popup的位置,可通過設(shè)置class樣式來完成
* openOn(): 將彈出窗口添加到地圖并關(guān)閉上一個
* 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)緯度通過連接起來,在地圖上形成一根線,如果要做從出發(fā)到結(jié)束動畫效果,可使用第三方庫Leaflet.Polyline.SnakeAnim
參考地址: https://github.com/zettvs/Lea...


// css代碼
/*stroke-dasharray: 為svg設(shè)置虛線,數(shù)字越大,虛線段越長,
  設(shè)置2個參數(shù),參數(shù)1: 虛線的長度  參數(shù)2: 虛線和虛線之間的間隔, 如果只設(shè)置一個參數(shù),說明兩個值一樣大小
  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)緯度位置上形成一個圓圈


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

geojson

作用: 類似json格式,用來表示地理數(shù)據(jù),如果需要在地圖上對某個區(qū)域進行顏色或者背景的覆蓋,請使用該技術(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/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)模式、常用平臺和 SDK、二維三維 使用 Lea...

    Eminjannn 評論0 收藏0

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

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

    Raaabbit 評論0 收藏0

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

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

    seasonley 評論0 收藏0

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

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

    Lucky_Boy 評論0 收藏0

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

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

    isaced 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<