openlayers，openlayers小車_openlayer 車輛跟著軌跡移動

1.環境

1.1. openalyer 版本6.3.1

1.2. jquery 版本?3.1.1

2.邏輯描述

2.1 首先根據點位劃線。

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

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

2.5 創建圖標。

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

3.效果

4.代碼：

openlayer4、//地圖服務

var mapServer;

//移動車輛圖標layer

var carOverLay;

//移動車輛圖標路徑

var carImageUrl = "./js/car.png";

openlayer3、//移動車輛速度

var moveSpeed = 30;//移動速度

//所有移動的坐標

var allMovePoints;

//所有移動的坐標索引

var allMovePointsIndex = 0;

openlayer一個層。4.1 創建地圖：

/*geoserver配置*/

//地圖默認層級

var gzoom =13;

//地圖可縮最小層級

var gminZoom =1;

layer.open、//地圖可放大最大層級

var gmaxZoom =16;

//地圖中心點位

var gcenter=[114.025705,22.68988];

//地圖加載瓦片地址

var gispath="http://127.0.0.1:8082/map/{z}/{n}/{x}_{y}.png";

layer.open參數。//地圖可拖動邊界

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

// 隱藏縮放按鈕

}),

canvas動態繪制軌跡、//地圖放置div層

target: document.getElementById('sitemap')

});

}

4.2: 創建圖標在地圖上

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

導軌式移動小車，var carDiv = document.createElement('div');

carDiv.id = "car";

var html="";

html+='

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);

car gps shield，}

/**

* 根據坐標獲取角度數，以正上方為0度作為參照

*/

function getAngle(lng_a,lat_a, lng_b, lat_b){

var a = (90 - lat_b) * Math.PI / 180;

openlayers離線地圖，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

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

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);

}