Skip to content

Commit c36a2b8

Browse files
xiongjiaojiaoxiongjiaojiao
committed
uppdate 增加reactreact部分图层例子, review by qiwei
1 parent b2c4118 commit c36a2b8

18 files changed

+15698
-7976
lines changed

‎dist/mapboxgl/iclient-mapboxgl-react.js‎

Lines changed: 13984 additions & 7960 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient-mapboxgl-react.min.js‎

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

‎examples/component/components_dataflow_react.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsDataFlow_React"></title>
9+
<script type="text/javascript" include="react" src="../js/include-web.js"></script>
10+
<script include="iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
html,
13+
body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
#main {
20+
height: 100%;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div id="main"></div>
27+
<script type="text/babel">
28+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
29+
var wsHost = 'ws:\//' + (window.isLocal ? document.location.hostname + ':8800' : 'iclsvrws.supermap.io');
30+
var attribution =
31+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
32+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
33+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
34+
var SmWebMap = window.SuperMap.Components.SmWebMap;
35+
var SmDataFlowLayer = window.SuperMap.Components.SmDataFlowLayer;
36+
var mapOptions = {
37+
container: 'map',
38+
style: {
39+
version: 8,
40+
sources: {
41+
'raster-tiles': {
42+
attribution: attribution,
43+
type: 'raster',
44+
tiles: [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
45+
tileSize: 256
46+
}
47+
},
48+
layers: [
49+
{
50+
id: 'simple-tiles',
51+
type: 'raster',
52+
source: 'raster-tiles',
53+
minzoom: 0,
54+
maxzoom: 22
55+
}
56+
]
57+
},
58+
center: [120.143, 30.236],
59+
zoom: 0
60+
};
61+
var serviceUrl = wsHost + '/iserver/services/dataflowTest/dataflow';
62+
var layerStyle = {
63+
circle: new SuperMap.Components.commontypes.CircleStyle({
64+
'circle-color': '#3fb1e3',
65+
'circle-radius': 6
66+
})
67+
};
68+
69+
SuperMap.SecurityManager.registerToken(
70+
'ws://iclsvrws.supermap.io/iserver/services/dataflowTest/dataflow',
71+
window.exampleToken
72+
);
73+
// 模拟 dataflow 实时数据
74+
var featureResult, dataFlowBroadcast, timer;
75+
function broadcast() {
76+
var features = [];
77+
for (var index = 0; index < featureResult.length; index++) {
78+
var count = parseInt(Math.random() * featureResult.length);
79+
var geometry = featureResult[count].geometry;
80+
var feature = {
81+
geometry: geometry,
82+
type: 'Feature',
83+
properties: { id: index + 1, time: new Date() }
84+
};
85+
features.push(feature);
86+
}
87+
dataFlowBroadcast.broadcast(features);
88+
}
89+
90+
function query() {
91+
var param = new SuperMap.QueryBySQLParameters({
92+
queryParams: { name: 'Capitals@World#3', attributeFilter: 'SMID > 0' }
93+
});
94+
var queryService = new mapboxgl.supermap.QueryService(
95+
host + '/iserver/services/map-world/rest/maps/World'
96+
).queryBySQL(param, function(serviceResult) {
97+
featureResult = serviceResult.result && serviceResult.result.recordsets[0].features.features;
98+
dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(
99+
wsHost + '/iserver/services/dataflowTest/dataflow'
100+
).initBroadcast();
101+
dataFlowBroadcast.on('broadcastSocketConnected', function(e) {
102+
timer = window.setInterval(broadcast, 2000);
103+
});
104+
});
105+
}
106+
query();
107+
108+
ReactDOM.render(
109+
<SmWebMap mapOptions={mapOptions}>
110+
<SmDataFlowLayer serviceUrl={serviceUrl} layerStyle={layerStyle} />
111+
</SmWebMap>,
112+
document.getElementById('main')
113+
);
114+
</script>
115+
</body>
116+
</html>

‎examples/component/components_echarts_react.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsEcharts_React"></title>
9+
<script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
10+
<script include="iclient-mapboxgl-react,mapbox-gl-enhance,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
html,
13+
body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
#main {
20+
height: 100%;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div id="main"></div>
27+
<script type="text/babel">
28+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
29+
var attribution =
30+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
31+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
32+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
33+
var SmWebMap = window.SuperMap.Components.SmWebMap;
34+
var SmEchartsLayer = window.SuperMap.Components.SmEchartsLayer;
35+
var mapOptions = {
36+
container: 'map', // container id
37+
style: {
38+
version: 8,
39+
sources: {
40+
'raster-tiles': {
41+
attribution: attribution,
42+
type: 'raster',
43+
tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
44+
tileSize: 256
45+
}
46+
},
47+
layers: [
48+
{
49+
id: 'simple-tiles',
50+
type: 'raster',
51+
source: 'raster-tiles',
52+
minzoom: 0,
53+
maxzoom: 22
54+
}
55+
]
56+
},
57+
center: [125.35, 43.86],
58+
zoom: 10
59+
};
60+
61+
$.get('../data/changchunBus.json', function(data) {
62+
var echartsOptions = {
63+
animation: false,
64+
GLMap: {
65+
roam: true
66+
},
67+
coordinateSystem: 'GLMap',
68+
geo: {
69+
map: 'GLMap'
70+
},
71+
series: [
72+
{
73+
type: 'lines',
74+
polyline: true,
75+
data: data,
76+
silent: true,
77+
lineStyle: {
78+
normal: {
79+
opacity: 0.2,
80+
width: 1
81+
}
82+
},
83+
progressiveThreshold: 500,
84+
progressive: 100
85+
},
86+
{
87+
type: 'lines',
88+
coordinateSystem: 'GLMap',
89+
polyline: true,
90+
data: data,
91+
lineStyle: {
92+
normal: {
93+
width: 0.2
94+
}
95+
},
96+
effect: {
97+
constantSpeed: 40,
98+
show: true,
99+
trailLength: 0.02,
100+
symbolSize: 2
101+
}
102+
}
103+
]
104+
};
105+
106+
console.log(echartsOptions);
107+
108+
ReactDOM.render(
109+
<SmWebMap mapOptions={mapOptions}>
110+
<SmEchartsLayer options={echartsOptions} />
111+
</SmWebMap>,
112+
document.getElementById('main')
113+
);
114+
});
115+
</script>
116+
</body>
117+
</html>

‎examples/component/components_fire_layer_react.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_componentsFireLayer_React"></title>
9+
<script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
10+
<script include="three,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
html,
13+
body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
#main {
20+
height: 100%;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div id="main"></div>
27+
<script type="text/babel">
28+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
29+
var attribution =
30+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
31+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
32+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
33+
var SmWebMap = window.SuperMap.Components.SmWebMap;
34+
var SmFireLayer = window.SuperMap.Components.SmFireLayer;
35+
var mapOptions = {
36+
container: 'map',
37+
style: {
38+
version: 8,
39+
sources: {
40+
'raster-tiles': {
41+
attribution: attribution,
42+
type: 'raster',
43+
tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
44+
tileSize: 256
45+
},
46+
buildings: {
47+
type: 'geojson',
48+
data: 'http://iclient.supermap.io/examples/data/buildings.json'
49+
}
50+
},
51+
layers: [
52+
{
53+
id: 'simple-tiles',
54+
type: 'raster',
55+
source: 'raster-tiles',
56+
minzoom: 0,
57+
maxzoom: 22
58+
},
59+
{
60+
id: '3d-buildings',
61+
source: 'buildings',
62+
type: 'fill-extrusion',
63+
paint: {
64+
'fill-extrusion-color': [
65+
'case',
66+
['<', ['get', 'height'], 2],
67+
'#fbb03b',
68+
['<', ['get', 'height'], 4],
69+
'#223b53',
70+
['<', ['get', 'height'], 8],
71+
'#15D1F2',
72+
['<', ['get', 'height'], 16],
73+
'#15D1F2',
74+
'#3bb2d0'
75+
],
76+
'fill-extrusion-height': ['*', ['get', 'height'], 5],
77+
'fill-extrusion-opacity': 0.6
78+
}
79+
}
80+
]
81+
},
82+
center: [116.45423056455218, 39.91980158816503],
83+
zoom: 14.27415578362124,
84+
bearing: 0.8568,
85+
pitch: 60
86+
};
87+
88+
$.get('../data/fire.json', function(features) {
89+
var features = features;
90+
91+
ReactDOM.render(
92+
<SmWebMap mapOptions={mapOptions}>
93+
<SmFireLayer features={features} modelScale={5.41843220338983e-6} />
94+
</SmWebMap>,
95+
document.getElementById('main')
96+
);
97+
});
98+
</script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)