瓦片检索小项目总结

0 目录

1、项目框架

前端框架：Openlayers
后台框架：SpringMVC
其他技术：WebSocket、并发

2、瓦片

坐标系（EPSG:3857，EPSG:4326，EPSG:4490）
原点 origin(均范围为左上角)
墨卡托： [-20037508.342789244, 20037508.342789244]
经纬度： [-180,90]
瓦片大小：默认为256个像素
分辨率（根据级别和分辨率计算；根据范围计算）

function GetResolutionsByfullExtent(fullExtent, tileSize) {
    
    
    var width = ol.extent.getWidth(fullExtent);
    var height = ol.extent.getHeight(fullExtent);
    //最大分辨率
    var maxResolution = ((width <= height) ? height : width) / tileSize;
    var resolutions = new Array(22);
    for (var z = 0; z < 22; ++z) {
        resolutions[z] = maxResolution / Math.pow(2, z);
    }
    return resolutions
}

function GetResolutionsByCurrent(currentZoom, currentResolution, maxZoom) {
    
    
    var resolutions = new Array(maxZoom);
    // 获取currentZoom---maxZoom间的分辨率
    for (var z = currentZoom; z <= maxZoom; z++) {
        var num = Math.pow(2, z - currentZoom);
        resolutions[z] = currentResolution / num;
    }
    // 获取0---currentZoom间的分辨率
    for (var z = currentZoom; z >= 0; z--) {
        var num = Math.pow(2, currentZoom - z);
        resolutions[z] = currentResolution * num;
    }
    return resolutions;
};

3、瓦片地图的加载

前端地图容器的坐标系：
优先级：视图坐标系>底图坐标系>图层坐标系（根据瓦片参数，进行优先级匹配空间位置）
瓦片服务加载方式：以天地图为例
xyz：如http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}
wmts：如http://t0.tianditu.com/img_w/wmts/?layer=img&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}

4、地理范围、瓦片行列号、像素的计算

4.1 经纬度与米的换算

var earthRadius=6378137; //地球半径
//经纬度坐标转墨卡托坐标
function lonlatToMeters([lon, lat]) {
    
    
    var mbyd = Math.PI * earthRadius / 180.0; //一度代表多少米
    var mx = lon * mbyd;
    var my = (Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180.0));
    my = my * mbyd;
    return [mx, my];
}

//墨卡托坐标转经纬度
function MetersToLonlat([x, y]) {
    
    
    var mbyd = Math.PI * earthRadius / 180; //一度代表多少米
    var lon = x / mbyd;
    var lat = y / mbyd;
    lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180.0)) - Math.PI / 2);
    return [lon, lat];
}

4.2 像素与经纬度/米的换算

function GetPixelToLonLat(origin, x, y, resolution) {
    
    
    var lon = parseFloat(origin[0]) + x * resolution;
    var lat = parseFloat(origin[1]) - y * resolution;
    return [lon, lat];
}

function GetLonLatToPixel(origin, lon, lat, resolution) {
    
    
    var x = (lon-origin[0]) /resolution;
    var y = Math.abs(lat-origin[1])) /resolution;
    return [lon, lat];
}

4.3 地理范围与瓦片行列号的计算

function GetTileExtent(topLeftX, topLeftY, row, col, resolution) {
    
    
    var xmin = topLeftX + resolution * col * 256;
    var xmax = topLeftX + resolution * (col + 1) * 256;
    var ymin = topLeftY - resolution * (row + 1) * 256;
    var ymax = topLeftY - resolution * row * 256;
    return [xmin, ymin, xmax, ymax];
};

function GetTileRowCol(extent,origin,resolution) {
    
    
      var startRow = Math.floor(Math.abs((extent[3] - origin[1]) / 256 / resolution));
      var endRow = Math.floor(Math.abs((extent[1] - origin[1]) / 256 / resolution));   
      var startCol = Math.floor((extent[0] - origin[0]) / 256 / resolution);
      var endCol = Math.floor((extent[2] - origin[0]) / 256 / resolution);
      return [startCol, endCol, startRow, endRow];
}

5、收获

瓦片的理解：瓦片的划分体系、瓦片的计算
地图服务的加载：WMS、WMTS(重点)
地图可视化：图层叠加（优先级、坐标系、原点、分辨率等参数设置）