Skip to content

Commit 69ad719

Browse files
tangqinGisertangqinGiser
committed
新增 lefleat echarts 车辆模型监控示例。review by zhurongchang.
1 parent 5fdf54a commit 69ad719

File tree

4 files changed

+132
-17
lines changed

4 files changed

+132
-17
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,8 @@
314314
- 新增 “2018年2月北京房价信息” 示例
315315

316316
- 新增 增量高性能图层示例，包括 “北京道路网络图” 、“纽约出租车上车点分布图”、“全国铁路网络图” 、“全国水系图” 以及 “全国道路网络图”
317+
318+
- 新增 “车辆模型监控” 示例
317319

318320
- 可视化 - MapV
319321

‎examples/leaflet/config.js‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -415,12 +415,12 @@ var exampleConfig = {
415415
thumbnail: "dataflow.gif",
416416
fileName: "dataFlowService"
417417
},
418-
{
419-
name: "实时数据(1w图标)",
420-
name_en: "data flow(1w markers)",
421-
thumbnail: "dataflow_mapv.gif",
422-
fileName: "dataFlowService_mapv"
423-
}]
418+
{
419+
name: "实时数据(1w图标)",
420+
name_en: "data flow(1w markers)",
421+
thumbnail: "dataflow_mapv.gif",
422+
fileName: "dataFlowService_mapv"
423+
}]
424424
},
425425
"security": {
426426
name: "安全",
@@ -473,7 +473,7 @@ var exampleConfig = {
473473
"Online": {
474474
name: "Online",
475475
name_en: "Online",
476-
localIgnore:true,
476+
localIgnore: true,
477477
content: {
478478
"ol_map": {
479479
name: "地图",
@@ -500,7 +500,7 @@ var exampleConfig = {
500500
"iManager": {
501501
name: "iManager",
502502
name_en: "iManager",
503-
localIgnore:true,
503+
localIgnore: true,
504504
content: {
505505
"im_node": {
506506
name: "节点",
@@ -517,7 +517,7 @@ var exampleConfig = {
517517
"Elasticsearch": {
518518
name: "Elasticsearch",
519519
name_en: "Elasticsearch",
520-
localIgnore:true,
520+
localIgnore: true,
521521
content: {
522522
"es_viz": {
523523
name: "可视化",
@@ -688,39 +688,44 @@ var exampleConfig = {
688688
}, {
689689
name: "2018年2月北京房价",
690690
name_en: "Beijing house prices of Lianjia(2018.2)",
691-
localIgnore:true,
691+
localIgnore: true,
692692
thumbnail: "l_echartsLianjiaGridLayer.png",
693693
fileName: "echartsGridMapLayer"
694694
}, {
695695
name: "北京道路网络图（130万点数据绘制）",
696696
name_en: "Use lines to draw 1.3 millions Beijing streets",
697-
localIgnore:true,
697+
localIgnore: true,
698698
thumbnail: "l_echartsLinesMillionsBeijingRoads.png",
699699
fileName: "echarts_linesDrawMillionsBeijingRoadsNetwork"
700700
}, {
701701
name: "纽约出租车上车点分布图（140万点数据绘制）",
702702
name_en: "Use scatter to draw 1.4 millions New York Taxi Points",
703-
localIgnore:true,
703+
localIgnore: true,
704704
thumbnail: "l_echartScatterMillionsNewYorkTaxi.png",
705705
fileName: "echarts_scatterDrawMillionsNewYorkTaxiPoints"
706706
}, {
707707
name: "全国铁路网络图（400万点数据绘制）",
708708
name_en: "Use lines to draw 4 millions Chinese railways",
709-
localIgnore:true,
709+
localIgnore: true,
710710
thumbnail: "l_echartsLinesMillionsRailway.png",
711711
fileName: "echarts_linesDrawMillionsRailwaysNetwork"
712712
}, {
713713
name: "全国水系图（1400万点数据绘制）",
714714
name_en: "Use lines to draw 14 millions Chinese water system",
715-
localIgnore:true,
715+
localIgnore: true,
716716
thumbnail: "l_echartsLinesMillionsWaterSystem.png",
717717
fileName: "echarts_linesDrawMillionsWaterSystem"
718718
}, {
719719
name: "全国道路网络图（2500万点数据绘制）",
720720
name_en: "Use lines to draw 25 millions Chinese roads",
721-
localIgnore:true,
721+
localIgnore: true,
722722
thumbnail: "l_echartsLinesMillionsRoads.png",
723723
fileName: "echarts_linesDrawMillionsRoadsNetwork_50WFeatures"
724+
}, {
725+
name: "车辆模型监控",
726+
name_en: "Car Animation",
727+
thumbnail: "l_echartsAnimatorCar.png",
728+
fileName: "echartsAnimatorCar"
724729
}
725730
]
726731

@@ -786,7 +791,7 @@ var exampleConfig = {
786791
}, {
787792
name: "2018年2月北京房价",
788793
name_en: "Beijing house prices(2018.2)",
789-
localIgnore:true,
794+
localIgnore: true,
790795
thumbnail: "l_mapvLianjia.png",
791796
fileName: "mapvLianjiaData"
792797
}]
@@ -1038,7 +1043,7 @@ var exampleConfig = {
10381043
"mapping": {
10391044
name: "互联网地图",
10401045
name_en: "Internet map",
1041-
localIgnore:true,
1046+
localIgnore: true,
10421047
content: {
10431048
"Baidu": {
10441049
name: "百度地图",

‎examples/leaflet/echartsAnimatorCar.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title data-i18n="resources.title_animatorCar"></title>
6+
<script type="text/javascript" src="../js/include-web.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
11+
<script type="text/javascript">
12+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
13+
var map, url = host + "/iserver/services/map-changchun/rest/maps/长春市区图";
14+
map = L.map('map', {
15+
crs: L.CRS.NonEarthCRS({
16+
bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
17+
origin: L.point(48.4, -55.58)
18+
}),
19+
center: [-3900, 4700],
20+
maxZoom: 18,
21+
zoom: 3
22+
});
23+
L.supermap.tiledMapLayer(url).addTo(map);
24+
25+
queryData();
26+
27+
function queryData() {
28+
var param = new SuperMap.QueryBySQLParameters({
29+
queryParams: {
30+
name: "BusLine@Changchun#1",
31+
attributeFilter: "SmID > 0"
32+
}
33+
});
34+
L.supermap
35+
.queryService(url)
36+
.queryBySQL(param, function (serviceResult) {
37+
addlayers(processData(serviceResult.result.recordsets[0].features.features));
38+
});
39+
40+
function processData(features) {
41+
var busLines = [].concat.apply([], features.map(function (busLine) {
42+
var points = busLine.geometry.coordinates;
43+
return {
44+
coords: points,
45+
effect: {
46+
constantSpeed: 60,
47+
show: true,
48+
trailLength: 0,
49+
symbolSize: 30,
50+
symbol: function () {
51+
if ((Math.round(Math.random() * 2) % 2)) {
52+
return 'image://../classic/images/blueCar.png'
53+
} else {
54+
return 'image://../classic/images/redCar.png'
55+
}
56+
}()
57+
},
58+
};
59+
}));
60+
return busLines;
61+
}
62+
}
63+
64+
function addlayers(busLines) {
65+
var option = {
66+
series: [
67+
{
68+
type: 'lines',
69+
coordinateSystem: 'leaflet',
70+
polyline: true,
71+
data: busLines,
72+
silent: true,
73+
lineStyle: {
74+
normal: {
75+
opacity: 0.2,
76+
width: 2,
77+
color: '#000'
78+
}
79+
},
80+
progressiveThreshold: 500,
81+
progressive: 200,
82+
zlevel: 2
83+
},
84+
{
85+
type: 'lines',
86+
coordinateSystem: 'leaflet',
87+
polyline: true,
88+
data: busLines,
89+
lineStyle: {
90+
normal: {
91+
width: 0
92+
}
93+
},
94+
effect: {
95+
constantSpeed: 60,
96+
show: true,
97+
trailLength: 0,
98+
symbolSize: 30,
99+
},
100+
zlevel: 1
101+
}]
102+
};
103+
L.supermap.echartsLayer(option).addTo(map);
104+
}
105+
106+
</script>
107+
</body>
108+
</html>

‎examples/leaflet/img/L_echartsAnimatorCar.png‎

18.8 KB
Loading

0 commit comments

Comments
 (0)