openlayer 車輛跟着軌跡移動

1.環境

1.1. openalyer 版本6.3.1

1.2. jquery 版本 3.1.1

2.邏輯描述

2.1 首先根據點位划線。

2.2 坐標點位之間計算距離。

2.4 距離根據一個默認間距計算每個間距下的坐標進行保存。

2.5 創建圖標。

2.6 創建定時器，進行圖標位置設置，這樣就出現一種移動的效果了。

3.效果

 

4.代碼：

//地圖服務

var mapServer;

//移動車輛圖標layer
var carOverLay;

//移動車輛圖標路徑
var carImageUrl = "./js/car.png";
//移動車輛速度
var moveSpeed = 30;//移動速度
//所有移動的坐標
var allMovePoints;
//所有移動的坐標索引
var allMovePointsIndex = 0;

4.1 創建地圖：

/*geoserver配置*/

//地圖默認層級
var gzoom =13;

//地圖可縮最小層級
var gminZoom =1;

//地圖可放大最大層級
var gmaxZoom =16;

//地圖中心點位
var gcenter=[114.025705,22.68988];

//地圖加載瓦片地址
var gispath="http://127.0.0.1:8082/map/{z}/{n}/{x}_{y}.png";

//地圖可拖動邊界
var extentPoint ;

function createMapServer(){

　　

mapServer = new ol.Map({
layers: [Thai],
view: new ol.View({
center:gcenter,
projection: 'EPSG:4326',
zoom: gzoom,
minZoom: gminZoom,
maxZoom: gmaxZoom
//extent:extentPoint
}),
logo : false,
controls : new ol.control.defaults({
zoom : false
// 隱藏縮放按鈕
}),

//地圖放置div層
target: document.getElementById('sitemap')
});

}

4.2: 創建圖標在地圖上

function createCarIcon(x1,y1,x2,y2){

var carDiv = document.createElement('div');
carDiv.id = "car";
var html="";
html+='<div style="float:left;"><img src="'+carImageUrl+'" id="carImage" style="float:left;transform:rotate('+getAngle(x1,y1,x2,y2)+'deg);"/></div>';
carDiv.innerHTML = html;
document.body.appendChild(carDiv);
carOverLay = new ol.Overlay({
position: point,
positioning: 'bottom-center',
offset:[6,-1],
element:document.getElementById('car')

});
mapServer.addOverlay(carOverLay);

}

/**
* 根據坐標獲取角度數，以正上方為0度作為參照
*/
function getAngle(lng_a,lat_a, lng_b, lat_b){

var a = (90 - lat_b) * Math.PI / 180;
var b = (90 - lat_a) * Math.PI / 180;
var AOC_BOC = (lng_b - lng_a) * Math.PI / 180;
var cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
var sinc = Math.sqrt(1 - cosc * cosc);
var sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc;
var A = Math.asin(sinA) * 180 / Math.PI;
var res = 0;
if (lng_b > lng_a && lat_b > lat_a) res = A;
else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A;
else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A;
else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A;
else if (lng_b > lng_a && lat_b == lat_a) res = 90;
else if (lng_b < lng_a && lat_b == lat_a) res = 270;
else if (lng_b == lng_a && lat_b > lat_a) res = 0;
else if (lng_b == lng_a && lat_b < lat_a) res = 180;
console.log(res);
res = res - 88;//減去圖片默認角度
return res;

}

 

4.3 根據坐標點位獲取中間距離

/**
* 計算坐標2點之間的距離
* @param {Array} coordinates 傳入坐標坐標系必須和地圖坐標系一致   {[144,33],[144,37]}
* @return length

*/
function formatLength(pointArray){
var length = 0;
if(mapServer.getView().getProjection().code_ == "EPSG:4326"){
for (var i = 0, ii = pointArray.length - 1; i < ii; ++i) {
var c1 = pointArray[i];
var c2 =pointArray[i+1];

length += ol.sphere.getDistance(c1, c2);
}
}else if(mapServer.getView().getProjection().code_ == "EPSG:3857"){
for (var i = 0, ii = pointArray.length - 1; i < ii; ++i) {
var c1 = pointArray[i];
var c2 =pointArray[i+1];
c1 = ol.proj.transform(c1, 'EPSG:3857', 'EPSG:4326');
c2 = ol.proj.transform(c2, 'EPSG:3857', 'EPSG:4326');
length += ol.sphere.getDistance(c1, c2);
}
}
return length;
}

 

4.4 根據距離，間距計算中間所有點位坐標

/**
* 計算兩點之間的中間點
* @param {Array} pointDoubleArray 二維數組坐標
* @param {num} cell 每個點之間的距離
*/
function getCenterPoint(pointDoubleArray,cell){
cell = cell == undefined ? 5 : cell;
var twolength = formatLength(pointDoubleArray);
var rate = twolength/cell; //比例 默認5m/點
var step = Math.ceil(rate); //步數（向上取整）
var arr = new Array(); //定義存儲中間點數組
var c1 = pointDoubleArray[0];//頭部點
var c2 = pointDoubleArray[1];//尾部點
var x1 = c1.x,y1 = c1.y;
var x2 = c2.x,y2 = c2.y;
for (var i = 1;i<step;i++) { 
var coor = {};
coor.x = (x2-x1)*i/rate+x1;
coor.y = (y2-y1)*i/rate+y1;
arr.push(coor); //此時arr為中間點的坐標
}
arr.push(c2);
return arr;
}

4.5 得到所有點位坐標

/*得到所有要移動的點位*/
function getAllMovePoint(pointArray,cell){
cell = cell ==undefined ? 5 :cell;
var brr = new Array();
brr.push(pointArray[0]); //添加起點
for (i = 0;i < pointArray.length-1; i++) {
var coor1 = pointArray[i];
var coor2 = pointArray[i + 1];
var crr = this.centerPoint([coor1,coor2],cell);
for(var a=0;a<crr.length;a++){
brr.push(crr[a]);
}
}
return brr;

}

4.6 移動軌跡

function showPoint(){
//每次移動，根據兩點坐標，圖標旋轉角度
if(allMovePointsIndex+1 != allMovePoints.length){
firstPoint = allMovePoints[allMovePointsIndex];
secondPoint = allMovePoints[allMovePointsIndex+1];
var transRotate = getAngle(firstPoint.x,firstPoint.y,secondPoint.x,secondPoint.y);
$('#carImage').attr("style","float:left;transform:rotate("+transRotate+"deg)");
carOverLay.setPosition([allMovePoints[allMovePointsIndex].x,allMovePoints[allMovePointsIndex].y]); //設置小車位置
allMovePointsIndex++;
}
}

4.7調用:

function move(pointArray){
//創建汽車初始點位,首先傳2個坐標，為了將圖標按照軌跡路線，進行旋轉，讓車頭與路線對齊
createCarLayer(pointArray[0],pointArray[1]);
//獲取所有點位
allMovePoints = getAllMovePoint(pointArray,5);
//進行移動
setInterval(showPoint, moveSpeed);
}