<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="ol/ol.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ol/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="layer/layer.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
<button id="btn" type="button">click</button>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [12950000, 4860000],
zoom: 7
})
});
/**
* 维护航迹点样式
**/
function getPointStyles(rotation) {
return new ol.style.Style({
image: new ol.style.Icon({
rotation: rotation || 0,
opacity: 1,
size: [48, 48],
src: "img/lbxx-32x32.png" //图片路径
}),
text: new ol.style.Text({
text: 'aaaa',
font: "normal 14px Helvetica",
textAlign: "center",
offsetY: -30,
fill: new ol.style.Fill({color: '#F0F'}),
backgroundFill: new ol.style.Fill({color: "#000"}),
backgroundStroke: new ol.style.Stroke({color: "#000", width: 6}),
padding: [2, 4, 2, 4]
})
});
}
/**
* 维护航线样式
**/
function getLineStyle() {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000',
width: 4
})
});
}
/**
* 内部维护一个数组，包含航线的所有点
*/
function LineArray(p) {
//航线点
let arr = [p];
//增加一个点时候的事件（调整icon的旋转角，刷新地图等等）
let onPush;
return {
push: function (point) {
//增加一个轨迹点，并且触发事件
var last = arr[arr.length - 1];
if (point[0] === last[0] && point[1] === last[1]) {
console.log('节点未发生变化：' + last + ' -> ' + point);
} else {
arr.push(point);
onPush(last, point);
}
},
addPushListener: function (fun) {
onPush = fun;
},
getArray: function () {
return arr;
}
}
}
/**
* 旋转角计算
*/
function getRotation(aLon, aLat, bLon, bLat) {
var kRadius = 6378137;
var bx = (bLon * Math.PI / 180 - aLon * Math.PI / 180) * (kRadius * Math.cos(aLat * Math.PI / 180));
var by = (bLat * Math.PI / 180 - aLat * Math.PI / 180) * kRadius;
var angle = 0;
angle = Math.atan2(bx, by) * 180.0 / Math.PI;
return 3.14 / 180 * angle;
}
/**
* 内部维护地图相关的操作
*/
function AirlineBlock(p) {
let line = new LineArray(p);
//图层容器
let layerVector = new ol.layer.Vector({
source: new ol.source.Vector()
});
map.addLayer(layerVector);
//航线
let lineFeature = new ol.Feature({
geometry: new ol.geom.LineString([p, p])
});
lineFeature.setStyle(getLineStyle());
layerVector.getSource().addFeature(lineFeature);
//飞机图标
let pointFeature = new ol.Feature({
geometry: new ol.geom.Point(p)
});
pointFeature.setStyle(getPointStyles());
layerVector.getSource().addFeature(pointFeature);
//添加1个点的事件侦听
line.addPushListener(function (prePoint, point) {
//点的位置变化和旋转角的调整
var rotation = getRotation(prePoint[0], prePoint[1], point[0], point[1]);
pointFeature.setGeometry(new ol.geom.Point(point));
pointFeature.setStyle(getPointStyles(rotation));
console.log(line.getArray());
//航线的变化
lineFeature.setGeometry(new ol.geom.LineString(line.getArray()));
});
return {
push: line.push,
destroy: function () {
map.removeLayer(layerVector)
}
}
}
var airLineBlock = new AirlineBlock([12950000, 4860000]);
var testArr = [
[12950000, 4190000], [12950000, 4460000], [12850000, 4960000]
, [12850000, 4170000], [12850000, 4280000], [12850000, 4290000]
, [12850000, 4360000], [12850000, 4360000], [12850000, 4900000]];
/**
* 设置一个点击事件，每次从testArr中随机取数，作为下次的轨迹点
*/
$('#btn').click(function () {
var time = new Date().getTime();
var i = time % testArr.length - 1;
var point = new Array(2);
point[0] = testArr[i][0] + time % 100000;
point[1] = testArr[i][1] + time % 10000;
airLineBlock.push(point);
})
console.log(ol.proj.fromLonLat([12950000, 4190000], 'EPSG:4326'))
</script>
</body>
</html>
标签：function,ol,OpenLayer,point,Math,var,new,模拟 From： https://www.cnblogs.com/chenss15060100790/p/16937350.html