摘要:根據該瓦片和計算出的行列號,即可取得鼠標點擊位置的像素值。指定級別緯度對應的像素行號像素坐標轉瓦片行列號像素坐標轉瓦片行列號
import turf from "turf" export default { TILE_SIZE: 256, /* * 獲取指定級別的瓦片數目 */ _getMapSize(level) { return Math.pow(2, level); }, /** * Convert a longitude coordinate (in degrees) to the tile X number at a * certain zoom level.經度轉瓦片列號 * @param longitude * the longitude coordinate that should be converted. * @param zoom * the zoom level at which the coordinate should be converted. * @return the tile X number of the longitude value. */ longitudeToTileX(longitude, zoom) { let px = this.longitudeToPixelX(longitude, zoom); return this.pixelXToTileX(px, zoom); }, /** * Convert a latitude coordinate (in degrees) to a tile Y number at a * certain zoom level.緯度轉瓦片行號 * @param latitude * the latitude coordinate that should be converted. * @param zoom * the zoom level at which the coordinate should be converted. * @return the tile Y number of the latitude value. */ latitudeToTileY(latitude, zoom) { let py = this.latitudeToPixelY(latitude, zoom); return this.pixelYToTileY(py, zoom); }, /** * Convert a latitude coordinate (in degrees) to a pixel Y coordinate at a * certain zoom level.經緯度坐標(緯度)轉屏幕像素坐標(Y) * * @param latitude * the latitude coordinate that should be converted. * @param zoom * the zoom level at which the coordinate should be converted. * @return the pixel Y coordinate of the latitude value. */ latitudeToPixelY(latitude, zoom) { let sinLatitude = Math.sin(latitude * Math.PI / 180); return (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI)) * (this.TILE_SIZE << zoom); }, /** * Convert a longitude coordinate (in degrees) to a pixel X coordinate at a * certain zoom level.經緯度坐標(經度)轉屏幕像素坐標(X) * * @param longitude * the longitude coordinate that should be converted. * @param zoom * the zoom level at which the coordinate should be converted. * @return the pixel X coordinate of the longitude value. */ longitudeToPixelX(longitude, zoom) { return (longitude + 180) / 360 * (this.TILE_SIZE << zoom); }, /* * 指定級別下,將宏觀上的經度轉換為對應列上的瓦片的像素矩陣列號(微觀) 例如:鼠標點擊地圖,鼠標位置在點擊的瓦片內的行列號(即使像素行列號)。根據該瓦片(png)和計算出的行列號,即可取得鼠標點擊位置的像素值。 */ _lngToPixelX(longitude, level) { let x = (longitude + 180) / 360; let pixelX = Math.floor(x * this._getMapSize(level) * 256 % 256); return pixelX; }, /* * 指定級別緯度對應的像素行號 */ _latToPixelY(latitude, level) { let sinLatitude = Math.sin(latitude * Math.PI / 180); let y = 0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI); let pixelY = Math.floor(y * this._getMapSize(level) * 256 % 256); return pixelY; }, /** * Convert a pixel X coordinate to the tile X number. * 像素坐標X轉瓦片行列號X * @param pixelX * the pixel X coordinate that should be converted. * @param zoom * the zoom level at which the coordinate should be converted. * @return the tile X number. */ pixelXToTileX(pixelX, zoom) { return Math.floor(Math.min(Math.max(pixelX / this.TILE_SIZE, 0), Math.pow(2, zoom) - 1)); }, /** * Converts a pixel Y coordinate to the tile Y number. * 像素坐標Y轉瓦片行列號Y * @param pixelY * the pixel Y coordinate that should be converted. * @param zoom * the zoom level at which the coordinate should be converted. * @return the tile Y number. */ pixelYToTileY(pixelY, zoom) { return Math.floor(Math.min(Math.max(pixelY / this.TILE_SIZE, 0), Math.pow(2, zoom) - 1)); }, }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105767.html
摘要:注意在代碼中將其替換為自己剛剛申請的運行,顯示地圖修改保存之后點擊運行就可以得到一幅矢量地圖了,此過程可能會稍微有點長,要耐心多等一會兒。 VectorMap.js是一個開源地圖渲染JavaScript庫, 可以使用WebGL或者HTML5兩種方式進行交互式矢量地圖 (包括矢量瓦片地圖,一般性矢量數據地圖)和 柵格瓦片地圖的渲染。 WebGL渲染意味著高性能,大數據, HTML5渲染意...
摘要:畢業兩年,一直在地圖相關的公司工作,雖然不是出身,但是也對地圖有些耳濡目染最近在看的東西,就拿做了一個關于的三維數據渲染的練手。 畢業兩年,一直在地圖相關的公司工作,雖然不是 GIS 出身,但是也對地圖有些耳濡目染;最近在看 WebGl 的東西,就拿 MapboxGL 做了一個關于 WebGL 的三維數據渲染的 DEMO 練手。 首先大致看了一下 MapboxGL 的 GLGS 到圖層...
摘要:畢業兩年,一直在地圖相關的公司工作,雖然不是出身,但是也對地圖有些耳濡目染最近在看的東西,就拿做了一個關于的三維數據渲染的練手。 畢業兩年,一直在地圖相關的公司工作,雖然不是 GIS 出身,但是也對地圖有些耳濡目染;最近在看 WebGl 的東西,就拿 MapboxGL 做了一個關于 WebGL 的三維數據渲染的 DEMO 練手。 首先大致看了一下 MapboxGL 的 GLGS 到圖層...
摘要:畢業兩年,一直在地圖相關的公司工作,雖然不是出身,但是也對地圖有些耳濡目染最近在看的東西,就拿做了一個關于的三維數據渲染的練手。 畢業兩年,一直在地圖相關的公司工作,雖然不是 GIS 出身,但是也對地圖有些耳濡目染;最近在看 WebGl 的東西,就拿 MapboxGL 做了一個關于 WebGL 的三維數據渲染的 DEMO 練手。 首先大致看了一下 MapboxGL 的 GLGS 到圖層...
閱讀 2161·2021-09-04 16:40
閱讀 1452·2021-08-13 15:07
閱讀 3605·2019-08-30 15:53
閱讀 3194·2019-08-30 13:11
閱讀 1069·2019-08-29 17:22
閱讀 1811·2019-08-29 12:47
閱讀 1469·2019-08-29 11:27
閱讀 2221·2019-08-26 18:42