【自学笔记】天地图笔记一

最新推荐文章于 2022-05-20 16:41:35 发布

小黑猪hhh

最新推荐文章于 2022-05-20 16:41:35 发布

阅读量499

点赞数 1

分类专栏：天地图

本文链接：https://blog.csdn.net/weixin_46074818/article/details/109119715

版权

天地图专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html部分

<--onLoad=页面加载时加载地图-->
<body onLoad="mapLoad()">
    <div id="tabMap">
    </div>
</body>

css部分

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body, html{
	width: 100%;
	height: 100%;
	font-family:"微软雅黑";
}
#tabMap{
	width:100%;
	height:100%;
	position: relative;
}

js部分

在这里插入代码片
var maptab;//地图全局变量
var zoom = 18;//缩放级别
//载入时加载的函数
function mapLoad(){
    //两个url。一个是加载卫星影像图的url，一个是对应的标记点
    const imageURL = "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=秘钥";
    const imageURLT = "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=秘钥";
    //在对应url上创建自定义图层对象。TileLayer通过此类实现在地图上叠加自定义的地图图块层。
	const lay1 = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
	const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});
	//为创建实例地图创建该配置参数
    var config = {layers: [lay1,lay2]};
    //实例化地图对象。Map此类是地图API的核心类，用来实例化一个地图。
    maptab = new T.Map('tabMap',config);
    //在指定的容器内创建地图实例，之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。
    //LngLat此类以经度和纬度表示的地理位置坐标点。lnglat：地图的中心点地理坐标。
    // zoom：地图的比例尺级别。
    maptab.centerAndZoom(new T.LngLat(107.353926, 22.404108), zoom);
    // console.log("#####################################################")
}

好记性不如烂笔头，打算把博客作为学习工具，记录理解的知识点方便后面查看，顺便记录成长点滴。我是一名技术小白，我会一直努力学习，若文章有不对的地方，欢迎大家指正，我的邮箱：xiaoheizhu3306@163.com

小黑猪hhh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【自学笔记】天地图笔记一

html部分<--onLoad=页面加载时加载地图--><body onLoad="mapLoad()"> <div id="tabMap"> </div></body>css部分*{ padding: 0; margin: 0; box-sizing: border-box;}body, html{ width: 100%; height: 100%; font-family:"微软雅黑";}#ta
复制链接

扫一扫