ImageMapTypeOptions 对象规范
渲染图像瓦片类参数。
属性
| 名称 | 类型 | 说明 |
|---|---|---|
alt
|
String
|
当此 MapType 的按钮悬停在 MapTypeControl 中时显示的备选文本。可选。 |
getTileUrl
|
Function
|
通过传入的瓦片坐标(x,y)以及zoom级别返回瓦片的URL(string类型)。该方法形式如下：Function(Point,number):string |
minZoom
|
Number
|
指定用于显示图层的最小缩放级别。 |
maxZoom
|
Number
|
指定用于显示图层的最大缩放级别。 |
name
|
String
|
图层名称。要在 MapTypeControl 中显示的名称。可选。 |
opacity
|
Number
|
ImageMapType瓦片的透明度。opacity被设置为0到1.0之间的浮点数，0代表全透明，1.0代表不透明。 |
tileSize
|
Size
|
瓦片尺寸。 |
实例
本示例中，介绍如何设置自定义瓦片地图
//按照ImageMapType规范自定义一个类
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
var tileRange = 1 << zoom;
if (y < 0 || y >= tileRange) {
return null;
}
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
//新建一个ImageMapType，实现ImageMapTypeOptions规范
var earthlayer = new qq.maps.ImageMapType({
//设置在 MapTypeControl 中显示的名称
name: '绿色家园',
//设置鼠标停留在控件上时显示的内容（对空间名称的解释）
alt: '绿色家园',
//设置瓦片的尺寸
tileSize: new qq.maps.Size(256, 256),
//设置该地图类型的最小缩放级别
minZoom: 1,
//设置该地图类型的最大缩放级别
maxZoom: 5,
//通过传入的瓦片坐标(x,y)以及zoom级别返回瓦片的URL(string类型)
getTileUrl: function(tile, zoom) {
var normalizedCoord = getNormalizedCoord(tile, zoom);
if (!normalizedCoord) {
return null;
}
var z = zoom,
x = tile.x,
y = tile.y;
return 'https://lbs.qq.com/doc/sample/img/earth/tile_' + z + '_' + normalizedCoord.x + '-' + normalizedCoord.y + '.png';
}
});
var map;
function init() {
map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 2,
mapTypeId: 'coordinate',
mapTypeControlOptions: {
mapTypeIds: ['earth']
}
});
map.mapTypes.set('earth', earthlayer);
map.setMapTypeId('earth');
var info_span = document.getElementById("info");
var n = 0;
//监听ImageMapType图片加载
qq.maps.event.addListener(map, "tilesloaded", function() {
info_span.innerText = "tilesloaded:第" + ++n + "次";
});
}
<!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;
}
p {
width: 603px;
padding-top: 3px;
overflow: hidden;
}
.btn {
width: 100px;
height: 26px
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
//按照ImageMapType规范自定义一个类
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
var tileRange = 1 << zoom;
if (y < 0 || y >= tileRange) {
return null;
}
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
//新建一个ImageMapType，实现ImageMapTypeOptions规范
var earthlayer = new qq.maps.ImageMapType({
//设置在 MapTypeControl 中显示的名称
name: '绿色家园',
//设置鼠标停留在控件上时显示的内容（对空间名称的解释）
alt: '绿色家园',
//设置瓦片的尺寸
tileSize: new qq.maps.Size(256, 256),
//设置该地图类型的最小缩放级别
minZoom: 1,
//设置该地图类型的最大缩放级别
maxZoom: 5,
//通过传入的瓦片坐标(x,y)以及zoom级别返回瓦片的URL(string类型)
getTileUrl: function(tile, zoom) {
var normalizedCoord = getNormalizedCoord(tile, zoom);
if (!normalizedCoord) {
return null;
}
var z = zoom,
x = tile.x,
y = tile.y;
return 'https://lbs.qq.com/doc/sample/img/earth/tile_' + z + '_' + normalizedCoord.x + '-' + normalizedCoord.y + '.png';
}
});
var map;
function init() {
map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 2,
mapTypeId: 'coordinate',
mapTypeControlOptions: {
mapTypeIds: ['earth']
}
});
map.mapTypes.set('earth', earthlayer);
map.setMapTypeId('earth');
var info_span = document.getElementById("info");
var n = 0;
//监听ImageMapType图片加载
qq.maps.event.addListener(map, "tilesloaded", function() {
info_span.innerText = "tilesloaded:第" + ++n + "次";
});
}
</script>
</head>
<body onload="init();">
<div style="width:603px;height:300px" id="container"></div>
<span id="info"></span>
</body>
</html>