访问WMTS的地图

最新推荐文章于 2025-05-26 11:48:25 发布

笑笑学生

最新推荐文章于 2025-05-26 11:48:25 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： SuperMap

本文链接：https://blog.youkuaiyun.com/qq_20337985/article/details/60874353

SuperMap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用SuperMap iClient for JavaScript实现的天地图WMTS服务图层示例。示例中详细展示了如何设置分辨率数组(resolutions)及矩阵标识(matrixIds)，并说明了二者的一一对应关系。同时指出了当地图全幅范围非默认全球范围时，需设置map.maxExtent。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WMTS对象的构造函数：

new SuperMap.Layer.WMTS({name, url,layer,style,matrixSet,resolutions,matrixIds});

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图WMTS服务图层</title>
<script src="./libs/SuperMap.Include.js"></script>
<script type="text/javascript">
	var map,layer;
	var matrixIds=[];
	for(var i=0;i<9;++i){
		matrixIds[i]={identifier:i};
	}
	var resolutions = [
		0.703125,
		0.3515625,
		0.17578125,
		0.087890625,
		0.0439453125,
		0.02197265625,
		0.010986328125,
		0.0054931640625,
		0.00274658203125];
	function init(){
		map = new SuperMap.Map("map");
		layer = new SuperMap.Layer.WMTS({
			name:"世界地图_Day",
			url:"",
			layer:"世界地图_Day",
			style:"default",
			matrixSet:"ChinaPublicServices_世界地图_Day",
			fromat:"image/png",
			resolutions:resolutions,
			matrixIds:matrixIds,
			opacity:1,
			requestEncoding:"KVP"});
		map.addLayer(layer);
		map.setCenter(new SuperMap.LonLat(0, 0), 2);
	}
</script>
</head>
<body onload="init()">
	<div id="map" style="left:0px;right:0px;width:800px;height:500px">
	</div>
</body>
</html>

重点理解：
1、当前图层的分辨率数组信息,和matrixIds一样，需要用户从wmts服务获取并明确设置,resolutions数组和matrixIds数组长度相同
2、你不必填写所有的分辨率，可以自定义缩放级别，但是得保证resolutions数组的值与matrixIds数组中的identifier是一一对应的；同时当你的地图的全幅范围不是默认的全球范围时，需要设置map.maxExtent为相应的值。

参考：
如何使用iClient for JavaScript叠加地图
 SuperMap iClient for JavaScript 新手入门
 用skyline调用WMTS接口