openlayers-自定义瓦片

7次阅读

共计 3582 个字符，预计需要花费 9 分钟才能阅读完成。

openlayers- 自定义瓦片
定义一个瓦片地址

ol.source.TileImage.tileUrlFunction
官方文档

由此我们只需要重写这个 ol.source.TileImage.tileUrlFunction 方法即可
数据准备
用爬虫下载了一些高德地图放大层数最小的图片 256*256 大小的

简单服务器配置，将这些图片放到 tomcat 下使之能够正常访问
代码编写

常用参数配置

var proj_3857 = new ol.proj.get(“EPSG:3857”);
var proj_3857Extent = proj_3857.getExtent();
var mapWidth3857 = ol.extent.getWidth(proj_3857.getExtent());

var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024,
19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282,
611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813,
19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879,
0.5971642834779395];

用于调试的网格编号 (很重要)
var tileGrid = new ol.tilegrid.TileGrid({
resolutions: resolutions3857,
tileSize: [256, 256],
extent: proj_3857Extent,
origin: ol.extent.getTopLeft(proj_3857Extent),
});
使用说明：可以用来检查是否是对应的图片

瓦片图层
var tilesource = new ol.source.TileImage({
tileUrlFunction: function (tileCoord) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = Math.abs(tileCoord[2]);
return “http://localhost:9999/gaode_tiles_tms/” + z + “/” + x + “/” + y + “.png”;
},
tileGrid: tileGrid,
projection: proj_3857,
});

完整 demo
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title></title>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”
integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN”
crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js”
integrity=”sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4″
crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js”
integrity=”sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1″
crossorigin=”anonymous”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css”
integrity=”sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=” crossorigin=”anonymous”/>

</head>
<body>

var proj_3857 = new ol.proj.get(“EPSG:3857”);
var proj_3857Extent = proj_3857.getExtent();
var mapWidth3857 = ol.extent.getWidth(proj_3857.getExtent());

var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024,
19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282,
611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813,
19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879,
0.5971642834779395];

/**
* 网格标注
* @type {ol.tilegrid.TileGrid}
*/
var tileGrid = new ol.tilegrid.TileGrid({
resolutions: resolutions3857,
tileSize: [256, 256],
extent: proj_3857Extent,
origin: ol.extent.getTopLeft(proj_3857Extent),
});

var tilesource = new ol.source.TileImage({
tileUrlFunction: function (tileCoord) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = Math.abs(tileCoord[2]);
return “http://localhost:9999/gaode_tiles_tms/” + z + “/” + x + “/” + y + “.png”;
},
tileGrid: tileGrid,
projection: proj_3857,
});

var AMap = new ol.layer.Tile({
source: tilesource,
projection: proj_3857,
});

var map = new ol.Map({
layers: [
AMap,
// 加载本地瓦片
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: proj_3857,
tileGrid: tileGrid
})
})
],

target: ‘map’,
view: new ol.View({
center: ol.proj.transform([120, 30], ‘EPSG:4326’, ‘EPSG:3857’),
resulotions: resolutions3857,
zoom: 1,
minZoom: 1,
maxZoom: 19
}),
});

</script>
</body>
</html>

正文完