1
我們有以下使用矢量圖塊的最小示例。如何使用帶有自定義地圖投影的OL3矢量圖塊
如果我們將地圖投影更改爲http://epsg.io/3857
以外的東西,我們還無法完成此項工作。有什麼辦法可以告訴VectorTile圖層或源代碼它可以在其他地圖投影上使用嗎?
我們經歷的是,當我們改變它時,它開始在錯誤的位置請求瓷磚 - 看起來像瓷磚網格正在使用新的地塊投影來請求瓷磚,而不是使用不同工具生成的佈局http://epsg.io/3857
。
<!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>