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"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
crossorigin="anonymous"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
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>