天地图加载影像、标记

最新推荐文章于 2024-05-17 16:41:46 发布

yb305小白

最新推荐文章于 2024-05-17 16:41:46 发布

阅读量2.7k

点赞数 4

分类专栏：地图——天地图文章标签：天地图加载多个图层地图服务

本文链接：https://blog.csdn.net/yb305/article/details/118387012

版权

地图——天地图专栏收录该内容

4 篇文章 2 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－加载两个地图</title>
    <style type="text/css">
        body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #map1_container {width:100%;height:80%;float:left;overflow: hidden;margin:0;}
    </style>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <script>
		//注：同一页面创建多个地图时必须为同一投影
        var map,map2;
        var zoom = 12;
        function onLoad() {    
           var imgURL1 ="http://t0.tianditu.gov.cn/img_w/wmts?" +     "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
            "&tk=你的key值";//影像底图
        	//创建自定义图层对象
          var imgURL2 ="http://t0.tianditu.gov.cn/cia_w/wmts?" +     "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
            "&tk=你的key值";//矢量注记
        	//创建自定义图层对象
            var lay1 = new T.TileLayer(imgURL1, { minZoom: 6, maxZoom: 18 });
            var lay2 = new T.TileLayer(imgURL2, { minZoom: 6, maxZoom: 18 });

            var config = { layers: [lay1,lay2] };
            map = new T.Map('map1_container',config);
            map.centerAndZoom(new T.LngLat(102.061917,38.424982), zoom);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="map1_container"></div>
</body>
</html>

效果：

访问天地图不同图层用法：

如果需要用到其它服务图层url，请注意把url地址中的LAYER=xxx修改，xxx为请求服务图层类型，包括：

LAYER	类型
vec	矢量底图
cva	矢量注记
img	影像底图
cia	影像注记
ter	地形晕渲
cta	地形注记
ibo	全球境界
eva	矢量英文注记
eia	影像英文注记

将红色单词替换

http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" &TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key值"

地图服务列表

缩略图	图层名称	服务地址	投影类型
	矢量底图	http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥	球面墨卡托投影
	矢量注记	http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密钥	球面墨卡托投影
	影像底图	http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥	球面墨卡托投影
	影像注记	http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密钥	球面墨卡托投影
	地形晕渲	http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密钥	球面墨卡托投影
	地形注记	http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密钥	球面墨卡托投影
	全球境界	http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密钥	球面墨卡托投影
	矢量英文注记	http://t0.tianditu.gov.cn/eva_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/eva_w/wmts?tk=您的密钥	球面墨卡托投影
	影像英文注记	http://t0.tianditu.gov.cn/eia_c/wmts?tk=您的密钥	经纬度投影
		http://t0.tianditu.gov.cn/eia_w/wmts?tk=您的密钥	球面墨卡托投影
	三维地名调用说明cesuim扩展包	https://[ t0-t7 ].tianditu.gov.cn/mapservice/GetTiles?tk=您的密钥
				三维地形调用说明cesuim扩展包	https://[ t0-t7 ].tianditu.gov.cn/mapservice/swdx?tk=您的密钥

*天地图地图服务二级域名包括t0-t7，您可以随机选择使用，如http://t2.tianditu.gov.cn/vec_c/wmts?tk=您的密钥

请求示例

（1）元数据查询

http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts

（2）地图瓦片获取

http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥

yb305小白

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
天地图加载影像、标记

源码：<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <title>天地图－地图API－范例－加载两个地图</title> <style type="text
复制链接

扫一扫