如何在固定缩放地图上以像素为单位更改图块大小? [英] how to change tile size in pixels on a fixed zoom map?
问题描述
我正在使用 OpenLayers 渲染具有固定缩放比例 (zoom=8) 的虚拟世界(不是地球)的自定义地图.我检查了渲染的画布，每个图块都是 256 像素的平方.我想将磁贴大小更改为较小的大小(例如 16 像素)，但在任何地方都找不到方法.谁能帮我吗?谢谢！
我在做什么:
var zoom = 8;无功侧 = 800var extent = [0, 0, zoom*side*2, zoom*side*2];var center = [zoom*side+400/8/2, zoom*side-400/8/2];var 投影 = 新 ol.proj.Projection({代码:'decentraland-images'，单位:'像素'，范围:范围，});var map = new ol.Map({目标:'地图'，层数:[新的 ol.layer.Tile({来源:新 ol.source.TileImage({url: '地图/{z},{x},{y}.png',wrapX:假，}),}),],视图:新 ol.View({投影:投影，中心:中心，//ol.extent.getCenter(extent)，缩放:缩放，minZoom:缩放，maxZoom:缩放，})});这是我当前的完整代码，以防您想查看:https://pastebin.com/TCHCBh5c.这是一个部署版本:https://maraoz.com/decentraland-maps/
您应该设置一个 tilegrid 来反映您正在使用的数据.看来您只有在 z = 5 时才可用 784 x 783 像素的图块.左上角的图块是 https://maraoz.com/decentraland-maps/map/5,8,8.png 和右下角是 https://maraoz.com/decentraland-maps/map/5,22,21.png 然后就可以设置分辨率了在视图中需要通过将实际图块大小除以您想要的大小(对于整页地图来说 16 似乎非常小，因此本示例使用 64).
<头><title></title><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css"><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script><script type="text/javascript">函数初始化(){tileSize = [784, 783];范围 = [0, 0, tileSize[0] * 15, tileSize[1] * 14];中心 = ol.extent.getCenter(extent);origin = [tileSize[0] * -8, tileSize[1] * 22];var 投影 = 新 ol.proj.Projection({代码:'decentraland-images'，单位:'像素'，范围:范围，});var map = new ol.Map({目标:'地图'，层数:[新的 ol.layer.Tile({来源:新 ol.source.TileImage({url: 'https://maraoz.com/decentraland-maps/map/{z},{x},{y}.png',tileGrid: 新的 ol.tilegrid.TileGrid({范围:范围，起源:起源，tileSize: tileSize,决议:[32, 16, 8, 4, 2, 1],最小缩放:5}),投影:投影}),})],视图:新 ol.View({投影:投影，中心:中心，分辨率:[tileSize[0]/64]，缩放:0})});}<style type="text/css">#地图 {最小高度:100%；位置:固定；宽度:100%；高度:100%；左:0；顶部:0；背景:RGBA(51,51,51,0.7);}html，正文{高度:100%；边距:0；}</风格><body onload="初始化()"><div id="地图"></html>
I'm using OpenLayers to render a custom map of a virtual world (not Earth) with a fixed zoom (zoom=8). I've checked the rendered canvas and each tile is 256 pixels squared. I wanted to change the tile size to something smaller (like 16px), and I couldn't find how to do it anywhere. Can anyone help me out? Thanks!
What I'm doing:
var zoom = 8;
var side = 800
var extent = [0, 0, zoom*side*2, zoom*side*2];
var center = [zoom*side+400/8/2, zoom*side-400/8/2];
var projection = new ol.proj.Projection({
code: 'decentraland-images',
units: 'pixels',
extent: extent,
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileImage({
url: 'map/{z},{x},{y}.png',
wrapX: false,
}),
}),
],
view: new ol.View({
projection: projection,
center: center, //ol.extent.getCenter(extent),
zoom: zoom,
minZoom: zoom,
maxZoom: zoom,
})
});
Here's my current full code in case you want to look: https://pastebin.com/TCHCBh5c. Here's a deployed version: https://maraoz.com/decentraland-maps/
You should set a up tilegrid which reflects the data you are using. It seems you have 784 x 783 pixels tiles available only where z = 5. The top left tile is https://maraoz.com/decentraland-maps/map/5,8,8.png and bottom right is https://maraoz.com/decentraland-maps/map/5,22,21.png Then you can set the resolution you need in the view by dividing the real tile size by the size you want (16 seems very small for a full page map so this example uses 64).
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript">
function initialize() {
tileSize = [784, 783];
extent = [0, 0, tileSize[0] * 15, tileSize[1] * 14];
center = ol.extent.getCenter(extent);
origin = [tileSize[0] * -8, tileSize[1] * 22];
var projection = new ol.proj.Projection({
code: 'decentraland-images',
units: 'pixels',
extent: extent,
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileImage({
url: 'https://maraoz.com/decentraland-maps/map/{z},{x},{y}.png',
tileGrid: new ol.tilegrid.TileGrid({
extent: extent,
origin: origin,
tileSize: tileSize,
resolutions: [32, 16, 8, 4, 2, 1],
minZoom: 5
}),
projection: projection
}),
})
],
view: new ol.View({
projection: projection,
center: center,
resolutions: [tileSize[0] / 64],
zoom: 0
})
});
}
</script>
<style type="text/css">
#map {
min-height: 100%;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
}
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body onload="initialize()">
<div id="map">
</div>
</body>
</html>
这篇关于如何在固定缩放地图上以像素为单位更改图块大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
