Vue 天地图

余云熹

已于 2022-08-24 10:12:10 修改

阅读量264

点赞数

文章标签： vue.js javascript 前端

于 2022-08-24 10:08:14 首次发布

本文链接：https://blog.csdn.net/qq_59944654/article/details/126498576

版权

天地图官网（https://www.tianditu.gov.cn/）

首先，我们需要去申请天地图密钥（用户系统）

回到项目中，在index.html文件中引入天地图JavaScript API

		<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥" type="text/javascript">

创建MapInit.js文件

// 初始化地图
export default {
  init() {
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (window.T) {
        console.log('地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  }
}

<template>
//创建一个挂载map的盒子
	<div id="yzMap"></div>
</template>

<script>
    //引入创建的js文件
	import MapInit from '@/components/MapInit.js';
	export default {
		name: 'dataTools',
		props: {
			msg: String
		},
		data() {
			return {
				
			}
		},
		mounted() {
			// 初始化天地图
			this.roadMap()
		},
		methods: {
			roadMap() {
				MapInit.init().then(
					T => {
						this.T = T;
						// const imageURL = "http://t0.tianditu.gov.cn/img_c/wmts?tk=68a0d8c83093f0c0e871f2b12febd895";
						
						// 卫星底图
						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=68a0d8c83093f0c0e871f2b12febd895";
						//	正常线路地图
						// 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=68a0d8c83093f0c0e871f2b12febd895";
						const lay = new T.TileLayer(imageURL, {
							minZoom: 6,
							maxZoom: 18
						});
						// const lay2 = new T.TileLayer(imageURLT, {
						// 	minZoom: 6,
						// 	maxZoom: 18
						// });
						const config = {
							layers: [lay]
						};
						this.map = new T.Map('yzMap', config);
						// 开启图层
						// const ctrl = new T.Control.MapType();
						// this.map.addControl(ctrl);
						this.map.centerAndZoom(new T.LngLat(104.066371, 30.59289), 15);
						// 取消左下角logo
						document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none';
					}).catch()
			},
		}
	}
</script>
<style>
	#yzMap {
		width: 100vw;
		height: 100vh;
		
	}
</style>