leaflet 叠加新标准分幅网格

简述

这些天在一些项目中遇到一些与标准分幅有关的事情。
大概就是这么一回事，遇到很多次需要获取某点或者某些区域属于哪个标准分幅。虽然可以计算，但是算起来比较麻烦，不如直接地图上看方便。但是我手头没有标准分幅边框的矢量，网上有的也需要下载，于是自己用 javascript 写了一个根据地理范围和比例尺生成范围内标准分幅边框的 geojson矢量的实现，然后在 leaflet 上加载显示出来（要改在 openlayers 之类的也很容易），根据不同的缩放级别显示不同比例尺的标准分幅网格。

生成标准分幅边框矢量的代码

// 获取小数部分
const fractional = function(x) {
   x = Math.abs(x);
   return x - Math.floor(x);
}
const formatInt = function(x, len) {
    let result = '' + x;
    len = len - result.length;
    while(len > 0) {
        result = '0'+result;
        len--;
    }
    return result;
}

// 创建标准分幅网格
// west,south,east,north 传入要创建的标准分幅网格的经纬度范围
// scalem 表示比例尺的分母（例如 10000 表示 1:1万）
// 返回一个 geojson 对象
// solym ymwh@foxmail.com 2020年12月13日
function makeStandardMapGrids(west,south,east,north, scalem) {
    let lngDiff = 0;
    let latDiff = 0;
    let scaleCode = '';
    switch (scalem) {
        case 1000000:
            lngDiff = 6;
            latDiff = 4;
            break;
        case 500000:
            lngDiff = 3;
            latDiff = 2;
            scaleCode = 'B';
            break;
        case 250000:
            lngDiff = 1.5;
            latDiff = 1;
            scaleCode = 'C';
            break;
        case 100000:
            lngDiff = 0.5;
            latDiff = 1 / 3;
            scaleCode = 'D';
            break;
        case 50000:
            lngDiff = 0.25;
            latDiff = 1 / 6;
            scaleCode = 'E';
            break;
        case 25000:
            lngDiff = 0.125;
            latDiff = 1 / 12;
            scaleCode = 'F';
            break;
        case 10000:
            lngDiff = 0.0625;
            latDiff = 1 / 24;
            scaleCode = 'G';
            break;
        case 5000:
            lngDiff = 0.03125;
            latDiff = 1 / 48;
            scaleCode = 'H';
            break;
        default:
            return null;
    }
    const GridX0 = -180;
    const GridX1 = 180;
    const GridY0 = -88;
    const GridY1 = 88;
    let x0 = Math.max(GridX0, west);
    let y0 = Math.max(GridY0, south);
    let x1 = Math.min(GridX1, east);
    let y1 = Math.min(GridY1, north);
    if (((x1 - x0) < lngDiff) || ((y1 - y0) < latDiff)) {
        return null;
    }

    
    let features = [];
    // 计算标准分幅网格行列范围
    const col0 = parseInt((x0 - GridX0) / lngDiff);
    const col1 = parseInt((x1 - GridX0) / lngDiff);
    const row0 = parseInt((y0 - GridY0) / latDiff);
    const row1 = parseInt((y1 - GridY0) / latDiff);
    const millionRowCode = 'ABCDEFGHIJKLMNOPQRSTUV';
    for (let row = row0; row <= row1; row++) {
        let gy0 = GridY0 + row * latDiff;
        let gy1 = gy0 + latDiff;
        let gcy = (gy0+gy1)*0.5;    // 分幅中心点 y 坐标
        let millionRow = parseInt((gy0 - 0)/4); // 1:100分幅行号
        let Hemisphere = '';   // 南北半球标志
        if(millionRow < 0){
            millionRow = -1-millionRow;
            Hemisphere = 'S';
        }
        for (let col = col0; col <= col1; col++) {
            let gx0 = GridX0 + col * lngDiff;
            let gx1 = gx0 + lngDiff;
            let gcx = (gx0+gx1)*0.5;    // 分幅中心点 x 坐标
            let millionCol = parseInt((gcx-GridX0)/6)+1;  // 1:100分幅列号(从1开始)
            coordinates = [[
                [gx0, gy0],
                [gx1, gy0],
                [gx1, gy1],
                [gx0, gy1],
                [gx0, gy0]
            ]];
            millionCol = (millionCol<10)?('0'+millionCol):millionCol;
            let gridID = Hemisphere + millionRowCode[millionRow] + millionCol;
            if(scaleCode != '') {
                // 计算当前分幅在 1:100万 分幅内的行列号
                // 注意，这里行列号从左向右，从北向南，从1开始编号
                let colID = parseInt((fractional((gcx -GridX0)/6)*6)/lngDiff) + 1;
                let rowID = parseInt((fractional((GridY1 - gcy)/4)*4)/latDiff) + 1;
                gridID += scaleCode + formatInt(rowID,3)  + formatInt(colID,3);
            }
            let feature = {
                type: "Feature",
                geometry: {
                    type: "Polygon",
                    coordinates: coordinates
                },
                properties: {
                    ID: gridID,
                    fanwei:'西:'+gx0+' 东:' + gx1 + ' 南:'+gy0+' 北:'+gy1
                }
            };
            features.push(feature);
        }
    }
    return {
        type: "FeatureCollection",
        features: features
    };
}

leaflet 上加载显示代码

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>标准分幅测试页面</title>
  <style>
    html,
    body {
      height: 100%;
       100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    #map {
      position: relative;
       100%;
      height: 100%;
      background-color: dimgrey;
    }
    #nav{
      position: fixed; 
      top: 5px;
       left: 35%;
       z-index:9999;
       color:lightgreen;
       background-color: rgba(255, 182, 193, 0.384);
    }
  </style>


  <!-- 1.0.3-->
  <script type='text/javascript' src='leaflet_1.7.1.js'></script>
  <link type='text/css' rel='stylesheet' href='leaflet_1.7.1.css' />
</head>

<body>
  <div id="nav"></div>
  <table>
    <tr>
      <div id="map"></div>
    </tr>
  </table>

  <script>
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    minZoom: 1,
    maxZoom: 25,
    maxBounds: L.latLngBounds([
        [-90, -180],
        [90, 180]
    ]),
    attributionControl: false,
    keyboard: false,
});
map.setView([32.9, 105.4], 4);

var tianditu = L.tileLayer(
    "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5", {
        maxZoom: 17,
        tileSize: 256,
        zoomOffset: 1
    })
map.addLayer(tianditu);
var gridLayer = null;
map.on('moveend', function () {
    let bounds = map.getBounds();
    document.getElementById('nav').innerText = bounds.toBBoxString();
    if (gridLayer != null) {
        gridLayer.remove();
        gridLayer = null;
    }
    const zoom = map.getZoom();
    let scale = 1000000;
    if (zoom > 11) {
        scale = 5000;
    } else if (zoom > 10) {
        scale = 10000;
    } else if (zoom > 9) {
        scale = 25000;
    } else if (zoom > 8) {
        scale = 50000;
    } else if (zoom > 7) {
        scale = 100000;
    } else if (zoom > 6) {
        scale = 250000;
    } else if (zoom > 4) {
        scale = 500000;
    }
    console.log('zoom=', zoom, ' scale=', scale);
    
    let grids = makeStandardMapGrids(bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth(), scale);
    if (grids == null) {
        return;
    }
    // console.log(JSON.stringify(grids));

    gridLayer = L.geoJSON(grids, {
        style: function (feature) {
            return {
                color: 'red',
                weight:1,
                fillColor:'green',
                fillOpacity:0
            };
        }
    }).bindPopup(function (layer) {
        return layer.feature.properties.ID + '<br>' + layer.feature.properties.fanwei;
    });
    gridLayer.addTo(map);

});
map.panTo([32, 116])
  </script>
</body>

</html>

效果截图