我尝试在全局平铺网格中使用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
发生了什么?