GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions

GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions

需求:如何根据WMTS服务的Capabilities描述文档得到,openlayers调用wmts服务时的matrixIds,origin和resolutions参数

方法:

  1. GoogleMapsCompatible (EPSG:3857)、GoogleCRS84Quad (EPSG:4326)、CGCS2000(EPSG:4490)(4490与4326差异很小,可以直接使用4326)可以直接查Web地图切片(瓦片)服务(WMTS)简单配置文件给出的通用比例尺分辨率(2.3.1节,2.2.2节
  2. 其他或自定义坐标系(投影),通过WMTS服务的Capabilities描述文档中ows:Identifier、TopLeftCorner、ScaleDenominator节点进行计算(2.3.3节

1 OGC

OGC ------开放地理空间信息联盟(Open Geospatial Consortium), 是一个国际组织,致力于制定和推广开放的地理空间标准和规范。这些标准涵盖了地理信息系统(GIS)、遥感、地图服务和其他地理空间技术。OGC的目标是提高不同系统和应用之间的数据互操作性和共享性。而这些所谓的标准其实就是一些接口或编码的技术文档,不同的厂商、各种 GIS 产品都可以对照这些文档来定义开放服务的接口、空间数据存储的编码、空间操作的方法。

OGC 已经是一个比较"官方"的标准化机构了,它不但包括了 ESRI、Google、Oracle 等业界强势企业作为其成员,同时还和 W3C、ISO、IEEE 等协会或组织结成合作伙伴关系。因此,OGC 的标准虽然并不带有强制性,但是因为其背景和历史的原因,它所制定的标准天然地具有一定的权威性。

OGC 目前提供的标准多达几十种,包括我们常用到的 WMS、WFS、WCS、WMTS 等等,还有一些地理数据信息的描述文档,比如 KML(Keyhole标记语言)、SFS(简单对象描述)、GML(地理标记语言)、SLD(地理数据符号化)等。

服务 全称
WMS Web Map Service(网络地图服务)
WFS Web Feature Service(网络要素服务)
WCS Web Coverage Service(网络覆盖服务)
WMTS Web Map Tile Service(网络地图切片(瓦片)服务) WMTS 是 OGC 首个支持 restful 风格的服务标准

2 WMTS

2.1 定义

WMTS(Web Map Tile Service)官网解释是"wmts定义了一组接口,用于使用具有预定义内容、范围和分辨率的分块图像对空间参考数据的地图分块进行基于Web的请求",简单说来wmts是 OGC 提出的可视化标准之一,用于在网络上高效地分发和显示地图切片(瓦片)。WMTS 通过将地图分割成固定大小的切片(瓦片)(tiles),并允许客户端按需请求这些切片(瓦片),从而实现了地图数据的快速加载和高效的缓存机制。

2.2 规范解析

首先在OGC官网下载WMTS实现标准文档(OpenGIS Web Map Tile Service Implementation Standard)

2.2.1 实现操作

  • GetCapabilities(必须实现,所以wmts都会有Capabilities文档用于说明各种参数)

    GetCapabilities操作获取Capabilities文档,该文档描述了如何识别WMTS资源或生成WMTS请求操作。元数据的主要内容是TileMatrixSet摘要信息和详细内容,如边界框、支持的坐标参考系(CRS)、是否有已知的刻度集以及关于多个级别的TileMatrix数据。如果有一个可选的"主题"部分,则无需为层属性指定任何继承规则。

  • GetTile(必须实现,所以才能让客户端请求到切片(瓦片))

    GetTile操作获取切片(瓦片)资源,以预定义格式请求特定tileMatrix集的特定tileMatrix。图块资源表示一个图层的地图表达结果的一小块。

  • GetFeatureInfo(可选)

    GetFeatureInfo操作获取要素信息(FeatureInfo)资源。该资源提供了图块地图中某一特定像素位置处地物要素的信息,与 WMS 中 GetFeatureInfo 操作的行为相似,以文本形式通过提供比如专题属性名称及其取值的方式返回相关信息。

2.2.2 Capabilities文档

2.2.3.1 Capabilities文档结构

Capabilities文档是xml结构形式,文档描述了服务中可用的资源以及对接该服务的必备条件,以下这几个节点信息是从能力文件中需要获取的对接WMTS服务的关键参数。

以天地图Capabilities文档为例,重点解释contents下的节点

2.2.3.1.1 layer(图层)
  • WMTS文档定义


  • 天地图Capabilities文档
概念 解释
Title 图层名
Identifier 图层标识符
WGS84BoundingBox,BoundingBox 图层地图范围(纬度,经度)
Style 图层的样式
TileMatrixSetLink 矩阵集链接,这部分只提供比例尺集合的标识符,然后需要到TileMatrixSet中去索引到对应的比例尺集合

根据不同服务还可能有Format、ResourceURL等字段

2.2.3.1.2 TileMatrixSet(切片(瓦片)矩阵集)

WMTS规定使用切片(瓦片)矩阵集(Tile Matrix Set)来表示切割后的地图,如下图所示。切片(瓦片)就是包含地理数据的矩形影像,一幅地图按一定的切片(瓦片)大小被切割成多个切片(瓦片),形成切片(瓦片)矩阵,一个或多个切片(瓦片)矩阵即组成切片(瓦片)矩阵集。不同的切片(瓦片)矩阵具有不同的分辨率,每个切片(瓦片)矩阵由切片(瓦片)矩阵标识符(一般为切片(瓦片)矩阵的序号,分辨率最低的一层为第0层,依次递增)进行标识。

可以看到,不同级别的切片(瓦片)组合起来类似金字塔型矩阵,切片(瓦片)数量由少逐渐变多,分辨率(resolution)由粗略到精细,比例尺(scale denominator)由高到低

切片(瓦片)矩阵中的每个切片(瓦片)由切片(瓦片)的行列号来标识,行列号分别从切片(瓦片)矩阵左上角点所在的切片(瓦片)开始算起,起始行列值是(0,0),依次向下向右增加,如下图,也就是取切片(瓦片)的索引号。

概念 解释 举例
左上角(TopLeftCorner) WMTS 标准中,TopLeftCorner 是描述矩阵集(TileMatrixSet)的左上角坐标的字符序列,由坐标X和坐标Y组成。航空和海运部门通常期望纬度在经度之前。虽然没有标准明确规定纬度必须在经度之前,但是一般来说都会采用纬度在经度之前的顺序。 比如:天地图Capabilities文档中的矩阵集中<TopLeftCorner>90.0 -180.0</TopLeftCorner>中应该是先纬度后经度的顺序
边界框的左上角坐标(TileMatrixmMinX,TileMatrixMaxY) 注意边界框的原点是左下角
矩阵的宽(MatrixWidth)和高(MatrixHeight) 在row方向和col方向上的切片(瓦片)数
切片(瓦片)的行(TileRow)和列(TileCol) 行列值分别从切片(瓦片)矩阵左上角点所在的切片(瓦片)开始算起,起始行列值是(0,0),依次向下向右增加
切片(瓦片)的宽(TileWidth)和高(TileHeight) 一般是256*256,512*512
  • WMTS文档定义


  • 天地图Capabilities文档
概念 解释
Identifier 当前级别矩阵的ID
TopLeftCorner 当前切片(瓦片)的左上角位置,此处是经纬度直投影
TileWidth、TileHeight 切片(瓦片)的像素长宽,即 256 × 256 像素
MatrixWidth、MatrixHeight 代表这一级切片(瓦片)横向纵向跨度有多少个切片(瓦片)
ScaleDenominator 比例尺分母(直译,其值是一个像素代表的实际距离与像素尺寸的比值)

2.3 分辨率(resolution)获取

WMTS 服务器只提供有限种坐标系和有限种比例尺的服务,为了提高客户端和服务器的互操作能力,WMTS 提出通用比例尺集(Well-known scale set)的概念。通用比例尺集是 WMTS 服务器之间的一个协定,由一个公共的坐标参考系统和一组公共的比例尺集合组成。

通用比例尺集有:

  • GoogleCRS84Quad
  • GoogleMapsCompatible
  • GlobalCRS84Scale
  • GlobalCRS84Pixel
javascript 复制代码
// 天地图经纬度投影分辨率可以直接使用
const GoogleCRS84QuadResolution = [1.40625000000000, 0.703125000000000, 0.351562500000000, 0.175781250000000,
    0.0878906250000000, 0.0439453125000000, 0.0219726562500000, 0.0109863281250000,
    0.00549316406250000, 0.00274658203125000, 0.00137329101562500, 0.000686645507812500,
    0.000343322753906250, 0.000171661376953125, 0.0000858306884765625,
    0.0000429153442382812, 0.0000214576721191406, 0.0000107288360595703, 0.00000536441802978516
];


// 天地图莫卡托投影分辨率可以直接使用
const GoogleMapsCompatibleResolutions = [156543.0339280410, 78271.51696402048, 39135.75848201023,
    19567.87924100512, 9783.939620502561, 4891.969810251280, 2445.984905125640,
    1222.992452562820, 611.4962262814100, 305.7481131407048, 152.8740565703525,
    76.43702828517624, 38.21851414258813, 19.10925707129406, 9.554628535647032,
    4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395
];


const GlobalCRS84PixelResolution= [240000, 120000, 60000, 40000,
    20000, 10000, 4000, 2000,
      1000, 500, 166, 100,
      33, 16, 10, 3,
      1, 0.33
];

const GlobalCRS84ScaleResolutions = [1.25764139776733, 0.628820698883665, 0.251528279553466,
    0.125764139776733, 0.0628820698883665, 0.0251528279553466, 0.0125764139776733, 0.00628820698883665,
    0.00251528279553466, 0.00125764139776733, 0.000628820698883665, 0.000251528279553466,
    0.000125764139776733, 0.0000628820698883665, 0.0000251528279553466, 0.0000125764139776733,
    0.00000628820698883665, 0.00000251528279553466, 0.00000125764139776733, 0.000000628820698883665,
    0.00000025152827955346
];

根据Web地图切片(瓦片)服务(WMTS)简单配置文件,可以查到两种投影的分辨率

2.3.1 GoogleMapsCompatible(EPSG::3857)

xml 复制代码
<TileMatrixSet>
         <ows:Title>Google Maps Compatible for the World</ows:Title>
         <ows:Identifier>WorldWebMercatorQuad</ows:Identifier>
         <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
            <ows:LowerCorner>-20037508.3427892 -20037508.3427892</ows:LowerCorner>
            <ows:UpperCorner>20037508.3427892 20037508.3427892</ows:UpperCorner>
         </ows:BoundingBox>
         <ows:SupportedCRS>
             urn:ogc:def:crs:EPSG::3857
         </ows:SupportedCRS>
         <WellKnownScaleSet>
             urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible
         </WellKnownScaleSet>
         <TileMatrix>
            <ows:Identifier>0</ows:Identifier>
            <ScaleDenominator>559082264.0287178</ScaleDenominator>
            <TopLeftCorner>
                -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>1</MatrixWidth>
            <MatrixHeight>1</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>1</ows:Identifier>
            <ScaleDenominator>279541132.0143589</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>2</MatrixWidth>
            <MatrixHeight>2</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>2</ows:Identifier>
            <ScaleDenominator>139770566.0071794</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>4</MatrixWidth>
            <MatrixHeight>4</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>3</ows:Identifier>
            <ScaleDenominator>69885283.00358972</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>8</MatrixWidth>
            <MatrixHeight>8</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>4</ows:Identifier>
            <ScaleDenominator>34942641.50179486</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>16</MatrixWidth>
            <MatrixHeight>16</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>5</ows:Identifier>
            <ScaleDenominator>17471320.75089743</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>32</MatrixWidth>
            <MatrixHeight>32</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>6</ows:Identifier>
            <ScaleDenominator>8735660.375448715</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>64</MatrixWidth>
            <MatrixHeight>64</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>7</ows:Identifier>
            <ScaleDenominator>4367830.187724357</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>128</MatrixWidth>
            <MatrixHeight>128</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>8</ows:Identifier>
            <ScaleDenominator>2183915.093862179</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>256</MatrixWidth>
            <MatrixHeight>256</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>9</ows:Identifier>
            <ScaleDenominator>1091957.546931089</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>512</MatrixWidth>
            <MatrixHeight>512</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>10</ows:Identifier>
            <ScaleDenominator>545978.7734655447</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>1024</MatrixWidth>
            <MatrixHeight>1024</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>11</ows:Identifier>
            <ScaleDenominator>272989.3867327723</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>2048</MatrixWidth>
            <MatrixHeight>2048</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>12</ows:Identifier>
            <ScaleDenominator>136494.6933663862</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>4096</MatrixWidth>
            <MatrixHeight>4096</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>13</ows:Identifier>
            <ScaleDenominator>68247.34668319309</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>8192</MatrixWidth>
            <MatrixHeight>8192</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>14</ows:Identifier>
            <ScaleDenominator>34123.67334159654</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>16384</MatrixWidth>
            <MatrixHeight>16384</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>15</ows:Identifier>
            <ScaleDenominator>17061.83667079827</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>32768</MatrixWidth>
            <MatrixHeight>32768</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>16</ows:Identifier>
            <ScaleDenominator>8530.918335399136</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>65536</MatrixWidth>
            <MatrixHeight>65536</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>17</ows:Identifier>
            <ScaleDenominator>4265.459167699568</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>131072</MatrixWidth>
            <MatrixHeight>131072</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>18</ows:Identifier>
            <ScaleDenominator>2132.729583849784</ScaleDenominator>
            <TopLeftCorner>
               -20037508.3427892 20037508.3427892
            </TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>262114</MatrixWidth>
            <MatrixHeight>262114</MatrixHeight>
         </TileMatrix>
      </TileMatrixSet>

参数如下:

CRS: urn:ogc:def:crs:EPSG:6.18:3:3857

WGS 84 / Pseudo-Mercator

BBOX LowerCorner: -20037508.3427892 -20037508.3427892

BBOX UpperCorner: 20037508.3427892 20037508.3427892

WellKnownScaleSet:

urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible

TopLeftCorner: -20037508.3427892 20037508.3427892

TileWidth: 256

TileHeight: 256

Zoom level id Scale Denominator Pixel Size (m) Matrix Width Matrix Height
0 559082264.0287178 156543.0339280410 1 1
1 279541132.0143589 78271.51696402048 2 2
2 139770566.0071794 39135.75848201023 4 4
3 69885283.00358972 19567.87924100512 8 8
4 34942641.50179486 9783.939620502561 16 16
5 17471320.75089743 4891.969810251280 32 32
6 8735660.375448715 2445.984905125640 64 64
7 4367830.187724357 1222.992452562820 128 128
8 2183915.093862179 611.4962262814100 256 256
9 1091957.546931089 305.7481131407048 512 512
10 545978.7734655447 152.8740565703525 1024 1024
11 272989.3867327723 76.43702828517624 2048 2048
12 136494.6933663862 38.21851414258813 4096 4096
13 68247.34668319309 19.10925707129406 8192 8192
14 34123.67334159654 9.554628535647032 16384 16384
15 17061.83667079827 4.777314267823516 32768 32768
16 8530.918335399136 2.388657133911758 65536 65536
17 4265.459167699568 1.194328566955879 131072 131072
18 2132.729583849784 0.5971642834779395 262144 262144

其中:

  • Pixel Size单位是米(m)
  • TopLeftCorner即为ol中的origin数组
  • 各级Zoom level id集合起来即为ol中的matrixIds数组
  • 各级Pixel Size (m)集合起来即为ol中的resolutions数组
  • 天地图莫卡托投影虽然各级Scale Denominator和上面GoogleMapsCompatible(EPSG的各级Scale Denominator不一样,但是计算出来的分辨率是一样的,也就是上面Pixel Size (degrees)数组(因为都是EPSG:3857)

2.3.2 GoogleCRS84Quad (可以理解为EPSG:4326)

xml 复制代码
 <TileMatrixSet>
         <ows:Title>CRS84 for the World</ows:Title>
         <ows:Identifier>WorldCRS84Quad</ows:Identifier>
         <ows:BoundingBox crs="urn:ogc:def:crs:OGC:1.3:CRS84">
            <ows:LowerCorner>-180 -90</ows:LowerCorner>
            <ows:UpperCorner>180 90</ows:UpperCorner>
         </ows:BoundingBox>
         <ows:SupportedCRS>
            urn:ogc:def:crs:OGC:1.3:CRS84
         </ows:SupportedCRS>
         <WellKnownScaleSet>
            urn:ogc:def:wkss:OGC:1.0:GoogleCRS84Quad
         </WellKnownScaleSet>
         <TileMatrix>
            <ows:Identifier>-1</ows:Identifier>
            <ScaleDenominator>559082264.0287178</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>1</MatrixWidth>
            <MatrixHeight>1</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>0</ows:Identifier>
            <ScaleDenominator>279541132.0143589</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>2</MatrixWidth>
            <MatrixHeight>1</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>1</ows:Identifier>
            <ScaleDenominator>139770566.0071794</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>4</MatrixWidth>
            <MatrixHeight>2</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>2</ows:Identifier>
            <ScaleDenominator>69885283.00358972</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>8</MatrixWidth>
            <MatrixHeight>4</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>3</ows:Identifier>
            <ScaleDenominator>34942641.50179486</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>16</MatrixWidth>
            <MatrixHeight>8</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>4</ows:Identifier>
            <ScaleDenominator>17471320.75089743</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>32</MatrixWidth>
            <MatrixHeight>16</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>5</ows:Identifier>
            <ScaleDenominator>8735660.375448715</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>64</MatrixWidth>
            <MatrixHeight>32</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>6</ows:Identifier>
            <ScaleDenominator>4367830.187724357</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>128</MatrixWidth>
            <MatrixHeight>64</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>7</ows:Identifier>
            <ScaleDenominator>2183915.093862179</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>256</MatrixWidth>
            <MatrixHeight>128</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>8</ows:Identifier>
            <ScaleDenominator>1091957.546931089</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>512</MatrixWidth>
            <MatrixHeight>256</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>9</ows:Identifier>
            <ScaleDenominator>545978.7734655447</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>1024</MatrixWidth>
            <MatrixHeight>512</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>10</ows:Identifier>
            <ScaleDenominator>272989.3867327723</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>2048</MatrixWidth>
            <MatrixHeight>1024</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>11</ows:Identifier>
            <ScaleDenominator>136494.6933663862</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>4096</MatrixWidth>
            <MatrixHeight>2048</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>12</ows:Identifier>
            <ScaleDenominator>68247.34668319309</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>8192</MatrixWidth>
            <MatrixHeight>4096</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>13</ows:Identifier>
            <ScaleDenominator>34123.67334159654</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>16384</MatrixWidth>
            <MatrixHeight>8192</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>14</ows:Identifier>
            <ScaleDenominator>17061.83667079827</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>32768</MatrixWidth>
            <MatrixHeight>16384</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>15</ows:Identifier>
            <ScaleDenominator>8530.918335399136</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>65536</MatrixWidth>
            <MatrixHeight>32768</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>16</ows:Identifier>
            <ScaleDenominator>4265.459167699568</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>131072</MatrixWidth>
            <MatrixHeight>65536</MatrixHeight>
         </TileMatrix>
         <TileMatrix>
            <ows:Identifier>17</ows:Identifier>
            <ScaleDenominator>2132.729583849784</ScaleDenominator>
            <TopLeftCorner>-180 90</TopLeftCorner>
            <TileWidth>256</TileWidth>
            <TileHeight>256</TileHeight>
            <MatrixWidth>262144</MatrixWidth>
            <MatrixHeight>131072</MatrixHeight>
         </TileMatrix>
      </TileMatrixSet>

参数如下:

CRS: urn:ogc:def:crs:OGC:1.3:CRS84 CRS84

BBOX LowerCorner: -180 -90

BBOX UpperCorner: 180 90

WellKnownScaleSet: urn:ogc:def:wkss:OGC:1.0:GoogleCRS84Quad

TopLeftCorner: -180 90

TileWidth: 256

TileHeight: 256

Zoom level id Scale Denominator Pixel Size (degrees) Matrix Width Matrix Height
-1 559082264.0287178 1.40625000000000 1 1
0 279541132.0143589 0.703125000000000 2 1
1 139770566.0071794 0.351562500000000 4 2
2 69885283.00358972 0.175781250000000 8 4
3 34942641.50179486 8.78906250000000 *10-2 16 8
4 17471320.75089743 4.39453125000000 *10-2 32 16
5 8735660.375448715 2.19726562500000 *10-2 64 32
6 4367830.187724357 1.09863281250000 *10-2 128 64
7 2183915.093862179 5.49316406250000 *10-3 256 128
8 1091957.546931089 2.74658203125000 *10-3 512 256
9 545978.7734655447 1.37329101562500 *10-3 1024 512
10 272989.3867327723 6.86645507812500 *10-4 2048 1024
11 136494.6933663862 3.43322753906250 *10-4 4096 2048
12 68247.34668319309 1.71661376953125 *10-4 8192 4096
13 34123.67334159654 8.58306884765625 *10-5 16384 8192
14 17061.83667079827 4.29153442382812 *10-5 32768 16384
15 8530.918335399136 2.14576721191406 *10-5 65536 32768
16 4265.459167699568 1.07288360595703 *10-5 131072 65536
17 2132.729583849784 5.36441802978516 *10-6 262144 131072

其中:

  • Pixel Size单位是度(degrees)
  • TopLeftCorner即为ol中的origin数组
  • 各级Zoom level id集合起来即为ol中的matrixIds数组
  • 各级Pixel Size (degrees)集合起来即为ol中的resolutions数组
  • 天地图经纬度投影虽然各级Scale Denominator和上面GoogleCRS84Quad的各级Scale Denominator不一样,但是计算出来的分辨率是一样的(因为都是EPSG:4326),也就是上面Pixel Size (degrees)数组

2.3.3 自定义坐标系(投影)

2.3.3.1 查看Capabilities描述文档

根据前面的规范解析,WMTS服务必须实现GetCapabilities操作,也就是一定有一个描述文档,一般访问路径是这样的格式http://example.com/wmts?request=GetCapabilities,查看中的TileMatrixSet节点下参数,如下图:

  • TopLeftCorner即为ol中的origin数组(注意,如果是经纬度投影,顺序是纬度经度,origin顺序是经度纬度)
  • 各级ows:Identifier集合起来即为ol中的matrixIds数组(根据文档,ows:Identifier为-1的可以删除)
  • ScaleDenominator集合起来经过计算后才能得到ol中的resolutions数组

**分辨率(resolution)的计算**

  • 地图分辨率resolution,也称地面分辨率(Ground Resolution)或空间分辨率(Spatial Resolution),表示屏幕单位长度(像素)所代表的实际距离(米),即屏幕1像素代表实际距离多少米

    公式: 地图分辨率 = 实际距离 ( 米 ) 屏幕像素数 ( 像素 ) 地图分辨率 =\frac{实际距离(米)}{屏幕像素数(像素)} 地图分辨率=屏幕像素数(像素)实际距离(米)

  • 屏幕分辨率(dpi)是指屏幕上1英寸长度内包含的像素数量

    公式: 屏幕分辨率 = 屏幕像素数 ( 像素 ) 屏幕上距离 ( 英寸 ) 屏幕分辨率=\frac{屏幕像素数(像素)}{屏幕上距离(英寸)} 屏幕分辨率=屏幕上距离(英寸)屏幕像素数(像素)

  • 比例尺是指屏幕地图上1单位长度对应实际地理中多少单位长度,即屏幕地图上距离和实际距离之比,屏幕地图上距离和实际距离的单位一致(可以是米、英寸等等) (无单位)

    公式: 比例尺 = 屏幕地图上距离 实际距离 比例尺=\frac{屏幕地图上距离}{实际距离} 比例尺=实际距离屏幕地图上距离

    由此得到:

    公式: 比例尺分母 ( S c a l e D e n o m i n a t o r ) = 1 比例尺 = 实际距离 屏幕地图上距离 = 实际距离 屏幕上距离 (无单位) 比例尺分母(Scale Denominator)=\frac{1}{比例尺}=\frac{实际距离}{屏幕地图上距离}=\frac{实际距离}{屏幕上距离} (无单位) 比例尺分母(ScaleDenominator)=比例尺1=屏幕地图上距离实际距离=屏幕上距离实际距离(无单位)

    综上: 地图分辨率 = 实际距离 ( 米 ) 屏幕像素数 ( 像素 ) = 比例尺分母 ∗ 屏幕上地图距离(米) 屏幕像素数 ( 像素 ) = 比例尺分母 ∗ (屏幕上地图距离(英寸) ∗ 0.0254 (米 / 英寸)) 屏幕像素数 ( 像素 ) = 比例尺分母 ∗ 0.0254 (米 / 英寸) ∗ 屏幕像素数 ( 像素 ) 屏幕分辨率 ( 像素 / 英寸 ) ∗ 屏幕像素数 ( 像素 ) = 比例尺分母 ∗ 0.0254 屏幕分辨率 ( 米 / 像素 ) 地图分辨率 =\frac{实际距离(米)}{屏幕像素数(像素)}=\frac{比例尺分母 * 屏幕上地图距离(米)}{屏幕像素数(像素)} = \frac{比例尺分母 * (屏幕上地图距离(英寸)* 0.0254(米/英寸))}{屏幕像素数(像素)}=\frac{比例尺分母 * 0.0254(米/英寸)* 屏幕像素数 (像素)}{屏幕分辨率 (像素/英寸) * 屏幕像素数(像素)} =\frac{比例尺分母 * 0.0254}{屏幕分辨率} (米/像素) 地图分辨率=屏幕像素数(像素)实际距离(米)=屏幕像素数(像素)比例尺分母∗屏幕上地图距离(米)=屏幕像素数(像素)比例尺分母∗(屏幕上地图距离(英寸)∗0.0254(米/英寸))=屏幕分辨率(像素/英寸)∗屏幕像素数(像素)比例尺分母∗0.0254(米/英寸)∗屏幕像素数(像素)=屏幕分辨率比例尺分母∗0.0254(米/像素)

    如果使用的(EPSG:4326)那么分辨率还需要进一步转换为(度/像素),用地球的周长除以360°可以得到一度是多少米,即:

    地图分辨率 = 比例尺分母 ∗ 0.0254 屏幕分辨率 ∗ ( M a t h . P I ∗ 2 ∗ 地球半径 / 360 ° ) ( 度 / 像素 ) 地图分辨率 =\frac{比例尺分母 * 0.0254}{屏幕分辨率 *(Math.PI * 2 * 地球半径 / 360°)} (度/像素) 地图分辨率=屏幕分辨率∗(Math.PI∗2∗地球半径/360°)比例尺分母∗0.0254(度/像素)

    一般的WMTS服务的DPI= 96, (EPSG:4326)的地球半径=6378137

由此,可以计算出每一级的分辨率,比如天地图经纬度投影,

xml 复制代码
<Capabilities xmlns="http://www.opengis.net/wmts/1.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0.0/wmtsGetCapabilities_response.xsd" version="1.0.0">
<script/>
<ows:ServiceIdentification>
<ows:Title>在线地图服务</ows:Title>
<ows:Abstract>基于OGC标准的地图服务</ows:Abstract>
<ows:Keywords>
<ows:Keyword>OGC</ows:Keyword>
</ows:Keywords>
<ows:ServiceType codeSpace="wmts"/>
<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
<ows:Fees>none</ows:Fees>
<ows:AccessConstraints>none</ows:AccessConstraints>
</ows:ServiceIdentification>
<ows:ServiceProvider>
<ows:ProviderName>国家基础地理信息中心</ows:ProviderName>
<ows:ProviderSite>http://www.tianditu.gov.cn</ows:ProviderSite>
<ows:ServiceContact>
<ows:IndividualName>Mr Wang</ows:IndividualName>
<ows:PositionName>Software Engineer</ows:PositionName>
<ows:ContactInfo>
<ows:Phone>
<ows:Voice>010-63881203</ows:Voice>
<ows:Facsimile>010-63881203</ows:Facsimile>
</ows:Phone>
<ows:Address>
<ows:DeliveryPoint>北京市海淀区莲花池西路28号</ows:DeliveryPoint>
<ows:City>北京市</ows:City>
<ows:AdministrativeArea>北京市</ows:AdministrativeArea>
<ows:Country>中国</ows:Country>
<ows:PostalCode>100830</ows:PostalCode>
<ows:ElectronicMailAddress>tdt@ngcc.cn</ows:ElectronicMailAddress>
</ows:Address>
<ows:OnlineResource xlink:type="simple" xlink:href="http://www.tianditu.gov.cn"/>
</ows:ContactInfo>
</ows:ServiceContact>
</ows:ServiceProvider>
<ows:OperationsMetadata>
<ows:Operation name="GetCapabilities">
<ows:DCP>
<ows:HTTP>
<ows:Get xlink:href="http://t0.tianditu.gov.cn/img_c/wmts?">
<ows:Constraint name="GetEncoding">
<ows:AllowedValues>
<ows:Value>KVP</ows:Value>
</ows:AllowedValues>
</ows:Constraint>
</ows:Get>
</ows:HTTP>
</ows:DCP>
</ows:Operation>
<ows:Operation name="GetTile">
<ows:DCP>
<ows:HTTP>
<ows:Get xlink:href="http://t0.tianditu.gov.cn/img_c/wmts?">
<ows:Constraint name="GetEncoding">
<ows:AllowedValues>
<ows:Value>KVP</ows:Value>
</ows:AllowedValues>
</ows:Constraint>
</ows:Get>
</ows:HTTP>
</ows:DCP>
</ows:Operation>
</ows:OperationsMetadata>
<Contents>
<Layer>
<ows:Title>img</ows:Title>
<ows:Abstract>img</ows:Abstract>
<ows:Identifier>img</ows:Identifier>
<ows:WGS84BoundingBox>
<ows:LowerCorner>-180.0 -90.0</ows:LowerCorner>
<ows:UpperCorner>180.0 90.0</ows:UpperCorner>
</ows:WGS84BoundingBox>
<ows:BoundingBox>
<ows:LowerCorner>-180.0 -90.0</ows:LowerCorner>
<ows:UpperCorner>180.0 90.0</ows:UpperCorner>
</ows:BoundingBox>
<Style>
<ows:Identifier>default</ows:Identifier>
</Style>
<Format>tiles</Format>
<TileMatrixSetLink>
<TileMatrixSet>c</TileMatrixSet>
</TileMatrixSetLink>
</Layer>
<TileMatrixSet>
<ows:Identifier>c</ows:Identifier>
<ows:SupportedCRS>urn:ogc:def:crs:EPSG::4490</ows:SupportedCRS>
<TileMatrix>
<ows:Identifier>1</ows:Identifier>
<ScaleDenominator>2.958293554545656E8</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>2</MatrixWidth>
<MatrixHeight>1</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>2</ows:Identifier>
<ScaleDenominator>1.479146777272828E8</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>4</MatrixWidth>
<MatrixHeight>2</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>3</ows:Identifier>
<ScaleDenominator>7.39573388636414E7</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>8</MatrixWidth>
<MatrixHeight>4</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>4</ows:Identifier>
<ScaleDenominator>3.69786694318207E7</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>16</MatrixWidth>
<MatrixHeight>8</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>5</ows:Identifier>
<ScaleDenominator>1.848933471591035E7</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>32</MatrixWidth>
<MatrixHeight>16</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>6</ows:Identifier>
<ScaleDenominator>9244667.357955175</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>64</MatrixWidth>
<MatrixHeight>32</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>7</ows:Identifier>
<ScaleDenominator>4622333.678977588</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>128</MatrixWidth>
<MatrixHeight>64</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>8</ows:Identifier>
<ScaleDenominator>2311166.839488794</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>256</MatrixWidth>
<MatrixHeight>128</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>9</ows:Identifier>
<ScaleDenominator>1155583.419744397</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>512</MatrixWidth>
<MatrixHeight>256</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>10</ows:Identifier>
<ScaleDenominator>577791.7098721985</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>1024</MatrixWidth>
<MatrixHeight>512</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>11</ows:Identifier>
<ScaleDenominator>288895.85493609926</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>2048</MatrixWidth>
<MatrixHeight>1024</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>12</ows:Identifier>
<ScaleDenominator>144447.92746804963</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>4096</MatrixWidth>
<MatrixHeight>2048</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>13</ows:Identifier>
<ScaleDenominator>72223.96373402482</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>8192</MatrixWidth>
<MatrixHeight>4096</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>14</ows:Identifier>
<ScaleDenominator>36111.98186701241</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>16384</MatrixWidth>
<MatrixHeight>8192</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>15</ows:Identifier>
<ScaleDenominator>18055.990933506204</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>32768</MatrixWidth>
<MatrixHeight>16384</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>16</ows:Identifier>
<ScaleDenominator>9027.995466753102</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>65536</MatrixWidth>
<MatrixHeight>32768</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>17</ows:Identifier>
<ScaleDenominator>4513.997733376551</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>131072</MatrixWidth>
<MatrixHeight>65536</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>18</ows:Identifier>
<ScaleDenominator>2256.998866688275</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>262144</MatrixWidth>
<MatrixHeight>131072</MatrixHeight>
</TileMatrix>
</TileMatrixSet>
</Contents>
</Capabilities>

可以得到ol的wmts参数:

javascript 复制代码
 const origin= [90,-180]
 const matrixIds= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
 const resolutions=[
              2.958293554545656e8, 1.479146777272828e8, 7.39573388636414e7, 3.69786694318207e7,
              1.848933471591035e7, 9244667.357955175, 4622333.678977588, 2311166.839488794,
              1155583.419744397, 577791.7098721985, 288895.85493609926, 144447.92746804963,
              72223.96373402482, 36111.98186701241, 18055.990933506204, 9027.995466753102,
              4513.997733376551, 2256.998866688275
            ].map(item=> 0.0254 * item / (96 * (Math.PI * 2 * 6378137 / 360)))  
相关推荐
小远yyds15 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试