我尝试将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
怎么了?
答案 0 :(得分:0)
解决了,问题是渲染从左上角开始,因此20037508.342789244 - 2445.984905126 × 6007 ~ 5342500
,好吧!