vue中使用天地图api

参考天地图官方demo去写就好了

链接: http://lbs.tianditu.gov.cn/api/js4.0/examples.html.

具体使用的实例

正常的话把里面的坐标、秘钥和图片地址换一下就直接可以用，我对里面的一部分不适合展示的东西做了删减，没有专门去测试，不过应该也没什么大问题，有问题照着报错改就好啦，我估计99%是没问题的，我就不测试了，哈哈哈

//我用的是vue-cli 4.0的，别的应该也差不多，在public里找到index.html页面
//加入标签
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的秘钥	" type="text/javascript"></script>

//在你要绘制地图的页面引入
const arr1 = [{lat:123.123,lon:46.46}] //写入坐标
const T = window.T;
var map3D="";
export default {
	data() {
		return {
			color: ['#ef4464', '#fad259', '#d22e8d ', '#03dee0', '#d05c7c', '#bb60b2', '#628cee', '#f47a75', '#009db2'
			]
			
		}
	},
	props: {
		bounds: {
			type: Array,
			default: [
				{
					coordinate:[
						'123.123,46.46',
						'123.123,46.46',
						'123.123,46.46'
					]
				}
			]
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			// 绘制卫星地图
			//卫星图影像
			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=你的秘钥";
			//卫星图标记
			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=你的秘钥";
			const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 });
			const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 });
			var config = { layers: [lay, lay2] };
			//创建地图对象
			var map=new T.Map('container', config);
			//初始化地图
			map.centerAndZoom(new T.LngLat(123.4972400,47.9183800), 16);
			//创建多个覆盖面
			for(let i in this.bounds) {
				let arr = this.bounds[i].coordinate
				let points = []
				for(let j in arr) {
					//有的取点坐标中间的逗号都是中文，这里替换一下，要不会出错无法显示
					let pArr = arr[j].replace('，',',').split(',')
					points.push(new T.LngLat(parseFloat(pArr[0]),parseFloat(pArr[1])))
				}
				//创建面对象，给覆盖面添加一些颜色和边框
				let polygon = new T.Polygon(points,{
						color: this.color[i], weight: 3, opacity: 1, fillColor: this.color[i], fillOpacity: 0.1
				});
				//向地图上添加面
				map.addOverLay(polygon);
				//为覆盖面添加一些点击事件，这里可能会有一个无法移除事件的问题，为事件加命名就好了，没什么难度，我就不写了
				polygon.addEventListener("click", (e)=>{
					this.sqClick(e)
				});
				
			}
			// 创建多个标记点
			for(let i in arr1) {
				let point = new T.LngLat(parseFloat(arr1[i].lat),parseFloat(arr1[i].lon));
				//创建自定义图标，也可以不写这一步，然后把下面的icon赋值去掉就好了
				let icon = new T.Icon({
					iconUrl: '这里可以放你要写入的图标网络地址',
					iconSize: new T.Point(40, 40)
				})
				let marker = new T.Marker(point,{opacity: 1,icon:icon});// 创建标注
				map.addOverLay(marker);
			}
			
			
			//这里是添加单个面的方法，上面的添加多个面的简化版，没什么好说的
			// var points = [];
			// points.push(new T.LngLat(123.4,47.9));
			// points.push(new T.LngLat(123.4,47.9));
			// points.push(new T.LngLat(123.4,47.9));
			// //创建面对象
			// var polygon = new T.Polygon(points,{
			// 		color: "blue", weight: 3, opacity: 0.8, fillColor: "#FFFFFF", fillOpacity: 0.3
			// });
			// //向地图上添加面
			// map.addOverLay(polygon);
		},
		//这里是点击覆盖面后触发的事件
		sqClick(e) {
			let obj = e.target
			console.log(obj)
		}
	}
}