leaflet常用功能

derek_334892 發布于2019-08-26 10:42 / 2768人閱讀

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

簡介

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

創建地圖對象

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

// mapDiv為id名字,setView參數1: 地圖中心坐標位置  參數2: 地圖加載級別(數字越大,地圖加載越近) 
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) // 根據2個經緯度來確定一個矩形 
  const attr = " Map data © OpenStreetMap contributors, © 
marker
作用: 根據給定經緯度,在地圖上加載一個標記
1) 加載默認標記
// title: 鼠標移動到標記上,會顯示該信息 opacity: 設置標記透明度
// zIndexOffset: 設置標記重疊關系,場景: 在標記上插入圖片,可設置該屬性,讓標記在圖片的上層
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: 是否有關閉按鈕
* autoClose: 當使用openOn的時候,用該屬性來確定是否關閉上一個
* closeOnClick: 鼠標點擊,是否會關閉該popup
* className: 自定義class的名字,如果需要調整popup的位置,可通過設置class樣式來完成
* openOn(): 將彈出窗口添加到地圖并關閉上一個
* 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
作用: 將經緯度通過連接起來,在地圖上形成一根線,如果要做從出發到結束動畫效果,可使用第三方庫Leaflet.Polyline.SnakeAnim
參考地址: https://github.com/zettvs/Lea...
// css代碼
/*stroke-dasharray: 為svg設置虛線,數字越大,虛線段越長,
  設置2個參數,參數1: 虛線的長度  參數2: 虛線和虛線之間的間隔, 如果只設置一個參數,說明兩個值一樣大小
  stroke: 設置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
作用: 給定經緯度位置上形成一個圓圈
/*
* radius: 圓直徑
* weight: 圓最外層圈的厚度大小
* color: 圓最外層圈的顏色
* fillColor: 圓里面的顏色
* */
L.circle([38, 98], {radius: 111200, weight: 1, color: "red", fillColor: "blue"}).addTo(map)
geojson
作用: 類似json格式,用來表示地理數據,如果需要在地圖上對某個區域進行顏色或者背景的覆蓋,請使用該技術
參考地址: http://geojson.io/#map=2/20.0...
https://zh.wikipedia.org/wiki...


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

GPU云服務器云服務器 leaflet leaflet 國內cdn linux常用常用命令常用域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106622.html

入門Leaflet之小Demo

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

Eminjannn 2019-08-22 15:23 評論0 收藏0
Leaflet中L.Point與L.LatLng的區別聯系

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

Raaabbit 2019-08-23 15:39 評論0 收藏0
實用js庫－使用JS庫Leaflet.js生成世界地圖并獲取標注地址經緯度。

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

seasonley 2019-08-30 13:15 評論0 收藏0
實用js庫－使用JS庫Leaflet.js生成世界地圖并獲取標注地址經緯度。

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

Lucky_Boy 2019-08-22 10:50 評論0 收藏0
實用js庫－使用JS庫Leaflet.js生成世界地圖并獲取標注地址經緯度。

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

isaced 2019-08-01 16:06 評論0 收藏0