Skip to content

Commit 599401d

Browse files
songyumengsongyumeng
committed
对接iServer DataFlow
1 parent a2d5ff7 commit 599401d

File tree

16 files changed

+4491
-3134
lines changed

16 files changed

+4491
-3134
lines changed

‎build/deps.js‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,8 @@ deps = {
286286
"name": "Online服务",
287287
"src": [
288288
"./src/common/online/Online.js"
289-
], "modules": [{
289+
],
290+
"modules": [{
290291
"name": "SuperMap.Online",
291292
"des": "Online服务"
292293
}]
@@ -311,6 +312,20 @@ deps = {
311312
"name": "SuperMap.ElasticSearchService",
312313
"des": "ElasticSearch服务"
313314
}]
315+
},
316+
"DataFlow": {
317+
"name": "实时大数据服务",
318+
"src": [
319+
"./src/leaflet/services/DataFlowService.js",
320+
"./src/leaflet/overlay/DataFlowLayer.js"
321+
],
322+
"modules": [{
323+
"name": "L.supermap.dataFlowService",
324+
"des": "实时大数据服务"
325+
},{
326+
"name": "L.supermap.dataFlowLayer",
327+
"des": "实时大数据图层"
328+
}]
314329
}
315330
},
316331

@@ -345,7 +360,7 @@ deps = {
345360
],
346361
"modules": [{
347362
"name": "L.supermap.tiledVectorLayer",
348-
"des": "iServer矢量瓦片效果"
363+
"des": "矢量瓦片效果"
349364
}]
350365
},
351366
"ThemeLayer": {
@@ -583,6 +598,20 @@ deps = {
583598
"name": "ol.supermap.AddressMatchService",
584599
"des": "地址匹配服务"
585600
}]
601+
},
602+
"DataFlow": {
603+
"name": "实时大数据服务",
604+
"src": [
605+
"./src/openlayers/services/DataFlowService.js",
606+
"./src/openlayers/overlay/DataFlow.js"
607+
],
608+
"modules": [{
609+
"name": "ol.supermap.DataFlowService",
610+
"des": "实时大数据服务"
611+
},{
612+
"name": "ol.source.DataFlow",
613+
"des": "实时大数据"
614+
}]
586615
}
587616
},
588617
"Overlay": {

‎dist/iclient9-leaflet.js‎

Lines changed: 2974 additions & 2650 deletions
Large diffs are not rendered by default.

‎dist/iclient9-leaflet.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/iclient9-openlayers.js‎

Lines changed: 781 additions & 480 deletions
Large diffs are not rendered by default.

‎dist/iclient9-openlayers.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/leaflet/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,14 @@ var exampleConfig = {
234234
thumbnail: "l_addressService.png",
235235
fileName: "addressMatchService"
236236
}]
237+
},
238+
"dataFlow": {
239+
name: "实时大数据",
240+
content: [{
241+
name: "实时大数据",
242+
thumbnail: "dataflow.png",
243+
fileName: "dataFlowService"
244+
}]
237245
}
238246
}
239247
},

‎examples/leaflet/dataFlowService.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>实时大数据服务</title>
6+
<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/leaflet/1.0.3/leaflet.css">
8+
</head>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
10+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
11+
12+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet-src.js"></script>
13+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var map, resultLayer,
16+
urlMap = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China",
17+
urlQuery = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China_4326",
18+
urlDataFlow = "ws://117.122.248.69:8091/iserver/services/dataflow/dataflow";
19+
map = L.map('map', {
20+
preferCanvas: true,
21+
crs: L.CRS.EPSG3857,
22+
center: [39.88, 116.42],
23+
maxZoom: 18,
24+
zoom: 12
25+
});
26+
L.supermap.tiledMapLayer(urlMap).addTo(map);
27+
query();
28+
var timer, featureResult, dataFlowService, dataFlowLayer;
29+
30+
function query() {
31+
var param = new SuperMap.QueryBySQLParameters({
32+
queryParams: {
33+
name: "Main_Road_L@China#1",
34+
attributeFilter: "SMID = 1755"
35+
}
36+
});
37+
L.supermap
38+
.queryService(urlQuery)
39+
.queryBySQL(param, function (serviceResult) {
40+
featureResult = serviceResult;
41+
dataFlowLayer = L.supermap.dataFlowLayer(urlDataFlow, {
42+
style: function (feature) {
43+
return {
44+
fillColor: "red",
45+
fillOpacity: 1,
46+
radius: 6,
47+
weight: 0
48+
};
49+
},
50+
onEachFeature: function (feature, layer) {
51+
L.popup({offset: L.point(0, 0)})
52+
.setLatLng(L.GeoJSON.coordsToLatLng(feature.geometry.coordinates))
53+
.setContent(feature.properties.time)
54+
.openOn(map);
55+
},
56+
// geometry:{coordinates:[[[116.381741960923,39.8765100055449],[116.414681699817,39.8765100055449],[116.414681699817,39.8415115329708],[116.381741960923, 39.8415115329708],[116.381741960923,39.8765100055449]]],type:"Polygon"},
57+
// excludeField:["id"]
58+
}).on('add', function () {
59+
dataFlowService = L.supermap.dataFlowService(urlDataFlow).initBroadcast();
60+
dataFlowService.on('broadcastSocketConnected', function (e) {
61+
timer = window.setInterval("broadcast()", 2000);
62+
})
63+
}).addTo(map);
64+
});
65+
66+
67+
}
68+
var count = 200;
69+
function broadcast() {
70+
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
71+
window.clearInterval(timer);
72+
return;
73+
}
74+
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
75+
var featrue = {
76+
geometry: {coordinates: [point[0], point[1]], type: "Point"},
77+
id: 1,
78+
type: "Feature",
79+
properties: {id: count, time: new Date()}
80+
};
81+
dataFlowService.broadcast(featrue);
82+
count += 3;
83+
}
84+
</script>
85+
</body>
86+
</html>

‎examples/leaflet/img/dataflow.png‎

10.5 KB
Loading

‎examples/openlayers/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,14 @@ var exampleConfig = {
258258
thumbnail: "addressService.png",
259259
fileName: "addressMatchService"
260260
}]
261+
},
262+
"dataFlow": {
263+
name: "实时大数据",
264+
content: [{
265+
name: "实时大数据",
266+
thumbnail: "dataflow.png",
267+
fileName: "dataFlowService"
268+
}]
261269
}
262270
}
263271
},

‎examples/openlayers/dataFlowService.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>实时大数据服务</title>
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
7+
<link href="http://cdn.bootcss.com/openlayers/4.2.0/ol.css" rel="stylesheet">
8+
<style>
9+
.ol-popup {
10+
position: absolute;
11+
background-color: white;
12+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
13+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
14+
padding: 15px;
15+
border-radius: 10px;
16+
border: 1px solid #cccccc;
17+
bottom: 12px;
18+
left: -50px;
19+
min-width: 210px;
20+
}
21+
22+
.ol-popup:after, .ol-popup:before {
23+
top: 100%;
24+
border: solid transparent;
25+
content: " ";
26+
height: 0;
27+
width: 0;
28+
position: absolute;
29+
pointer-events: none;
30+
}
31+
32+
.ol-popup:after {
33+
border-top-color: white;
34+
border-width: 10px;
35+
left: 48px;
36+
margin-left: -10px;
37+
}
38+
39+
.ol-popup:before {
40+
border-top-color: #cccccc;
41+
border-width: 11px;
42+
left: 48px;
43+
margin-left: -11px;
44+
}
45+
46+
</style>
47+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
48+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
49+
<div id="popup" class="ol-popup">
50+
<div id="popup-content"></div>
51+
</div>
52+
53+
<script src="http://cdn.bootcss.com/openlayers/4.2.0/ol-debug.js"></script>
54+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
55+
<script type="text/javascript">
56+
var container = document.getElementById('popup');
57+
var content = document.getElementById('popup-content');
58+
var overlay = new ol.Overlay(({
59+
element: container,
60+
autoPan: true,
61+
autoPanAnimation: {
62+
duration: 250
63+
}
64+
}));
65+
var map, resultLayer,
66+
urlMap = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China",
67+
urlQuery = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China_4326",
68+
urlDataFlow = "ws://117.122.248.69:8091/iserver/services/dataflow/dataflow";
69+
var timer, featureResult, dataFlowService, source;
70+
new ol.supermap.MapService(urlQuery).getMapInfo(function (serviceResult) {
71+
var mapJSONObj = serviceResult.result;
72+
var map = new ol.Map({
73+
target: 'map',
74+
view: new ol.View({
75+
center: [116.443571, 39.887549],
76+
zoom: 12,
77+
projection: 'EPSG:4326'
78+
}),
79+
overlays: [overlay]
80+
});
81+
var layer = new ol.layer.Tile({
82+
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(urlQuery, mapJSONObj))
83+
});
84+
map.addLayer(layer);
85+
query();
86+
function query() {
87+
var param = new SuperMap.QueryBySQLParameters({
88+
queryParams: {
89+
name: "Main_Road_L@China#1",
90+
attributeFilter: "SMID = 1755"
91+
}
92+
});
93+
var fill = new ol.style.Fill({
94+
color: 'rgba(255,0,0,0.9)'
95+
});
96+
var stroke = new ol.style.Stroke({
97+
color: '#3399CC',
98+
width: 1.25
99+
});
100+
var styles = [
101+
new ol.style.Style({
102+
image: new ol.style.Circle({
103+
fill: fill,
104+
radius: 5
105+
}),
106+
fill: fill,
107+
})
108+
];
109+
new ol.supermap.QueryService(urlQuery)
110+
.queryBySQL(param, function (serviceResult) {
111+
featureResult = serviceResult;
112+
source = new ol.source.DataFlow({ws: urlDataFlow});
113+
source.on('addfeature',function (e) {
114+
var feature=e.feature;
115+
content.innerHTML = feature.get('time');
116+
overlay.setPosition(feature.getGeometry().getCoordinates());
117+
});
118+
resultLayer = new ol.layer.Vector({
119+
source: source,
120+
style:new ol.style.Style({
121+
image: new ol.style.Circle({
122+
fill: fill,
123+
radius: 6
124+
}),
125+
fill: fill,
126+
})
127+
});
128+
source.on('subscribeSuccessed', function (e) {
129+
dataFlowService = new ol.supermap.DataFlowService(urlDataFlow).initBroadcast();
130+
dataFlowService.on('broadcastSocketConnected', function (e) {
131+
timer = window.setInterval("broadcast()", 2000);
132+
})
133+
})
134+
map.addLayer(resultLayer);
135+
});
136+
137+
138+
}
139+
});
140+
var count = 200;
141+
function broadcast() {
142+
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
143+
window.clearInterval(timer);
144+
return;
145+
}
146+
if (count == 206) {
147+
source.setGeometry({
148+
coordinates: [[[116.381741960923, 39.8765100055449], [116.414681699817, 39.8765100055449], [116.414681699817, 39.8415115329708], [116.381741960923, 39.8415115329708], [116.381741960923, 39.8765100055449]]],
149+
type: "Polygon"
150+
});
151+
}
152+
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
153+
var featrue = {
154+
geometry: {coordinates: [point[0], point[1]], type: "Point"},
155+
id: 1,
156+
type: "Feature",
157+
properties: {id: count, time: new Date()}
158+
};
159+
dataFlowService.broadcast(featrue);
160+
count += 3;
161+
}
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)