资讯专栏INFORMATION COLUMN

矢量瓦片相关计算函数

ChristmasBoy / 2156人阅读

摘要:根据该瓦片和计算出的行列号,即可取得鼠标点击位置的像素值。指定级别纬度对应的像素行号像素坐标转瓦片行列号像素坐标转瓦片行列号

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));
    },
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105767.html

相关文章

  • JavaScript矢量化地图库 – 快速入门

    摘要:注意在代码中将其替换为自己刚刚申请的运行,显示地图修改保存之后点击运行就可以得到一幅矢量地图了,此过程可能会稍微有点长,要耐心多等一会儿。 VectorMap.js是一个开源地图渲染JavaScript库, 可以使用WebGL或者HTML5两种方式进行交互式矢量地图 (包括矢量瓦片地图,一般性矢量数据地图)和 栅格瓦片地图的渲染。 WebGL渲染意味着高性能,大数据, HTML5渲染意...

    MiracleWong 评论0 收藏0
  • WebGIS 利用 WebGL 在 MapboxGL 上渲染 DEM 三维空间数据

    摘要:毕业两年,一直在地图相关的公司工作,虽然不是出身,但是也对地图有些耳濡目染最近在看的东西,就拿做了一个关于的三维数据渲染的练手。 毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染;最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手。 首先大致看了一下 MapboxGL 的 GLGS 到图层...

    tracy 评论0 收藏0
  • WebGIS 利用 WebGL 在 MapboxGL 上渲染 DEM 三维空间数据

    摘要:毕业两年,一直在地图相关的公司工作,虽然不是出身,但是也对地图有些耳濡目染最近在看的东西,就拿做了一个关于的三维数据渲染的练手。 毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染;最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手。 首先大致看了一下 MapboxGL 的 GLGS 到图层...

    RobinTang 评论0 收藏0
  • WebGIS 利用 WebGL 在 MapboxGL 上渲染 DEM 三维空间数据

    摘要:毕业两年,一直在地图相关的公司工作,虽然不是出身,但是也对地图有些耳濡目染最近在看的东西,就拿做了一个关于的三维数据渲染的练手。 毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染;最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手。 首先大致看了一下 MapboxGL 的 GLGS 到图层...

    sixgo 评论0 收藏0

发表评论

0条评论

ChristmasBoy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<