个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
24
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章openlayers 3实现车辆轨迹回放由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本文实例为大家分享了openlayers 3实现车辆轨迹回放的具体代码，供大家参考，具体内容如下 。
先上效果:
利用 openlayers 3地图的 postcompose 事件监听地图的重绘 。
注意：此代码是我在Vue 的methods 里面写的测试方法，并不能直接运行，请在理解的基础上测试。 vm 为vue的this对象 注释已经很丰富了，先做个备份，后期会编辑加入一点详解.
实现代码:
html:
|
1
2
3
4
5
6
7
8
9
10
|
<
div
id
=
"menu"
>
<
label
for
=
"speed"
style
=
"font-weight: bold;"
>
运动速度:
<
input
id
=
"speed"
type
=
"range"
min
=
"1"
max
=
"20"
step
=
"1"
value
=
"10"
/>
</
label
>
<
button
id
=
"start-animation"
>
开始运动
</
button
>
</
div
>
<!-- 注：此代码仅为上面速度条和按钮--
|
核心代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
|
startMove:
function
() {
var
vm=
this
;
var
map=vm.map;
vm.clearOverlayers(
"beijing_sq"
);
//中间站
var
stops=[
[12909554.6597,4933234.84552],
//14
[12909824.6852,4931594.7854],
//43
[12910026.8837,4930523.89946],
//63
[12910870.563,4929357.26511]
//85
];
var
stopMakers =
new
Array();
for
(
var
i=0;i<4;i++){
var
s =
new
ol.Feature({
type:
'stop'
,
geometry:
new
ol.geom.Point(stops[i])
});
stopMakers.push(s);
}
var
Coordinates=vm.path;
//将离散点构建成一条折线
var
route =
new
ol.geom.LineString(Coordinates);
//获取直线的坐标
var
routeCoords = route.getCoordinates();
var
routeLength = routeCoords.length;
var
routeFeature =
new
ol.Feature({
type:
'route'
,
geometry: route
});
var
geoMarker =
new
ol.Feature({
type:
'geoMarker'
,
geometry:
new
ol.geom.Point(routeCoords[0])
});
var
startMarker =
new
ol.Feature({
type:
'icon'
,
geometry:
new
ol.geom.Point(routeCoords[0])
});
var
endMarker =
new
ol.Feature({
type:
'icon'
,
geometry:
new
ol.geom.Point(routeCoords[routeLength - 1])
});
var
styles = {
'route'
:
new
ol.style.Style({
stroke:
new
ol.style.Stroke({
width: 6,
color:
'#F2C841'
}),
fill:
new
ol.style.Fill({
color:
"#F6E3A3"
})
}),
/*'icon': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: require()
})
}),*/
'geoMarker'
:
new
ol.style.Style({
/*image: new ol.style.Circle({
radius: 7,
snapToPixel: false,
fill: new ol.style.Fill({ color: 'black' }),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})*/
image:
new
ol.style.Icon({
src: require(
'../../assets/map/left_red_car.png'
),
rotateWithView:
false
,
rotation: -Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]),
scale:0.3,
})
}),
'stop'
:
new
ol.style.Style({
image:
new
ol.style.Circle({
radius:10,
snapToPixel:
false
,
fill:
new
ol.style.Fill({ color:
'red'
}),
stroke:
new
ol.style.Stroke({
color:
'white'
,
width:2
})
})
})
};
var
animating =
false
;
var
speed, now;
var
speedInput = document.getElementById(
'speed'
);
var
startButton = document.getElementById(
'start-animation'
);
var
vectorLayer =
new
ol.layer.Vector({
id:
'carLayer'
,
source:
new
ol.source.Vector({
features: [routeFeature, geoMarker, startMarker, endMarker,stopMakers[0],stopMakers[1],stopMakers[2],stopMakers[3]]
}),
style:
function
(feature) {
//如果动画是激活的就隐藏geoMarker
if
(animating && feature.get(
'type'
) ===
'geoMarker'
) {
return
null
;
}
return
styles[feature.get(
'type'
)];
}
});
//var center = ol.proj.fromLonLat([115.981,40.451]);
map.addLayer(vectorLayer);
// 要素移动
var
moveFeature =
function
(event) {
var
vectorContext = event.vectorContext;
//HTML5 Canvas context，ol.render.canvas.Immediate的对象
var
frameState = event.frameState;
//freme 的状态
if
(animating) {
var
elapsedTime = frameState.time - now;
//elapsedTime 已过时间
//通过增加速度，来获得lineString坐标
var
index = Math.round(speed * elapsedTime / 1000);
//已经走了多少个点
//console.log("#########",routeCoords[index]);
if
(index >= routeLength) {
stopAnimation(
true
);
return
;
}
//fixme ---------------
if
( index < 14){
flashFeature(0);
}
if
( index == 14){
changeStyle(0, 1);
}
if
(index > 14 && index <43){
flashFeature(1);
}
if
(index == 43){
changeStyle(1, 2);
}
if
(index > 43 && index <63){
flashFeature(2);
}
if
(index == 63){
changeStyle(2, 3);
}
if
(index > 63 && index <85){
flashFeature(3);
}
if
(index == 85){
changeStyle(3, 3);
}
//fixme--------------------
var
dx,dy,rotation,carStyle;
if
(routeCoords[index] && routeCoords[index+1]){
dx=routeCoords[index][0]-routeCoords[index+1][0];
dy=routeCoords[index][1]-routeCoords[index+1][1];
rotation = Math.atan2(dy,dx);
//console.log("***********",rotation);
carStyle=
new
ol.style.Style({
image:
new
ol.style.Icon({
src: require(
'../../assets/map/left_red_car.png'
),
rotateWithView:
false
,
rotation: -rotation,
scale:0.3,
})
});
var
currentPoint =
new
ol.geom.Point(routeCoords[index]);
//当前点
var
feature =
new
ol.Feature(currentPoint);
//Render a feature into the canvas.
// Note that any zIndex on the provided style will be ignored - features are rendered immediately in the order that this method is called.
// If you need zIndex support, you should be using an ol.layer.Vector instead
vectorContext.drawFeature(feature, carStyle);
}
}
//继续动画效果
map.render();
};
function
changeStyle(previous,next) {
//console.log(stopMakers[previous]);
stopMakers[previous].setStyle(
new
ol.style.Style({
image:
new
ol.style.Circle({
radius: 10,
snapToPixel:
false
,
fill:
new
ol.style.Fill({color:
'green'
}),
stroke:
new
ol.style.Stroke({
color:
'white'
,
width: 2
})
})
}));
}
var
colors=[
'red'
,
'green'
];
var
colorIndex=0;
function
flashFeature(index) {
var
color;
colorIndex++;
colorIndex=colorIndex % 30;
if
(colorIndex < 15){
color=colors[0];
}
else
{
color = colors[1];
}
stopMakers[index].setStyle(
new
ol.style.Style({
image:
new
ol.style.Circle({
radius: 10,
snapToPixel:
false
,
fill:
new
ol.style.Fill({
color: color
}),
stroke:
new
ol.style.Stroke({
color:
'white'
,
width: 2
})
})
}));
}
function
startAnimation() {
if
(animating) {
stopAnimation(
false
);
}
else
{
animating =
true
;
now =
new
Date().getTime();
/** 开始时的时间*/
speed = speedInput.value;
startButton.textContent =
'结束运动'
;
//隐藏geoMarker
geoMarker.setStyle(
null
);
//设置显示范围
//map.getView().setCenter(center);
map.on(
'postcompose'
, moveFeature);
/** postcompose事件-- 地图渲染时都会触发 */
map.render();
}
}
/**
* @param {boolean}结束动画
*/
function
stopAnimation(ended) {
animating =
false
;
startButton.textContent =
'开始运动'
;
//如果动画取消就开始动画
var
coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
/** @type {ol.geom.Point} */
(geoMarker.getGeometry()).setCoordinates(coord);
//移除监听
map.un(
'postcompose'
, moveFeature);
/** 解除postcompose 事件 */
}
startButton.addEventListener(
'click'
, startAnimation,
false
);
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.
原文链接：https://blog.csdn.net/sinat_25295611/article/details/79154182 。
最后此篇关于openlayers 3实现车辆轨迹回放的文章就讲到这里了,如果你想了解更多关于openlayers 3实现车辆轨迹回放的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
24
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！