天地图API 调用影像底图 影像注记 全球境界

vue代码如下:

initTdtMap(){
this.zoom = 4;
var line;
var points = [];
var lay;
var lay2;
var 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=你的密钥";
										  
var 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=你的密钥";
														
								
								
var lay3;
var imageURL3 ="http://t0.tianditu.gov.cn/ibo_w/wmts?" +
										"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +"&tk=你的密钥";
								
								
								
										 
 //创建自定义图层对象
lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
lay2 = new T.TileLayer(imageURLT, { minZoom: 1, maxZoom: 18 });
lay3 = new T.TileLayer(imageURL3, { minZoom: 1, maxZoom: 18 });
									
var config = {layers: [lay,lay2,lay3]};
							
//初始化地图对象
 this.tdtMap = new T.Map(this.tdtMapDivID, config);
//设置显示地图的中心点和级别
this.tdtMap.centerAndZoom(new T.LngLat(this.phoneLon, this.phoneLat), this.zoom);
// var bounds = "116.27648,39.84042,116.4605,39.9721".split(",");
// var bounds = "74.21,3.05,137.25,53.88".split(",");
// this.tdtMap.setMaxBounds(new T.LngLatBounds(new T.LngLat(this.bounds[0], this.bounds[1]), new T.LngLat(this.bounds[2], this.bounds[3])));
 //允许鼠标滚轮缩放地图
 this.tdtMap.enableScrollWheelZoom();
//创建缩放平移控件对象
var control = new T.Control.Zoom();
//添加缩放平移控件
this.tdtMap.addControl(control);
	this.tdtMap.enableInertia()
this.tdtMap.enableDoubleClickZoom()
//创建比例尺控件对象
var scale = new T.Control.Scale();
//添加比例尺控件
this.tdtMap.addControl(scale);

显示效果:

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我叫杨傲天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值