OpenLayer loads WMTS service and map resolution algorithm

1. WMTS service

First, take Tianditu as an example to analyze WMTS service, which is based on OGC standard service. The slicing principle is as follows

Add "&request=GetCapabilities" directly after the WMTS service link  to get the service document directly.

For example: http://t0.tianditu.gov.cn/img_w/wmts?tk=yourKey&request=GetCapabilities

Once you have the document, you can directly view the basic information of WMTS. The main structure of the document is as follows

The following mainly talks about the information that needs to be used

2. WMTS service resolution calculation

Once you have the scale information, you can calculate the resolution corresponding to the scale. First of all, make it clear.

Map resolution: also known as Ground Resolution or Spatial Resolution, which represents the actual ground distance (meters) represented by a pixel (pixel) on the screen , that is

Resolution = pixels / scale

Second, the scale is the ratio of the distance on the map to the actual distance, that is:

Scale bar = distance on the map / actual distance

WMTS is linked to DPI. DPI is the number of pixels per unit area (inch), namely:

DPI = number of pixels/inch

Because 1 inch = 0.0254 meters, the DPI of a general WMTS service is 96, so the size of a pixel can be calculated, namely:

1 pixel = 0.0254 meters/96

Then you can calculate the resolution, that is: ( note that you can also directly multiply the denominator of the scale here, and the scale value provided in the general document is the denominator of the scale )

Resolution = 0.0254 / 96 / scale

If it is the projected coordinates in meters, you can directly calculate it according to the above formula. If it is the geographic coordinates in degrees, you need to convert the resolution to an angle and divide the circumference of the earth by 360°. Calculate how many meters it was at one time, namely:

Resolution = 0.0254 / 96 / Scale / (m/degree) => Resolution = 0.0254 / 96 / Scale / (MATH.PI * 2 * Earth radius / 360°)

 

Three, load WMTS service

Once you have the resolution algorithm, you can use OpenLayer to load the WMTS service

                        new ol.layer.Tile({
                            opacity: 0.5,
                            source: new ol.source.WMTS({
                                name: "中国矢量1-4级",
                                url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=yourKey",
                                layer: "img",
                                style: "default",
                                matrixSet: "w",
                                format: "tiles",
                                wrapX: false,
                                projection: projectionSource,
                                // projectionSource是WMTS服务本身的投影，不是地图view的投影
                                tileGrid: new ol.tilegrid.WMTS({
                                    origin: ol.extent.getTopLeft(projectionsource.getExtent()), // 服务切片坐上角坐标(x,y)
                                    resolutions: [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 0.000010728836059570312, 0.000005364418029785156, 0.000002682209014892578, 0.000001341104507446289, 6.705522537231445e-7, 3.3527612686157227e-7, 1.6763806343078613e-7],
                                    matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
                                // 此处的resolutions为EPSG:4326示例数据计算出来的分辨率，分辨率与martrixIds是一一对应的关系,也就是加载了多少个层级，就需要多少个分辨率
                                })
                            }),
                        }),

Then add the generated layer to the map to display it.