Skip to content

Commit b806607

Browse files
songyumengsongyumeng
committed
删除无用数据
优化dataflow例子变量命名 增加注释
1 parent 8fd892f commit b806607

File tree

4 files changed

+260
-234
lines changed

4 files changed

+260
-234
lines changed

‎examples/data/nyc_taxi.json‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/leaflet/dataFlowService.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
}
3030

3131
var popup = L.popup({offset: L.point(0, 0), autoPan: true});
32-
//创建DataFlowLayer，创建DataFlowLayer订阅DataFlow并将结果加载到地图上
32+
//创建DataFlowLayer，创建DataFlowLayer订阅iServer dataflow服务并将结果加载到地图上
3333
var dataFlowLayer = L.supermap.dataFlowLayer(urlDataFlow, {
3434
style: function (feature) {
3535
return {
@@ -51,10 +51,10 @@
5151
});
5252
dataFlowLayer.addTo(map);
5353

54-
//查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务，模拟实时数据
55-
//可通过dataFlowService将其他实时数据广播给iServer
54+
//模拟实时数据
55+
//查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
5656
query();
57-
var timer, featureResult, dataFlowService;
57+
var timer, featureResult, dataFlowBroadcast;
5858

5959
function query() {
6060
var param = new SuperMap.QueryBySQLParameters({
@@ -67,8 +67,8 @@
6767
.queryService(urlQuery)
6868
.queryBySQL(param, function (serviceResult) {
6969
featureResult = serviceResult;
70-
dataFlowService = L.supermap.dataFlowService(urlDataFlow).initBroadcast();
71-
dataFlowService.on('broadcastSocketConnected', function (e) {
70+
dataFlowBroadcast = L.supermap.dataFlowService(urlDataFlow).initBroadcast();
71+
dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
7272
timer = window.setInterval("broadcast()", 2000);
7373
})
7474
});
@@ -88,7 +88,7 @@
8888
type: "Feature",
8989
properties: {id: 1, time: new Date()}
9090
};
91-
dataFlowService.broadcast(feature);
91+
dataFlowBroadcast.broadcast(feature);
9292
count += 3;
9393
}
9494
</script>

‎examples/mapboxgl/dataFlowService.html‎

Lines changed: 126 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta charset="UTF-8">
56
<title data-i18n="resources.title_dataFlowService"></title>
@@ -10,149 +11,156 @@
1011
max-width: 200px;
1112
}
1213
</style>
14+
1315
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
14-
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
15-
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
16-
<script>
17-
var host = (window.isLocal ? window.server : "http://117.122.248.69:8090"),
18-
tileUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}',
19-
urlQuery = host + "/iserver/services/map-china400/rest/maps/China_4326";
20-
21-
wsHost = "ws:\//" + (window.isLocal ? document.location.hostname + ":8800" : "117.122.248.69:8800");
22-
var token = "DdC3068lKasFf_d8_EmvHoeK0T30BynU1_tpGO5AaNM2KMmqLsbZjah-1YGeOjFBjPBAJ7WpKC-yckURW2HsOQ..";
23-
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
24-
25-
var urlDataFlow = wsHost + "/iserver/services/dataflowTest/dataflow";
26-
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
27-
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
28-
var dataFlowService;
29-
var map = new mapboxgl.Map({
30-
container: 'map',
31-
style: {
32-
"version": 8,
33-
"sources": {
34-
"raster-tiles": {
35-
"attribution": attribution,
36-
"type": "raster",
37-
"tiles": [tileUrl],
38-
"tileSize": 256,
16+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
17+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
18+
<script>
19+
var host = (window.isLocal ? window.server : "http://117.122.248.69:8090"),
20+
tileUrl = host +
21+
'/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}',
22+
urlQuery = host + "/iserver/services/map-china400/rest/maps/China_4326";
23+
24+
wsHost = "ws:\//" + (window.isLocal ? document.location.hostname + ":8800" : "117.122.248.69:8800");
25+
var token = "DdC3068lKasFf_d8_EmvHoeK0T30BynU1_tpGO5AaNM2KMmqLsbZjah-1YGeOjFBjPBAJ7WpKC-yckURW2HsOQ..";
26+
mapboxgl.accessToken =
27+
'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
28+
29+
var urlDataFlow = wsHost + "/iserver/services/dataflowTest/dataflow";
30+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
31+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
32+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
33+
var dataFlowService;
34+
var map = new mapboxgl.Map({
35+
container: 'map',
36+
style: {
37+
"version": 8,
38+
"sources": {
39+
"raster-tiles": {
40+
"attribution": attribution,
41+
"type": "raster",
42+
"tiles": [tileUrl],
43+
"tileSize": 256,
44+
},
3945
},
46+
"layers": [{
47+
"id": "simple-tiles",
48+
"type": "raster",
49+
"source": "raster-tiles",
50+
"minzoom": 0,
51+
"maxzoom": 18
52+
}],
53+
"sprite": "http://iclient.supermap.io/web/styles/street/sprite",
4054
},
41-
"layers": [{
42-
"id": "simple-tiles",
43-
"type": "raster",
44-
"source": "raster-tiles",
45-
"minzoom": 0,
46-
"maxzoom": 18
47-
}],
48-
"sprite": "http://iclient.supermap.io/web/styles/street/sprite",
49-
},
50-
center: [116.443571, 39.887549],
51-
maxZoom: 18,
52-
zoom: 10
53-
});
54-
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
55-
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
56-
57-
if (!window.isLocal) {
58-
SuperMap.SecurityManager.registerToken(urlDataFlow, token);
59-
}
60-
var popup = new mapboxgl.Popup();
61-
62-
map.on('load', function () {
63-
query();
64-
});
65-
66-
67-
function query() {
68-
var param = new SuperMap.QueryBySQLParameters({
69-
queryParams: {
70-
name: "Main_Road_L@China#1",
71-
attributeFilter: "SMID = 1755"
72-
}
55+
center: [116.443571, 39.887549],
56+
maxZoom: 18,
57+
zoom: 10
7358
});
59+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
60+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
7461

75-
queryService = new mapboxgl.supermap.QueryService(urlQuery).queryBySQL(param, function (serviceResult) {
62+
if (!window.isLocal) {
63+
SuperMap.SecurityManager.registerToken(urlDataFlow, token);
64+
}
65+
var popup = new mapboxgl.Popup();
7666

77-
featureResult = serviceResult;
78-
var options = {ws: urlDataFlow};
79-
var dataService = new mapboxgl.supermap.DataFlowService(options.ws, {
67+
map.on('load', function () {
68+
var options = {
69+
ws: urlDataFlow
70+
};
71+
var dataFlowSubscribe = new mapboxgl.supermap.DataFlowService(options.ws, {
8072
geometry: options.geometry,
8173
prjCoordSys: options.prjCoordSys,
8274
excludeField: options.excludeField
8375
}).initSubscribe();
84-
85-
dataFlowService = new mapboxgl.supermap.DataFlowService(urlDataFlow).initBroadcast();
86-
dataService.on('subscribeSuccessed', function (e) {
87-
dataFlowService.on('broadcastSocketConnected', function (e) {
88-
timer = window.setInterval("broadcast()", 2000);
89-
});
90-
});
91-
dataService.on('messageSuccessed', function (msg) {
76+
dataFlowSubscribe.on('messageSuccessed', function (msg) {
9277
popup.remove();
9378
addLayer(msg);
9479
});
95-
80+
query();
9681
});
97-
}
9882

99-
var count = 200;
100-
101-
function broadcast() {
83+
//模拟实时数据
84+
//查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
85+
function query() {
86+
var param = new SuperMap.QueryBySQLParameters({
87+
queryParams: {
88+
name: "Main_Road_L@China#1",
89+
attributeFilter: "SMID = 1755"
90+
}
91+
});
92+
queryService = new mapboxgl.supermap.QueryService(urlQuery).queryBySQL(param, function (serviceResult) {
93+
featureResult = serviceResult;
94+
dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(urlDataFlow).initBroadcast();
95+
dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
96+
timer = window.setInterval("broadcast()", 2000);
97+
});
10298

103-
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
104-
window.clearInterval(timer);
105-
return;
99+
});
106100
}
107-
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
108-
var feature = {
109-
geometry: {coordinates: [point[0], point[1]], type: "Point"},
110-
type: "Feature",
111-
properties: {id: 1, time: new Date()}
112-
};
113-
dataFlowService.broadcast(feature);
114-
count += 3;
115-
}
116101

117-
function addLayer(msg) {
118-
if (!msg.featureResult) {
119-
return;
120-
}
121-
var feature = msg.featureResult;
122-
var coord = feature.geometry.coordinates;
123-
var data = {
124-
geometry: {
125-
type: 'Point',
126-
coordinates: coord,
127-
},
128-
type: "Feature"
129-
};
102+
var count = 200;
130103

131-
if (!map.getSource('location')) {
132-
map.addSource('location', {
133-
'type': 'geojson',
134-
'data': data
135-
});
136-
map.addLayer({
137-
"id": "point",
138-
"type": "circle",
139-
"paint": {
140-
"circle-radius": 6,
141-
"circle-color": 'red',
104+
function broadcast() {
105+
106+
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
107+
window.clearInterval(timer);
108+
return;
109+
}
110+
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
111+
var feature = {
112+
geometry: {
113+
coordinates: [point[0], point[1]],
114+
type: "Point"
142115
},
143-
"source": 'location'
144-
});
116+
type: "Feature",
117+
properties: {
118+
id: 1,
119+
time: new Date()
120+
}
121+
};
122+
dataFlowBroadcast.broadcast(feature);
123+
count += 3;
145124
}
146125

147-
map.getSource('location').setData(data);
126+
function addLayer(msg) {
127+
if (!msg.featureResult) {
128+
return;
129+
}
130+
var feature = msg.featureResult;
131+
var coord = feature.geometry.coordinates;
132+
var data = {
133+
geometry: {
134+
type: 'Point',
135+
coordinates: coord,
136+
},
137+
type: "Feature"
138+
};
148139

149-
popup.setLngLat(coord)
150-
.setHTML(feature.properties.time)
151-
.addTo(map);
152-
}
140+
if (!map.getSource('location')) {
141+
map.addSource('location', {
142+
'type': 'geojson',
143+
'data': data
144+
});
145+
map.addLayer({
146+
"id": "point",
147+
"type": "circle",
148+
"paint": {
149+
"circle-radius": 6,
150+
"circle-color": 'red',
151+
},
152+
"source": 'location'
153+
});
154+
}
153155

156+
map.getSource('location').setData(data);
154157

155-
</script>
158+
popup.setLngLat(coord)
159+
.setHTML(feature.properties.time)
160+
.addTo(map);
161+
}
162+
</script>
156163

157164
</body>
165+
158166
</html>

0 commit comments

Comments
 (0)