实现地图加载自定义图片（含图片切割）

最新推荐文章于 2024-07-02 13:34:53 发布

置顶不一样的大海

最新推荐文章于 2024-07-02 13:34:53 发布

阅读量2.6k

点赞数 2

分类专栏： html js 地图文章标签：地图自定义地图图片切割自定义瓦片

版权开放，任意转载！～～

本文链接：https://blog.csdn.net/donghaiming111/article/details/105408466

版权

html 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

地图

2 篇文章 0 订阅

订阅专栏

一、效果

实现在地图中指定区域显示自定义图片，并支持指定层级放大缩小，点击链接预览效果自定义底图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

已经将此示例打包上传，点击链接下载即可
免积分下载

如何定位瓦片地址需要自己实现为瓦片添加标注和边框的后端程序
在这里插入图片描述

不一样的大海

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
实现地图加载自定义图片（含图片切割）

一、效果实现在地图中指定区域显示自定义图片，并支持指定层级放大缩小二、材料准备高清图片一张使用ps的切片选择工具，将图片分别4等分，16等分，64等分切割。然后存储为web所用格式（确保每张图片大小为256px * 256px）,按层级保存到文件夹三、编写html（过程省略，不理解的评论指出）<!DOCTYPE html><html><h...
复制链接

扫一扫