1
ベクトルタイルを使用する最小の例は次のとおりです。カスタムマップ投影でOL3ベクトルタイルを使用する方法
地図投影をhttp://epsg.io/3857以外に変更した場合は、この作業を行うことができませんでした。 VectorTileレイヤーまたはソースに他のマップ投影法でも動作する必要があることを伝える方法はありますか？
私たちが変更したとき、間違った場所にタイルを要求し始めたのは、タイルグリッドが異なるツールが生成するhttp://epsg.io/3857レイアウトの代わりに新しいmapprojectionを使用してタイルをリクエストしているように見えるということです。
<!DOCTYPE html>
<html>
<head>
<title>OSM Vector Tiles</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.16.0/build/ol-debug.js"></script>
<style>
.map {
background: #f8f4f0;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var format = new ol.format.GeoJSON({ defaultDataProjection : new ol.proj.Projection({
code: '',
units: ol.proj.Units.TILE_PIXELS
})});
var tileGrid = ol.tilegrid.createXYZ({
maxZoom: 22
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
zIndex: 1
}),
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: format,
tileGrid: tileGrid,
tilePixelRatio: 16,
url: ...
}),
renderMode: 'vector',
style: [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#33ccff',
width: 2
}),
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({
color: 'red'
})
})
})
]
})
],
target: 'map',
view: new ol.View({
//center: ol.proj.fromLonLat([9.1645879, 55.7383757]), // Billund
center: ol.proj.fromLonLat([12.1272493, 55.590296]), // Roskilde
maxZoom: 22,
zoom: 12
})
});
</script>
</body>
</html>