OpenLayer——模拟运动轨迹
2024-09-08 18:23:21
模拟在人地图上移动，动态绘制行动轨迹的功能，附带一个跟随的气泡弹窗。
<!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>
最新文章
- Hive技术架构
- excel手机号码归属地批量公式查询 vlookup函数
- JS实现有点炫的图片展示效果-图片解体和组合
- top工具
- javaweb笔记之get和post的不同
- maven01 hello maven
- 使用git把本地目录传到远程仓库
- Linux系统下如何运行.sh文件
- 解决：coursera 视频总是缓冲或者无法观看
- java——collection总结
- jq 回车提交指定按钮
- redis常见应用场景
- sort-选择排序
- Qt应用程序单实例化
- 常见异常代码oracle
- Qt ------ UDP发送不了或接收不到问题
- 使用JdbcTemplate访问数据库
- 将Windows上的Oracle迁移至Linux
- 利用Fidder工具抓取App数据包
- Android编程实用代码合集