一、效果
实现在地图中指定区域显示自定义图片,并支持指定层级放大缩小,点击链接预览效果自定义底图Demo
二、 材料准备
高清图片一张
使用ps的切片选择工具,将图片分别4等分,16等分,64等分切割。
然后存储为web所用格式(确保每张图片大小为256px * 256px),按层级保存到文件夹
ps中切割只能切割成有限层级,更高层级切割可以参考:使用python脚本切割
三、编写html(过程省略,不理解的评论指出)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>加载高德地图图层</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
min-width:603px;
min-height:767px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
function init() {
// 获取第三方瓦片
var _getTileUrl = function(tile, zoom){
var x = tile.x,
y = tile.y;
// 高德地图瓦片
var tileUrl = 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
// 加工瓦片,添加边框,坐标信息(便于定位瓦片位置)
// tileUrl = 'http://localhost:8080/donation/api/captcha/map/{z}/{x}/{y}';
tileUrl = tileUrl.replace(/\{x\}/, x);
tileUrl = tileUrl.replace(/\{y\}/, y);
tileUrl = tileUrl.replace(/\{z\}/, zoom);
return tileUrl;
};
// 获取本地瓦片
var _getloaclTileUrl = function(index, zoom) {
var tileUrl = './images/{z}/map_{index}.png';
tileUrl = tileUrl.replace(/\{index\}/, index);
tileUrl = tileUrl.replace(/\{z\}/, zoom);
return tileUrl;
}
// 替换指定层级、指定坐标的瓦片从本地加载
var tailUrl = function(tile, zoom) {
if (zoom == 14) {
var _x = 13489, _y = 6207;
var _p = 0;
if (tile.x >= _x && tile.x < _x + 2**_p && tile.y >= _y && tile.y < _y + 2**_p) {
var index = (tile.y - _y) * 2**_p + (tile.x - _x) + 1;
return _getloaclTileUrl(pad(index, 2), zoom);
}
}
if (zoom == 15) {
var _x = 26978, _y = 12414;
var _p = 1;
if (tile.x >= _x && tile.x < _x + 2**_p && tile.y >= _y && tile.y < _y + 2**_p) {
var index = (tile.y - _y) * 2**_p + (tile.x - _x) + 1;
return _getloaclTileUrl(pad(index, 2), zoom);
}
}
if (zoom == 16) {
var _x = 53956, _y = 24828;
var _p = 2;
if (tile.x >= _x && tile.x < _x + 2**_p && tile.y >= _y && tile.y < _y + 2**_p) {
var index = (tile.y - _y) * 2**_p + (tile.x - _x) + 1;
return _getloaclTileUrl(pad(index, 2), zoom);
}
}
if (zoom == 17) {
var _x = 107912, _y = 49656;
var _p = 3;
if (tile.x >= _x && tile.x < _x + 2**_p && tile.y >= _y && tile.y < _y + 2**_p) {
var index = (tile.y - _y) * 2**_p + (tile.x - _x) + 1;
return _getloaclTileUrl(pad(index, 2), zoom);
}
}
return _getTileUrl(tile, zoom);
}
var gaodeTileOpts = {
alt:"gaode",
name:"gaode",
tileSize:new qq.maps.Size(256,256),
maxZoom:18,
minZoom:1,
getTileUrl:tailUrl
};
var gaodeTile = new qq.maps.ImageMapType(gaodeTileOpts);
var map = new qq.maps.Map(document.getElementById("container"), {
center:new qq.maps.LatLng(39.916527, 116.397128),
minZoom:1,
maxZoom:19,
zoom:15
});
// 数字补0转字符串
function pad(num, n) {
return Array(n - ('' + num).length + 1).join(0) + num;
}
map.mapTypes.set('gaode',gaodeTile);
map.set('mapTypeId','gaode');
}
</script>
</head>
<body onload="init()">
<div id="container"></div>
<p id="info" style="margin-top:10px;">此示例演示自定义底图。</p>
</body>
</html>
四、Demo
已经将此示例打包上传,点击链接下载即可
免积分下载
如何定位瓦片地址需要自己实现为瓦片添加标注和边框的后端程序