注:如不需要左下角 天地图 文字,找到对应的样式,隐藏即可
index.html
<script type="text/javascript"
src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script type="text/javascript"
src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js"></script>
<template>
<div style="width: 100%;height: 100%;">
<div
id="centerMap"
class="centerMap"
style="width: 100%;height: 100%"
></div>
<!-- <projectBasicInfoDialog ref="projectBasicInfoDialog"/>-->
</div>
</template>
// 初始化天地图2
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] };
//初始化地图对象
map = new T.Map("centerMap", config);
//设置显示地图的中心点和级别
map.centerAndZoom(
new T.LngLat(109.67291896206848, 32.855915983379035),
5
);
// var bounds = "116.27648,39.84042,116.4605,39.9721".split(",");
// var bounds = "74.21,3.05,137.25,53.88".split(",");
// map.setMaxBounds(new T.LngLatBounds(new T.LngLat(this.bounds[0], this.bounds[1]), new T.LngLat(this.bounds[2], this.bounds[3])));
//允许鼠标滚轮缩放地图
map.enableScrollWheelZoom();
//创建缩放平移控件对象
var control = new T.Control.Zoom();
//添加缩放平移控件
map.addControl(control);
map.enableInertia();
map.enableDoubleClickZoom();
//创建比例尺控件对象
var scale = new T.Control.Scale();
//添加比例尺控件
map.addControl(scale);
}
mounted:{
this.initTdtMap();
}