代码之家  ›  专栏  ›  技术社区  ›  MapUser

OL5矢量层:瓷砖的Y坐标

  •  0
  • MapUser  · 技术社区  · 7 年前

    我尝试在全局平铺网格中使用OL5矢量平铺。

    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import MVT from 'ol/format/MVT'
    import TileGrid from 'ol/tilegrid/TileGrid'
    import VectorTileLayer from 'ol/layer/VectorTile'
    import VectorTileSource from 'ol/source/VectorTile'
    
    let zoom = 0
    let center = [8531000, 5342500]
    let resolutions = [
        9.554628535647032,
        4.777314267823516,
        2.388657133911758,
        1.19432856695588,
    ]
    let extent = [0, 0, 20037508.342789244, 20037508.342789244]
    
    const map = new Map({
        target: 'map',
        view: new View({
            zoom: zoom,    
            center: center,
            resolutions: resolutions,
       })     
    })
    
    const vectorTiles = new VectorTileLayer({
        source: new VectorTileSource({
            tileSize: 256,
            projection: 'EPSG:3857',
            format: new MVT(),    
            tileGrid: new TileGrid({      
                extent: extent,          
                resolutions: resolutions,
            }),    
            url: 'http://localhost:8000/get-vector-tiles/{z}/{x}/{y}'
        })   
     })
    
     map.addLayer(vectorTiles)
    

    请求看起来像 http://localhost:8000/get-vector-tiles/0/3487/6007 , 据我所知 {x}/{y} 是从原点(在我的例子中)得到的瓷砖坐标(数字) 0,0 )。

    开始分辨率为 9.554628535647032 , 因此,瓷砖尺寸为 9.554628535647032 × 256 = 2445.984905126

    估算所需区域坐标:

    X: 2445.984905126 × 3487 = 8529149.3642

    Y: 2445.984905126 × 6007 = 14693031.2943

    考虑到地图的中心是 [8531000, 5342500] :

    X坐标正确 8529149.3642 ~ 8531000 , 当Y坐标不匹配时 5342500 vs 14693031.2943

    发生了什么?

    1 回复  |  直到 7 年前
        1
  •  0
  •   MapUser    7 年前

    解决了,问题是渲染从左上角开始,因此 20037508.342789244 - 2445.984905126 × 6007 ~ 5342500 ,好的!

    推荐文章