渲染多个高德影像图并开关控制显示/隐藏

1. 引入渲染高德地图所需的js
2. 创建高德地图
3. 渲染多个影像图添加到地图上
4. 开关控制影像图显示/隐藏

初始化地图+控制开关

<div class="content">
	<div id="mapcont"></div>
	<!-- 选项卡 -->
	<div class='input-card'>
		<div class="input-item">
			<input type="checkbox" checked onclick="img_switch(this)" />
			<label>影像图</label>
		</div>
	</div>
</div>

// 创建地图
let map = new AMap.Map('mapcont', {
	layers: [
		new AMap.TileLayer.Satellite(),
	],
	resizeEnable: true,
	zoom: 15,
	expandZoomRange:true,
	zooms:[3, 20],
})

设置地图缩放层级zooms:[3, 20]，高德地图PC端默认3-18，如果想要地图可放大到20需设置expandZoomRange:true才起作用，高德地图层级最大放大到20；

渲染多个影像图

var imageLayers = [];
if(Array.isArray(data)){ 
	// 接口返回的data是数组 - 多条数据
	data.forEach((item, index)=>{
		// SWPos西南 - 左下
		var lnglat1 = [item.SWPos.longitude, item.SWPos.latitude];
		// NEPos东北 - 右上
		var lnglat2 = [item.NEPos.longitude, item.NEPos.latitude];
		// 图片地址
		var url = window.location.origin + item.outputurl;
        // 图层堆叠顺序
		var zindex = Number(item.zindex);
							
		// 创建图片图层
		var imageLayer = new AMap.ImageLayer({
				url: url,
				bounds: new AMap.Bounds(lnglat1, lnglat2),
				zIndex: zindex+1, // 越大越在最上层
				expandZoomRange:true,
				zooms:[3, 20],
				map: map,
		});
		// 放到图层集合
		imageLayers.push(imageLayer);
	});
}

开关控制显示/隐藏

// 开关：影像图
function img_switch(e) {
	if (e.checked) {
		// 显示
		imageLayers.forEach(item=>{
			item.show();
		})
	} else {
		// 隐藏
		imageLayers.forEach(item=>{
			item.hide();
		})
	}
}