分享一个切片网格的生成函数

Posted 2022-07-31 牛老师讲GIS

概述

本文分享一个切片网格生成的方法，并在openlayer中加以测试展示。

效果

实现代码

function getMapTileGrid(extent, zoom, tileSize = 256) 
  let resolution = 156543.03392804097
  let resolutions = []
  for (let i = 0; i < 19; i++) 
    resolutions.push(resolution)
    resolution = resolution/ 2
  
  const val0 = resolutions[0] * tileSize / 2
  const originX = -val0
  const originY = val0
  zoom = Math.ceil(zoom)
  const val = resolutions[zoom] * tileSize
  const [xminE, yminE, xmaxE, ymaxE] = extent
  const x1 =  Math.floor((xminE - originX) / val)
  const x2 = Math.ceil((xmaxE - originX) / val)
  const y2 = Math.ceil((originY - yminE) / val)
  const y1 = Math.floor((originY - ymaxE) / val)
  let getExtentFromXy = function (x, y) 
    return [
      originX + x * val,
      originY - (y + 1) * val,
      originX + (x + 1) * val,
      originY - y * val
    ]
  
  let features = []
  for (let i = x1; i <= x2 ; i++) 
    for (let j = y1; j <= y2 ; j++) 
      let bbox = getExtentFromXy(i, j)
      // 为方便，此处直接调用的ol的方法，可换成其他的实现
      bbox = ol.proj.transformExtent(bbox, 'EPSG:3857', 'EPSG:4326')
      const feature = turf.bboxPolygon(bbox, 
        'properties': 
          x: i,
          y: j,
          z: zoom,
          zxy: [zoom, i, j].join('-')
        
      )
      features.push(feature)
    
  
  return 
    'type': 'FeatureCollection',
    'features': features
  


// ol中的调用，注册地图事件
 map.on('moveend', function (e) 
   vecSource.clear()
   const view = map.getView()
   const geojson = getMapTileGrid(view.calculateExtent(), view.getZoom(), 512)
   const features = (new ol.format.GeoJSON(
     defaultDataProjection: 'EPSG:4326',
     featureProjection: 'EPSG:3857'
   )).readFeatures(geojson)
   vecSource.addFeatures(features)
 )