WebGIS：前端：给出地理范围计算出地图瓦片的行列号

原创

已于 2023-04-21 16:59:25 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2023-04-20 21:47:31 首次发布

该文档介绍了如何在前端根据XML配置文件计算瓦片服务的行列号。首先解析XML数据获取元信息，然后根据坐标系类型（3857或4326）进行不同的坐标转换和计算，涉及到像素与米的换算、分辨率计算以及经纬度与米的转换。最后，通过比例尺分母和分辨率计算出行列号。

该文档是根据本人做的项目进行的总结，可能存在知识的不准确性，仅做参考；

前端代码实现

功能：根据提供一个瓦片服务地址，解析服务的元数据，获取到范围，根据范围，计算出行列号

根据xml配置文件计算出行列号

1、xml配置文件信息样例

2、代码实现

1、解析xml数据为json格式的数据，借助插件x2js

2、本例中，只做了3857和4326坐标系的支持；请求用axios进行请求

3、因为文档中的比例尺分母使用的是米，所以4236中，如果没有提供level时，将度数转为米进行匹配层级信息的

4、4326坐标系的地球半径取值为：6371004；3857坐标系的地球半径取值为：6378137；

5、可以直接copy代码使用，使用中注意度和米的单位问题

import X2JS from 'x2js';

// 1、请求配置文件路径，获取元数据，通过插件x2js解析xml数据为json格式
let url = 'http://xxxxx';
axios.get(url).then((res) => {
    if (res.status != 200) {
        alert('请检查您的配置文件路径');
        return false;
    }
    var x2js = new X2JS();
    var json = x2js.xml2js(res.data);
    getColRowLevel({data:json,dpi:90.714});
});

// 2、 根据获取的元数据，获取行列号和层级
const getColRowLevel = (json) => {
    let { data, dpi, level } = json;
    let Contents = data.Capabilities.Contents;
    let TileMatrixSet = Contents.TileMatrixSet;
    // 元数据中的crs坐标系
    let SupportedCRS = TileMatrixSet.SupportedCRS.__text || TileMatrixSet.SupportedCRS;
    
    // 默认crs是3857
    //默认dpi为90.714,dpi一般为90.714或者96；如果不确定dpi请咨询提供服务的后台
    dpi = dpi ? Number(dpi) : 90.714;
    level = level ? Number(level) : null;
    if (SupportedCRS.toLowerCase().includes('epsg::4326')) {
        // 4326
        return colRowLevel4326(Contents, dpi, level);
    } else {
        // 3857
        return colRowLevel3857(Contents, dpi, level);
    }
};



const colRowLevel4326 = (Contents, dpi, level) => {
    let Layer = Contents.Layer;
   
    // 服务范围，如果给指定范围，则去掉下面四行，直接let extentObj = {minX,minY,maxX,maxY}
    let WGS84BoundingBox = Layer.WGS84BoundingBox;
    let LowerCorner = WGS84BoundingBox.LowerCorner.__text;
    let UpperCorner = WGS84BoundingBox.UpperCorner.__text;
    let extentObj = getExtent4326(LowerCorner, UpperCorner);
    let { minX, maxX, minY, maxY } = extentObj;

    let canvasWidth = 1000;
    let tileSize = 256;
    let realTileWidthDegree = (maxX - minX) / (canvasWidth / tileSize);
    let realTileWidthMeter = (realTileWidthDegree / 180) * (Math.PI * 6371004);

    let resolutions = realTileWidthMeter / tileSize;
    let scaleDenominator = resolutions / (0.0254 / dpi);

    // // Identifier  ScaleDenominator TileHeight  TopLeftCorner
    let TileMatrixSet = Contents.TileMatrixSet;
    let TileMatrixArr = TileMatrixSet.TileMatrix;
    // 当前比例尺最接近的对象
    let curScaleObj = getScaleInfo(TileMatrixArr,scaleDenominator,level)