【自学笔记】天地图笔记一
程序员文章站
2022-03-04 23:41:47
...
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("#####################################################")
}
好记性不如烂笔头，打算把博客作为学习工具，记录理解的知识点方便后面查看，顺便记录成长点滴。我是一名技术小白，我会一直努力学习，若文章有不对的地方，欢迎大家指正，我的邮箱：[email protected]