Skip to content

Commit 16b1ed5

Browse files
author
caoxinke
committed
添加Leaflet ES航班监控的例子。
1 parent 80629df commit 16b1ed5

File tree

4 files changed

+104
-75
lines changed

4 files changed

+104
-75
lines changed

‎examples/leaflet/ESHeatMap.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>时序热力/格网图</title>
5+
<title>热力/格网图</title>
66
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
77
<link rel="stylesheet"
88
href="http://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
@@ -356,7 +356,9 @@
356356
zoom: 4,
357357
crs: L.CRS.EPSG3857
358358
});
359-
var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
359+
var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a> with ' +
360+
'<a href="http://iclient.supermapol.com">SuperMap iClient</a> ' +
361+
'with <a href="https://www.elastic.co/products/elasticsearch">ElasticSearch</a>',
360362
token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
361363
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;
362364

examples/leaflet/timeFlow.html renamed to examples/leaflet/PlanesMonitor.html

Lines changed: 87 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>航班监测-Elasticsearch服务示例</title>
5+
<title>航班监控</title>
66
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
7-
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
7+
<link rel="stylesheet"
8+
href="http://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
89
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
910
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
1011
<style>
@@ -26,7 +27,8 @@
2627
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
2728
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2829
<script type="text/javascript" src="http://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
29-
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
30+
<script type="text/javascript"
31+
src="http://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
3032
<script type="text/javascript" src="http://cdn.bootcss.com/moment.js/2.18.1/locale/zh-cn.js"></script>
3133
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
3234
<script type="text/javascript" src="http://mapv.baidu.com/build/mapv.js"></script>
@@ -37,17 +39,17 @@
3739
<script type="text/javascript">
3840
var map;
3941
var timeControl,
40-
liveESService,//实时点查询的ESService
41-
trackESService,//历史轨迹查询的ESService
42-
liveRenderer,//实时点层
43-
trackRenderer,//历史轨迹层
44-
liveDataSet,//渲染用实时点数据集
45-
trackDataSet,//渲染用历史轨迹线数据集
46-
planeStyles,
47-
planeLabels,//航班信息提示框集合
48-
geoFenceLabels,//地理围栏信息提示框集合
49-
geoFenceLayer,
50-
dataUrl = "192.168.13.192:9200";
42+
liveESService,//实时点查询的ESService
43+
trackESService,//历史轨迹查询的ESService
44+
liveRenderer,//实时点层
45+
trackRenderer,//历史轨迹层
46+
liveDataSet,//渲染用实时点数据集
47+
trackDataSet,//渲染用历史轨迹线数据集
48+
planeStyles,
49+
planeLabels,//航班信息提示框集合
50+
geoFenceLabels,//地理围栏信息提示框集合
51+
geoFenceLayer,
52+
dataUrl = "http://117.122.248.69:9200";
5153

5254
var flightIdens = [
5355
'CCA4189', 'CCA4187', 'CBJ5531', 'CSC8747', 'TBA9879',
@@ -62,10 +64,12 @@
6264
initMap();
6365
liveESService = new SuperMap.ElasticSearchService(dataUrl, {
6466
change: renderLive,
65-
outOfGeoFence: renderOutOfGeoFenceLabel
67+
outOfGeoFence: renderOutOfGeoFenceLabel,
68+
openGeoFence: true
6669
});
6770
trackESService = new SuperMap.ElasticSearchService(dataUrl, {
68-
change: renderTrack
71+
change: renderTrack,
72+
openGeoFence: true
6973
});
7074
planeStyles = initPlaneStyles();
7175
}
@@ -101,55 +105,64 @@
101105
loadTrackData();
102106
}
103107

104-
var datetime = moment(currentTime).format("YYYY-MM-DD HH:mm:ss");
108+
var datetime = moment(currentTime).format("YYYY-MM-DDTHH:mm:ss") + "Z";
105109
var options = getServiceParamOptions();
106110
var liveParameters = [];
107111
for (var i = 0; i < options.flightIds.length; i++) {
108112
var code = options.flightIds[i];
109113
if (code === 'ZUUU') {
110114
continue;
111115
}
112-
var sParam = new SuperMap.MatchParameter('ident', code);
113-
var filterParam = new SuperMap.MatchParameter('datetime', datetime);
114-
var params = new SuperMap.ElasticSearchParameter({
115-
index: "aliveflight",
116-
type: "flight",
117-
sort: {datetime: {order: "ASC"}},
118-
must: sParam,
119-
filter: filterParam
116+
liveParameters.push({index: "flights", type: "flight_utc"});
117+
liveParameters.push({
118+
"query": {
119+
"bool": {
120+
"must": {"match": {"ident": code}},
121+
"filter": {"match": {"datetime": datetime}},
122+
}
123+
},
124+
"sort": {"time-ms": {"order": "ASC"}},
125+
"from": 0,
126+
"size": 20
120127
});
121-
liveParameters.push(params);
122128
}
123-
liveESService.msearch(liveParameters);
129+
liveESService.msearch({body: liveParameters});
124130
updateProgress(datetime);
125131
}
126132

127133
//第一次请求先查询历史轨迹数据，只调用一次
128134
function loadTrackData() {
129135
var start = timeControl.getStartTime();
130136
var end = timeControl.getEndTime();
131-
var startTime = moment(start).format("YYYY-MM-DD HH:mm:ss");
132-
var endTime = moment(end).format("YYYY-MM-DD HH:mm:ss");
133137
var options = getServiceParamOptions();
134138
var trackParameters = [];
135139
for (var i = 0; i < options.flightIds.length; i++) {
136140
var code = options.flightIds[i];
137141
if (code === 'ZUUU') {
138142
continue;
139143
}
140-
var sParam = new SuperMap.MatchParameter('ident', code);
141-
var filterParam = new SuperMap.RangeParameter("datetime", null, startTime, null, endTime);
142-
var params = new SuperMap.ElasticSearchParameter({
143-
index: "aliveflight",
144-
type: "flight",
145-
sort: {datetime: {order: "ASC"}},
146-
size: 10000,
147-
must: sParam,
148-
filter: filterParam
144+
trackParameters.push({index: "flights", type: "flight_utc"});
145+
trackParameters.push({
146+
"query": {
147+
"bool": {
148+
"must": {"match": {"ident": code}},
149+
"filter": {
150+
"range": {
151+
"time-ms": {
152+
"gte": start,
153+
"lte": end
154+
}
155+
}
156+
},
157+
}
158+
},
159+
"sort": {"time-ms": {"order": "ASC"}},
160+
"from": 0,
161+
"size": 10000
149162
});
150-
trackParameters.push(params);
163+
151164
}
152-
trackESService.msearch(trackParameters);
165+
trackESService.msearch({body: trackParameters});
153166
}
154167

155168

@@ -264,9 +277,9 @@
264277
var content = data[i].content;
265278
var latlng = L.latLng(content.y, content.x);
266279
var labelContent = "航班： " + content.ident + "<br>" +
267-
"始发地： " + content.origin + "/" + content.originLabel + "<br>" +
268-
"目的地： " + content.destination + "/" + content.destinationLabel + "<br>" +
269-
"时间： " + content.datetime;
280+
"始发地： " + content.origin + "/" + content.originLabel + "<br>" +
281+
"目的地： " + content.destination + "/" + content.destinationLabel + "<br>" +
282+
"时间： " + content.datetime;
270283
if (!planeLabels[content.ident]) {
271284
planeLabels[content.ident] = L.popup({
272285
closeOnClick: false,
@@ -385,8 +398,10 @@
385398

386399
//默认设置参数
387400
function getDefaultControlOptions() {
388-
var start = "2017-05-03 10:22:31";
389-
var end = "2017-05-03 17:00:00";
401+
var startMs = 1498781767725;
402+
var endMs = 1498935332876;
403+
var start = moment(startMs).format("YYYY-MM-DDTHH:mm:ss") + "Z";
404+
var end = moment(endMs).format("YYYY-MM-DDTHH:mm:ss") + "Z";
390405
return {
391406
startTime: start,
392407
endTime: end,
@@ -404,9 +419,11 @@
404419
zoom: 5,
405420
crs: L.CRS.EPSG3857
406421
});
407-
var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
408-
token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
409-
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;
422+
var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a> with ' +
423+
'<a href="http://iclient.supermapol.com">SuperMap iClient</a> ' +
424+
'with <a href="https://www.elastic.co/products/elasticsearch">ElasticSearch</a>',
425+
token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
426+
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;
410427

411428
L.tileLayer(mbUrl, {id: 'mapbox.dark', attribution: mbAttr}).addTo(map);
412429
}
@@ -423,18 +440,18 @@
423440
me._div = L.DomUtil.create('div', 'panel panel-primary controlPane');
424441
me._div.style.width = "300px";
425442
var titleDiv = $("<div class='panel-heading text-center' id='toggle' style='cursor: pointer'>" +
426-
"<span class='panel-title text-center'>控制台</span>&nbsp;" +
427-
"<span class='glyphicon glyphicon-triangle-top' id='toggleIcon' ></span></div>").appendTo(me._div);
443+
"<span class='panel-title text-center'>控制台</span>&nbsp;" +
444+
"<span class='glyphicon glyphicon-triangle-top' id='toggleIcon' ></span></div>").appendTo(me._div);
428445

429446
var contentDiv = $("<div class='panel-body content center-block' style='font-size: 14px'></div>").appendTo(me._div);
430447

431448
var optionsDiv = $("<div class='' id='options'></div>").appendTo(contentDiv);
432449

433450
$("<div class='form-group'><label class='text-right' for='flightIds' >" +
434-
"航班号<span style='color:red'>*</span></label>" +
435-
"<select class='selectpicker ' id='flightIds' multiple data-actions-box='true' title='请选择'>" +
436-
initSelectOpitons() +
437-
"</select></div><hr/>").appendTo(optionsDiv);
451+
"航班号<span style='color:red'>*</span></label>" +
452+
"<select class='selectpicker ' id='flightIds' multiple data-actions-box='true' title='请选择'>" +
453+
initSelectOpitons() +
454+
"</select></div><hr/>").appendTo(optionsDiv);
438455

439456
function initSelectOpitons() {
440457
var str = '';
@@ -452,34 +469,34 @@
452469
var defaultOption = getDefaultControlOptions();
453470
var defaultGeoFence = getDefaultGeoFence();
454471
$("<div class='form-group form-inline'><label class='text-right' for='geoFence' >地理围栏</label>" +
455-
"<input id='geoFence' type='text' class='form-control input-sm' placeholder='" + JSON.stringify(defaultGeoFence) +
456-
"' value='" + JSON.stringify(defaultGeoFence) + "'/></div></div><hr/>").appendTo(optionsDiv);
472+
"<input id='geoFence' type='text' class='form-control input-sm' placeholder='" + JSON.stringify(defaultGeoFence) +
473+
"' value='" + JSON.stringify(defaultGeoFence) + "'/></div></div><hr/>").appendTo(optionsDiv);
457474

458475
$("<div class='form-group form-inline'><label class='text-right' for='startTime' >起始时间<span style='color:red'>*</span></label>" +
459-
"<input id='startTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.startTime +
460-
"' value='" + defaultOption.startTime + "'/></div></div>").appendTo(optionsDiv);
476+
"<input id='startTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.startTime +
477+
"' value='" + defaultOption.startTime + "'/></div></div>").appendTo(optionsDiv);
461478

462479
$("<div class='form-group form-inline'><label class='text-right' for='endTime' >终止时间<span style='color:red'>*</span></label>" +
463-
"<input id='endTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.endTime +
464-
"' value='" + defaultOption.endTime + "'/></div></div>").appendTo(optionsDiv);
480+
"<input id='endTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.endTime +
481+
"' value='" + defaultOption.endTime + "'/></div></div>").appendTo(optionsDiv);
465482

466483
$("<div class='form-group form-inline'><label class='text-right' for='speed' >刷新步长(ms)</label>" +
467-
"<input id='speed' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.speed +
468-
"' value='" + defaultOption.speed + "'/></div></div>").appendTo(optionsDiv);
484+
"<input id='speed' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.speed +
485+
"' value='" + defaultOption.speed + "'/></div></div>").appendTo(optionsDiv);
469486

470487
$("<div class='form-group form-inline'><label class='text-right' for='frequency' >刷新频率(ms)</label>" +
471-
"<input id='frequency' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.frequency +
472-
"' value='" + defaultOption.frequency + "'/></div></div>").appendTo(optionsDiv);
488+
"<input id='frequency' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.frequency +
489+
"' value='" + defaultOption.frequency + "'/></div></div>").appendTo(optionsDiv);
473490

474491
var progressDiv = $("<div class='form-group'><div class='form-horizontal text-center'><div class='form-group'>" +
475-
"<label for='progress'>当前时间：</label><span class='form-control-static' id='progress'>未开始</span>" +
476-
"</div></div></div>").appendTo(contentDiv);
492+
"<label for='progress'>当前时间：</label><span class='form-control-static' id='progress'>未开始</span>" +
493+
"</div></div></div>").appendTo(contentDiv);
477494

478495
var controlDiv = $("<section><div class='form-inline text-center'>" +
479-
"<input id='start' type='button' class='btn btn-default text-center' value='开始'/>&nbsp;" +
480-
"<input id='pause' type='button' class='btn btn-default text-center' value='暂停'/>&nbsp;" +
481-
"<input id='stop' type='button' class='btn btn-default text-center' value='停止'/>" +
482-
"</div></section>").appendTo(contentDiv);
496+
"<input id='start' type='button' class='btn btn-default text-center' value='开始'/>&nbsp;" +
497+
"<input id='pause' type='button' class='btn btn-default text-center' value='暂停'/>&nbsp;" +
498+
"<input id='stop' type='button' class='btn btn-default text-center' value='停止'/>" +
499+
"</div></section>").appendTo(contentDiv);
483500

484501

485502
me._div.addEventListener('mouseover', function () {

‎examples/leaflet/config.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -289,13 +289,21 @@ var exampleConfig = {
289289
},
290290
"iManager": {
291291
name: "iManager",
292+
content: null
293+
},
294+
"ElasticSearch": {
295+
name: "ElasticSearch",
292296
content: {
293-
"elastic_search": {
294-
name: "ElasticSearch",
297+
"": {
298+
name: "可视化",
295299
content: [{
296-
name: "时序热力/格网图",
300+
name: "热力/格网图",
297301
thumbnail: "l_ESHeatMap.png",
298302
fileName: "ESHeatMap"
303+
}, {
304+
name: "航班监控",
305+
thumbnail: "l_PlanesMonitor.png",
306+
fileName: "PlanesMonitor"
299307
}]
300308
}
301309
}
@@ -597,6 +605,7 @@ var sideBarIconConfig = {
597605
"iPortal": "fa-desktop",
598606
"Online": "fa-cloud",
599607
"iManager": "fa-group",
608+
"ElasticSearch": "fa-tasks",
600609
"plot": "fa-edit",
601610
"viz": "fa-map",
602611
"OGC": "fa-globe",
@@ -613,6 +622,7 @@ var exampleIconConfig = {
613622
"iPortal": "fa-desktop",
614623
"Online": "fa-cloud",
615624
"iManager": "fa-group",
625+
"ElasticSearch": "fa-tasks",
616626
"plot": "fa-edit",
617627
"viz": "fa-map",
618628
"OGC": "fa-globe",

‎examples/leaflet/img/l_PlanesMonitor.png‎

34.2 KB
Loading

0 commit comments

Comments
 (0)