高德地图实现固定区域显示、车辆最优路线，地图缩放限制、车辆实时位置查询，实际真实路径回描

高德地图实现固定区域显示、车辆最优路线，地图缩放限制、车辆实时位置查询，实际真实路径回描

//HTML中需提前引入
&plugin=AMap.MapType&plugin=AMap.Geocoder&plugin=AMap.DistrictSearch&plugin=AMap.Polyline&plugin=AMap.MarkerClusterer&plugin=AMap.Scale&plugin=AMap.Driving&plugin=AMap.ToolBar

//数据
let listData = {
	//该条警情数据，里边包括警情主消息、车辆集合（其中包括单个车辆路线点经纬度集合）
	lineData:{},
	//车辆集合信息
	carOnline:[],
}

//marker数据
let markerAll = {
	carOnline:[],
}

var map = '';
var driving = '';

//显示区域地图
setTimeout(function(){
	//呈现地图
	startMap();
	//获取数据
	startCarData();
})

//定时器(用于固定时间获取一次GP数据，以保证拿到实时的车辆位置信息)
setInterval(function(){
	//获取接口数据，只更新数据即可	
	startCarData2()
	console.log('5s后重新获取车辆信息')
},5*1000)

//底图区域显示
function startMap(){
	map = new AMap.Map("map",{
		center: [116.511, 39.911],
	    zoom: 12,
	    pitch: 25,
	    viewMode: '3D',
	    resizeEnable: true,
	    rotateEnable:false, //固定视角
	    pitchEnable:false,
	    mapStyle: "amap://styles/darkblue"
	});
	
	//路线
	driving = new AMap.Driving({
        map: map,
        panel: "panel"
    });
    
	//增加比例尺
	var scale = new AMap.Scale({
		visible:true,
	})

	//增加左侧控件
	var toolBar = new AMap.ToolBar({
        visible: true,
    })
    
	map.addControl(scale);
	map.addControl(toolBar);
	
	//底图缩放事件（此处的功能是地图最大放大比例是9.5）
	map.on('zoomchange', function(e){
	    mouseZoom();
	})
	
	//区域范围高亮
	new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 0
    }).search('***', function (status, result) {
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
        ];
        var holes = result.districtList[0].boundaries
        var pathArray = [outer];
        pathArray.push.apply(pathArray, holes)
        var polygon = new AMap.Polygon({
            pathL: pathArray,
            //线条颜色，使用16进制颜色代码赋值。默认值为#006600
            strokeColor: '#A0A9C2',
            strokeWeight: 1,
            //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeOpacity: 0.8,
            //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            //fillColor: '#8ebceb',
            fillColor: '#ccc',
            //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillOpacity: 1,
            //轮廓线样式，实线:solid，虚线:dashed
            strokeStyle: 'solid',
            /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值：
			  实线：[0,0,0]
			  虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
			  点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
			  线和10个像素的空白 （如此反复）组成的虚线*/
            strokeDasharray: [10, 2, 10]
        });
        polygon.setPath(pathArray);
        map.add(polygon);
    });

}

//缩放限制
function mouseZoom(){
	let zoom = map.getZoom();
    if(zoom<9.5){
    	map.setZoom('9.5')
    }
}

//获取车辆信息
function startCarData(){
	//此处是拿到警情的id;
	let id = document.getElementById('signId').getAttribute('data');
	//地图右侧有关于此次警情的信息展示，拿到dom节点
	let dom = document.getElementById('alarmContent');
	
	let domCont = ``; //右侧内容
	let carList = `` //右侧车信息

	$.ajax({
		url:"******/"+id,
		type:"get/post",
		dataType:"json",
		data:{},
		success:function(resp){
			//此处需要判断一下是否有回显的信息
			if(resp.id){
				let carAll = resp.****;
				listData.carOnline = resp.****;  //赋值车辆
				listData.lineData = resp;	//赋值主信息

				//遍历车辆信息，循环压入节点
				carAll.forEach(item=>{
					carList += `
						<div>
							${item.***}
						</div>
					`
				})
				domCont = `
					<li>
						<span class="title">警情信息</span>  
	            		<div>
	            			编号：${resp.id}<br/>
	            			出动单位：${resp.***}<br/>
	            			主管：${resp.***}<br/>
	            		</div>
					</li>
					<li>
		        		<span class="title">车辆信息</span>  
		        		${carList}
		        	</li>
				`
				dom.innerHTML = domCont;

				//开始显示车辆
				lookCarData();
				//开始显示最优路线
				lineCarData();
				//真实路线
				lineTrueData();
			}
		}
	})
}

//实时获取车辆信息
function startCarData2(){
	let id = document.getElementById('signId').getAttribute('data');
	$.ajax({
			url:"****/"+id,
			type:"get",
			dataType:"json",
			data:{},
			success:function(resp){
				if(resp.id){
					listData.carOnline = resp.****;
					//开始显示车辆
					lookCarData();
					//显示实时路线
					lineTrueData();
				}
			}
		})
}

//显示车辆
function lookCarData(){
	//拿到车辆数据
	let data = listData.carOnline;
	if(data.length>0){
		map.remove(markerAll.carOnline);
		data.forEach(item=>{
			if(!item.lng || !item.lat){return};
			let marker = new AMap.Marker({
				map:map,
				position:[item.lng,item.lat],
				icon:new AMap.Icon({image:'', imageSize:new AMap.size(40,30)}),  //40*30是图标的尺寸大小
				offset: new AMap.Pixel(-20, -15)  //此处应设为图标尺寸的一半
			});
			marker.setLabel({
				offset: new AMap.Pixel(0, -5),  //设置文本标注偏移量
		        content: `<div class="info">${item.***}</div>`, //设置文本标注内容
		        direction: 'top' //设置文本标注方位
			});
			markerAll.carOnline.push(marker);
		})
	}
}

//显示最优路线
function lineCarData(){
	let objData = listData.lineData;
	//初始位置的经纬度
	let startLng = '';  
	let startLat = '';
	//终点位置的经纬度
	let endLng = '';
	let endLat = '';

	driving.search(new AMap.LngLat(startLng,startLat),new AMap.LngLat(endLng,endLat),function(status,result){
		if(status === 'complete'){
			layer.msg('绘制驾车路线完成',{
				icon:1,
				time:1000,
			},function(){})
			
			//此处实现的功能是将拿到的最优路线的时间和长度信息传给后台
			let submitObj = {};
			submitObj.id = objData.id;  //拿到该条数据的id
			//此处是拿到当前最优路线的长度和时间
			submitObj.driviedDistance = result.routes[0].distance;  //单位:米  [距离]
			submitObj.navigationalTime = jsNum(result.routes[0].time);	//单位：分秒	[时长]
			submitObj.averageVelocity = result.routes[0].distance/result.routes[0].time;  //单位:米/s [速度]
			console.log(submitObj)
		}else{
			layer.msg('获取驾车数据失败:',{
				icon:2,
				time:1000,
				//shade : [0.2 , '#000' , true]
			},function(){})
		}
	});
}

//换算时间，**分**秒
function jsNum(){
	//分
	let minute = parseInt(num/60);
	//秒
	let second = num - 60*minute
	let time = minute + '分' + second + '秒';
	return time;
}

//真实路线
function lineTrueData(){
	let data = listData.carOnline;
	if(data.length>0){
		data.forEach(item=>{
			let polylines = [];
			//此处的经纬度集合应是这种格式： [{119.3783,39.7838},{119.3473,39.7765}]
			//item.****  （车辆经纬度集合）
			let luduanData = polylineFormat(item.***);
			var polyline = new AMap.Polyline({
                path: luduanData,
                strokeWeight: 4,
                strokeColor: '#3366FF',
                strokeStyle: "dashed",
                //isOutline: true,
                //borderWeight: 3,
                //outlineColor: '#ffeeff'
                zIndex: 14,
            });
            polylines.push(polyline);
			var overlayGroups = new AMap.OverlayGroup(polylines);
		    map.add(overlayGroups);
		})
	}
}

//格式化
function polylineFormat(data){
	let arrFormat = [];
    for (let i = 0; i < data.length; i++) {
        let arr = [];
        arr.push(data[i].lng)
        arr.push(data[i].lat)
        arrFormat.push(arr)
    }
    return arrFormat
}

以上功能都是自己一点一滴写出来的，有不正确的或者优化的地方欢迎指导！

效果：