高德地图实现固定区域显示、车辆最优路线,地图缩放限制、车辆实时位置查询,实际真实路径回描
//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
}
以上功能都是自己一点一滴写出来的,有不正确的或者优化的地方欢迎指导!
效果: