入门Leaflet之小Demo
生活随笔
收集整理的這篇文章主要介紹了
入门Leaflet之小Demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
入門 Leaflet 之小 Demo
寫在前面 ---- WebGIS 開發基礎之 Leaflet
- 地圖加載(底圖類型、切換):
- 地圖操作(縮放、平移、定位/書簽、動畫):
- 圖層管理(加載、移除、調整順序):
- 要素標繪(點/聚簇、線、面,符號化/靜態動態):
- 屬性標注(字段可選、樣式定制):
- 專題地圖(點、線、面,渲染):
- 查詢定位(屬性查詢、空間查詢/周邊搜索/緩沖區/面查點線面/點線查面、圖屬互查、綜合查詢):
- 信息窗口(入口、Popup、定制):
- 坐標轉換(地理與投影、不同地理坐標系):
- 空間運算(長度面積測量、點取坐標、緩沖區、相交包含關系):
- 動態監控(固定點狀態切換、車輛監控):
Demo 用到的庫
- Flat-UI?Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.Flat-UI 是基于 Bootstrap 的一個扁平化風格 web 開發框架。
- leaflet?an open-source JavaScript library for mobile-friendly interactive maps.Leaflet 是一個為建設交互性好適用于移動設備地圖,而開發的現代的、開源的 JavaScript 庫。
- Esri Leaflet?A lightweight set of tools for using ArcGIS services with Leaflet.一個輕量級的工具,基于 leaflet 利用 ArcGIS 服務。
PART 1: 地圖加載(底圖類型、切換)?Demo 1
- 庫引用
- 地圖加載與切換
基于 Demo 1 利用 H5 Geolocation API 定位到當前位置?Demo 1.1
- 庫引用 如上 Demo 1
- 判斷瀏覽器是否支持
- 定位成功或失敗
- 成功后初始化底圖
- 更多了解 geolocation 對象,可參考MDN Web 文檔
- 更多了解使用 marker 高亮顯示,可參考leaflet.marker.highlight插件
- 基于 Demo 1 利用 leaflet 封裝好的 H5 定位 API,定位到當前位置?Demo
PART 2: 地圖操作(縮放、平移、定位/書簽、動畫)?Demo 2
- 庫引用 如上 Demo 1
- 設置地圖縮放到指定圖層
- 圖層往里進一個圖層,放大
- 地圖平移至中心點
- 地圖飛到中心點
- 地圖飛到邊界的合適的位置
- 地圖定位到邊界的合適的位置
PART 3: 圖層管理(加載、移除、調整順序):?Demo 3
- 庫引用
- 使用 esri-leaflet 插件加載 ArcGIS 底圖服務
- 切換底圖(移除及加載)
PART 4: 要素標繪(點、線、面,符號化/靜態動態)?Demo 4
- 庫引用 如上 Demo 1
- 畫一個圓
- Maker 及自定義 Maker
- 畫一根線
- 畫一個多邊形
PART 5: 信息窗口(入口、Popup、定制)?Demo 5
- 庫引用 如上 Demo 1
- 畫一個 circle 并綁定一個 Popup
- 定位一個 marker,綁定一個自定義 Popup
- 實現動態改變 Popup 的內容
PART 6: geojson 數據繪制邊界(坐標轉換、渲染)?Demo 6
- 庫引用 如上 Demo 1
- 獲得 geojson 并處理數據
- 繪制邊界并添加圖例
- 返回邊界的填充色及圖列的樣式
- 鼠標移動上去的事件、鼠標移出的事件、發生點擊的事件
寫在后面
國內常用地圖服務資源加載插件
Leaflet.ChineseTmsProviders?Provider for Chinese Tms Service- Leaflet 調用國內各種地圖的功能十分復雜,幸好有 leaflet.ChineseTmsProviders 這個插件,這四種地圖直接就可以加載進來,十分方便。
- 使用方法很簡單可點擊上面鏈接去 GitHub 看使用說明,或拉這個 demo下來來瞧一瞧代碼。
優化 marker 相關的插件
- 提供了豐富多彩的圖標?Leaflet.awesome-markers, See the?demo map點擊預覽
- 強大的集聚插件?Leaflet.markercluster, See the?demo map
- 優化的 label?Leaflet.label, See the?demo map
- 優化重疊在一起的 markers?OverlappingMarkerSpiderfier-Leaflet, See the?demo map
- 優化在邊框上顯示不在當前視野中的 marker?Leaflet.EdgeMarker, See the?demo map
模塊化開發的加載包注意的問題
- 引 leaflet 包的時候不要忘記引用包里的 css?import 'leaflet/dist/leaflet.css';
關于 Leaflet 和 esri-leaflet 一起使用 L.esri.TiledMapLayer 加載 ArcGIS 服務切片底圖時,控制臺打印報錯?Uncaught ReferenceError: proj4 is not defined
- 查看了下源碼?if (!proj4) { warn('L.esri.TiledMapLayer is using a non-mercator spatial reference. Support may be available through Proj4Leaflet http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html');}?問題就出在這里,esri-leaflet 里的一個插件 proj4leaflet 依賴proj4,所以需要手動引入 proj4 這個包。
- 這個 GitHub 上面的提問及回答?Github esri-leaflet Issues
- 如果你是模塊化開發,需要再npm i proj4?然后再引入進來好了?import * as proj4 from 'proj4'; window['proj4'] = proj4;
- 如果你是常規開發,直接添加一個 script 標簽引用 CDN 資源上托管的Proj4js就是了?<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4-src.js"></script>
Leaflet 學習資料整理
- Leaflet-Develop-Guide ??-開發文檔及常用插件小結
參考
- GIS 制圖樂園 esri-leaflet 入門教程(1)-leaflet 介紹
- Awesome GIS(GIS Tech Stack 技術棧)
- 麻辣 GIS Leaflet 學習筆記
轉載于:https://www.cnblogs.com/Jeely/p/11132288.html
總結
以上是生活随笔為你收集整理的入门Leaflet之小Demo的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTTP协议 -- TCP/IP通信传输
- 下一篇: springmvc静态资源;mvc:de