Vue項目引入天地圖
- 在vue的靜態資源目錄下的index.html中引入天地圖的底圖 http://lbs.tianditu.gov.cn/api/js4.0/guide.html
- 在引入了vue項目以后及將需要用到的功能從window對象下賦值給當前項目的Data
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申請的key"> // 引入天地圖底層圖 具體頁面代碼
<template>
<div id="viewDiv" style="width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;">
</div>
</template>
<script>
export default {
name: "Data",
mounted() {
var T = window.T;
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=f40b5d54d28af08fcca0003dc581e55c';
var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 16 });
var config = { layers: [lay] };
this.map = new T.Map('viewDiv', config); // 地圖實例
this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 3);
// //允許鼠標雙擊放大地圖
this.map.enableScrollWheelZoom();
//創建地圖圖層對象
let mapTypeSelect = [{
'title': '地圖', //地圖控件上所要顯示的圖層名稱
'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地圖控件上所要顯示的圖層圖標（默認圖標大小80x80）
'layer': window.TMAP_NORMAL_MAP //地圖類型對象，即MapType。
},
{
'title': '衛星',
'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
'layer': window.TMAP_SATELLITE_MAP
}, {
'title': '衛星混合',
'http': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
'layer': 'TMAP_HYBRID_MAP'
}, {
'title': '地形',
'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
'layer': window.TMAP_TERRAIN_MAP
},
{
'title': '地形混合',
'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
'layer': window.TMAP_TERRAIN_HYBRID_MAP
}];
var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }); // 初始化地圖類型選擇控件
this.map.addControl(ctrl); //添加地圖選擇控件
this.map.setMapType(window.TMAP_HYBRID_MAP); // 設置地圖位地星混合圖層
this.GetMaps ()
},
methods: {
GetMaps () {
let T = window.T;
//設置顯示地圖的中心點和級別
this.map.clearOverLays();
this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 3);
// console.log(index);
var icon = new T.Icon({
iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
iconSize: new T.Point(33, 33),
iconAnchor: new T.Point(10, 25)
});
var latlng = new T.LngLat(21,22,); // 設置坐標點傳入經度緯度
let marker = new T.Marker(latlng, { icon: icon });// 創建標注
const that = this;
marker.addEventListener('click', function (e) { // 監聽點擊事件
let clientx = e.lnglat.lat; // 獲取marker當前經緯度
let clientY = e.lnglat.lng;
that.map.centerAndZoom(new T.LngLat(clientY, clientx), 10); // 重新創建地圖對象
// 這里獲取的經度緯度是實際經緯度四舍五入后的獲取的
});
}
}
};
</script>