vue中高德地图初始化及添加标准图层、实时路况图层、卫星图、卫星和路网、楼块图层

高德地图API示例：JS API 示例 | 高德地图API

高德地图API手册：参考手册-地图 JS API v2.0 | 高德地图API

1.在public的index.html中引入高德地图：

<!-- 高德API -->
		<script
			language="javascript"
			src="https://webapi.amap.com/maps?v=1.4.15&key=42a2fe4f3d2084e7e90a24917d019faf&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar,AMap.MarkerClusterer,AMap.Driving,AMap.MouseTool,AMap.Geocoder"
		></script>
		<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
		<script src="http://a.amap.com/jsapi_demos/static/china.js"></script>
		
		<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js"></script>

2.vue文件中为相应添加图层的按钮，首先用import中引入相关方法

3.在js文件中：相关图层添加方法（该方式适用于少量方法的使用）

let map; // 初始化时的地球容器

// 隐藏地球
function hiddenEarth () {
	let hidden = document.querySelector('#earthPanel')
	hidden.style.display = 'none'
}
// 添加地球
function addEarth () {
	let add = document.querySelector('#earthPanel')
	add.style.display = 'block'
}

// 高德地图初始化
function MapInit (el) {
	map = new AMap.Map("gaodeContainer", {  //设置地图容器id
		viewMode: "3D",    //是否为3D地图模式
		zoom: 10,           //初始化地图级别
		center: [114.514859, 38.042306], //初始化地图中心点位置
	});

}

// 添加标准图层
function addNormLayer () {
	hiddenEarth()
	var map = new AMap.Map('gaodeContainer', {
		center: [114.514859, 38.042306],
		layers: [//只显示默认图层的时候，layers可以缺省
			new AMap.TileLayer()//高德默认标准图层
		],
		zoom: 13
	});
}

// 移除标准图层
function removeNormLayer () {
	addEarth()
}


// 实时路况图层
function addLiveLayer () {
	// 隐藏地球
	hiddenEarth()
	// 地图初始化
	MapInit('gaodeContainer')
	// 添加实时路况图层
	var trafficLayer = new AMap.TileLayer.Traffic({
		center: [114.514859, 38.042306],
		zoom: 1,
		zIndex: 10,
	});
	trafficLayer.setMap(map);

}

// 移除实时路况图层
function removeLiveLayer () {
	// 添加地球
	MapInit('gaodeContainer')
}

// 添加卫星图
function addSatellite () {
	hiddenEarth()
	var satellite = new AMap.Map('gaodeContainer', {
		center: [114.514859, 38.042306],
		layers: [new AMap.TileLayer.Satellite()],
		zoom: 13
	});

}

// 移除卫星图
function removeSatellite () {
	MapInit('gaodeContainer')
}

// 添加卫星和路网
function addSatelliteAndRoadNet () {
	hiddenEarth()
	var map = new AMap.Map('gaodeContainer', {
		center: [114.514859, 38.042306],
		layers: [
			// 卫星
			new AMap.TileLayer.Satellite(),
			// 路网
			new AMap.TileLayer.RoadNet()
		],
		zoom: 13
	});

}

// 移除卫星和路网
function removeSatelliteAndRoadNet () {
	MapInit('gaodeContainer')
}

// 添加楼块图层
function addBlock () {
	hiddenEarth()
	var map = new AMap.Map('gaodeContainer', {
		center: [114.514859, 38.042306],
		viewMode: '3D',
		pitch: 60,
		rotation: -35,
		// 隐藏默认楼块
		features: ['bg', 'road', 'point'],
		mapStyle: 'amap://styles/light',
		layers: [
			// 高德默认标准图层
			new AMap.TileLayer.Satellite(),
			// 楼块图层
			new AMap.Buildings({
				zooms: [16, 18],
				zIndex: 10,
				heightFactor: 2//2倍于默认高度，3D下有效
			})
		],
		zoom: 16
	});
}

// 移除楼块图层
function removeBlock () {
	MapInit('gaodeContainer')
}


export { addNormLayer, removeNormLayer, addLiveLayer, removeLiveLayer, addSatellite, removeSatellite, addSatelliteAndRoadNet, removeSatelliteAndRoadNet, addBlock, removeBlock };

4.在js文件中：添加图层的方法简洁版，有些可以合并到一个方法中调用，和上面的js文件功能相同。

let map; // 初始化时的地球容器
let trafficLayer; // 实时路况图层

// 隐藏地球
function hiddenEarth () {
	let hidden = document.querySelector('#earthPanel')
	hidden.style.display = 'none'
}
// 添加地球
function addEarth () {
	let add = document.querySelector('#earthPanel')
	add.style.display = 'block'
}

// 高德地图初始化
function MapInit (el) {
	map = new AMap.Map("gaodeContainer", {  //设置地图容器id
		viewMode: "3D",    //是否为3D地图模式
		zoom: 10,           //初始化地图级别
		center: [114.514859, 38.042306], //初始化地图中心点位置
	});
}

// 添加图层
function addMapLayer (el) {
	// 隐藏地球
	hiddenEarth()
	// 地图初始化
	MapInit('gaodeContainer')

	switch (el) {
		case 'gdnormlayer': {
			// 添加标准图层
			map.add(new AMap.TileLayer())
			break
		}
		case 'gdsatellite': {
			// 添加卫星图
			map.add(new AMap.TileLayer.Satellite())
			break
		}
		case 'gdsatelliteandroladnet': {
			// 添加卫星和路网
			map.add(new AMap.TileLayer.Satellite())
			map.add(new AMap.TileLayer.RoadNet())
			break
		}
	}
}

// 移除图层
function removeLayer (el) {
	if (el == 'gdnormlayer') {
		addEarth()
	} else { MapInit('gaodeContainer') }

}

// 添加实时路况
function addLiveLayer () {
	hiddenEarth()
	MapInit('gaodeContainer')
	trafficLayer = new AMap.TileLayer.Traffic({
		zIndex: 10
	});

	trafficLayer.setMap(map);
}


// 添加楼块图层
function addBlockLayer () {
	hiddenEarth()
	var map = new AMap.Map('gaodeContainer', {
		center: [114.514859, 38.042306],
		viewMode: '3D',
		pitch: 60,
		rotation: -35,
		// 隐藏默认楼块
		features: ['bg', 'road', 'point'],
		mapStyle: 'amap://styles/light',
		layers: [
			// 高德默认标准图层
			new AMap.TileLayer.Satellite(),
			// 楼块图层
			new AMap.Buildings({
				zooms: [16, 18],
				zIndex: 10,
				heightFactor: 2 // 2倍于默认高度，3D下有效
			})
		],
		zoom: 16
	});
}



export { addLiveLayer, addMapLayer, removeLayer, addBlockLayer };