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);
显示效果: