摘要:數(shù)組格式普通對象格式二者互相轉(zhuǎn)換這兩個函數(shù)會根據(jù)當前地圖的縮放程度轉(zhuǎn)換地理點與像素點,返回值分別是和。方法返回值描述在同一縮放級別下,將地理坐標轉(zhuǎn)換為像素坐標。
Leaflet
an open-source JavaScript library for mobile-friendly interactive maps
??Leaflet中有兩種表示坐標點的數(shù)據(jù)結(jié)構(gòu),一種是最常用的LatLng,另一種則是Point。
L.LatLng??LatLng是表示一個具有緯度(lat)和經(jīng)度(lng)的地理坐標(以度為單位)。LatLng的以下組織形式均可用于leaflet的方法(除非有特殊說明):
map.panTo([50, 30]); //數(shù)組 map.panTo({lon: 30, lat: 50}); //簡單對象 map.panTo({lat: 50, lng: 30}); //簡單對象 map.panTo(L.latLng(50, 30)); //函數(shù)
var latlng = L.latLng(50.5, 30.5);
構(gòu)造函數(shù) | 描述 |
---|---|
L.latLng( |
通過給定的緯度和經(jīng)度創(chuàng)建一個地理坐標點(海拔高度是可選的,以米為單位) |
L.latLng( |
數(shù)組格式表示的地理坐標 |
L.latLng( coords) | 普通對象表示的地理坐標 |
??Point指的是用像素表示x和y的坐標點。Point的以下組織形式均可用于leaflet的方法和選項(除非有特殊說明):
map.panBy([200, 300]); //數(shù)組 map.panBy(L.point(200, 300)); //函數(shù)
var point = L.point(200, 300);
構(gòu)造函數(shù) | 描述 |
---|---|
L.point( |
用給定的x和y坐標創(chuàng)建一個Point對象。如果可選項round設(shè)置為true,則舍入x和y值。 |
L.point( |
數(shù)組格式 |
L.point( coords) | 普通對象格式 |
??這兩個函數(shù)會根據(jù)當前地圖的縮放程度(zoom)轉(zhuǎn)換地理點與像素點,返回值分別是Point和latLng。
方法 | 返回值 | 描述 |
---|---|---|
latLngToPoint( |
Point | 在同一縮放級別下,將地理坐標轉(zhuǎn)換為像素坐標。 |
pointToLatLng( |
LatLng | 在同一縮放級別下,將像素坐標轉(zhuǎn)換為地理坐標。 |
??由于LatLng和Point均不是繼承于Leaflet的L.Class對象,所以它們都不能拓展新的類,也不能通過include函數(shù)為其添加新的方法。
二者不同點??LatLng是描述經(jīng)緯度的坐標類,代表具有一定緯度和經(jīng)度的地理點,而Point描述的是在屏幕上位置的像素點,主要用于屏幕交互事件上,比如鼠標單擊雙擊事件,在屏幕上的觸控滑動事件等,即當鼠標事件發(fā)生時,相對于地圖圖層或地圖容器的點的像素坐標位置。在有些情況下,需要通過上述兩個函數(shù)方法對二者進行相互轉(zhuǎn)換。
如何在地圖上添加坐標點???既然L.LatLng和L.Point沒有繼承于L.Class,也就不會有相應(yīng)的方法將坐標點添加進地圖圖層,那怎么辦呢?
??您可以嘗試使用L.Layer父類下的L.Circle,通過它將坐標點添加進地圖,使用方法如下:
var latLng = L.latLng(30.594331217463765, 114.28321838378906); //創(chuàng)建坐標點 L.circle(latLng, {radius:300,color: "red", fillColor:"#f03",fillOpacity:1}).addTo(map); //將坐標點添加進圖層
注:將radius設(shè)置為0,在地圖上則顯示為一個點。為了方便您查看效果,將其設(shè)置為300。當然了,在這里的L.latlng只是一個保存坐標的作用。
上述內(nèi)容有任何錯誤,歡迎留言指出,謝謝~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102376.html
摘要:簡介純在地圖上進行操作坐標點路徑曲線等的一個庫只提供操作地圖實際加載某個地圖由開發(fā)者決定創(chuàng)建地圖對象頁面創(chuàng)建設(shè)置屬性撐滿整個屏幕設(shè)置中屬性使用初始化地圖對象為名字參數(shù)地圖中心坐標位置參數(shù)地圖加載級別數(shù)字越大地圖加載越近為地圖加載瓦片圖層常用 簡介 純JavaScript,在地圖上進行操作(坐標點,路徑,曲線等)的一個庫,只提供操作地圖API,實際加載某個地圖,由開發(fā)者決定 創(chuàng)建地圖對象...
摘要:實際中我們可能會用到不同的地圖,那么就對應(yīng)到不同坐標系的轉(zhuǎn)換,比如說,你有一份的數(shù)據(jù)服務(wù),你要展現(xiàn)在百度或者高德地圖上,這時候你就需要轉(zhuǎn)換了。 地圖坐標轉(zhuǎn)換 LBS,基于位置的服務(wù)(Location Based Service),近年來已經(jīng)無處不在,尤其是我們前端,相信或多或少都有接觸一些地圖API服務(wù),比如高德、百度啊、谷歌啊~但是用的時候可能看到下面這些字眼:比如BD09、火星坐標...
入門 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...
摘要:提示在官方教程的基礎(chǔ)上,增加了一些注釋以及鏈接,可幫助讀者更好的學習有不正確或有待改進的地方,歡迎批評指出。明確容器的高度。首先我們將初始化地圖,通過選定的地理坐標設(shè)置地圖視角以及縮放級別。 提示:在Leaflet官方教程的基礎(chǔ)上,增加了一些注釋以及鏈接,可幫助讀者更好的學習Leaflet,有不正確或有待改進的地方,歡迎批評指出。 Leaflet an open-source Java...
摘要:百度地圖創(chuàng)建標簽進行加載使用百度地圖需要百度地圖添加擴展,用于讓百度地圖支持地圖可能會遇見兩個問題地圖圖片錯位忘記加載中使用的一個主要問題是默認圖標的加載問題,詳見另外也可以考慮使用動態(tài)創(chuàng)建標簽的方法,類似百度地圖加載百度地圖因為本身支持的 webpack+百度地圖 創(chuàng)建 script標簽進行加載 export function MP(ak){ return new Prom...
閱讀 1416·2021-10-08 10:05
閱讀 3060·2021-09-26 10:10
閱讀 883·2019-08-30 15:55
閱讀 504·2019-08-26 11:51
閱讀 441·2019-08-23 18:10
閱讀 3849·2019-08-23 15:39
閱讀 658·2019-08-23 14:50
閱讀 767·2019-08-23 14:46