Skip to content

Commit 2a2318d

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
【feature】 新增react layer例子 review by xiongjiaojiao
1 parent c36a2b8 commit 2a2318d

11 files changed

+24643
-9778
lines changed

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

Lines changed: 483 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 22903 additions & 9776 deletions
Large diffs are not rendered by default.

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

Lines changed: 483 additions & 0 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient-mapboxgl-react.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/component/components_cluster_react.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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_componentsCluster_React"></title>
9+
<script type="text/javascript" include="react,jquery,papaparse" 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+
#main {
19+
height: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="main"></div>
25+
<script type="text/babel">
26+
// import {SmClusterLayer} from '@supermap/react-iclient'
27+
var SmWebMap = window.SuperMap.Components.SmWebMap;
28+
var SmClusterLayer = window.SuperMap.Components.SmClusterLayer;
29+
30+
$.get('../data/chinaEarthquake.csv', function(response) {
31+
var dataObj = Papa.parse(response, {
32+
skipEmptyLines: true,
33+
header: true
34+
});
35+
36+
var data = dataObj.data;
37+
var geojson = {
38+
type: 'FeatureCollection',
39+
features: []
40+
};
41+
42+
for (var i = 0; i < data.length; i++) {
43+
var item = data[i];
44+
var date = new Date(item.date);
45+
var year = date.getFullYear();
46+
47+
//2w+地震数据
48+
if (year > 2000 && year < 2015) {
49+
var feature = {
50+
type: 'feature',
51+
geometry: {
52+
type: 'Point',
53+
coordinates: []
54+
},
55+
properties: {
56+
value: parseFloat(item.level)
57+
}
58+
};
59+
feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
60+
geojson.features.push(feature);
61+
}
62+
}
63+
64+
65+
ReactDOM.render(
66+
<SmWebMap mapId={'676816598'} serverUrl={'http://support.supermap.com.cn:8092/'} >
67+
<SmClusterLayer data={geojson} radius={100}/>
68+
</SmWebMap>,
69+
document.getElementById('main')
70+
);
71+
});
72+
</script>
73+
</body>
74+
</html>

‎examples/component/components_deckgl_react.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
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_componentsDeckGL_React"></title>
9+
<script type="text/javascript" include="react,jquery,papaparse,widgets" src="../js/include-web.js"></script>
10+
<script include="deck,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+
#main {
19+
height: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="main"></div>
25+
<script type="text/babel">
26+
// import {SmDeckglLayer} from '@supermap/react-iclient'
27+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
28+
var attribution =
29+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
30+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
31+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
32+
var SmWebMap = window.SuperMap.Components.SmWebMap;
33+
var SmDeckglLayer = window.SuperMap.Components.SmDeckglLayer;
34+
var mapOptions = {
35+
container: 'map', // container id
36+
style: {
37+
version: 8,
38+
sources: {
39+
'raster-tiles': {
40+
attribution: attribution,
41+
type: 'raster',
42+
tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'],
43+
tileSize: 256
44+
}
45+
},
46+
layers: [
47+
{
48+
id: 'simple-tiles',
49+
type: 'raster',
50+
source: 'raster-tiles',
51+
minzoom: 0,
52+
maxzoom: 22
53+
}
54+
]
55+
},
56+
center: [-122.430844, 37.772276],
57+
zoom: 12,
58+
pitch: 60,
59+
bearing: 36
60+
};
61+
62+
widgets.loader.showLoader('data loading...');
63+
var _this = this,
64+
popup, map;
65+
66+
function mapIsLoaded(e) {
67+
map = e.map;
68+
}
69+
70+
$.get('../data/deck.gl/strees_data.csv', function(csvstr) {
71+
widgets.loader.removeLoader();
72+
// 构造数据
73+
var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
74+
var deckglOptions = {
75+
data: features.data,
76+
props: {
77+
extruded: true,
78+
radius: 55,
79+
autoHighlight: true,
80+
upperPercentile: 99,
81+
coverage: 0.8,
82+
elevationScale: 400,
83+
colorRange: [
84+
[43, 30, 61, 255],
85+
[56, 60, 101, 255],
86+
[62, 95, 126, 255],
87+
[73, 131, 138, 255],
88+
[94, 162, 141, 255],
89+
[130, 187, 146, 255],
90+
[174, 206, 161, 255],
91+
[214, 222, 191, 255]
92+
],
93+
opacity: 0.8,
94+
// lightSettings 光照配置参数，配置三维光照效果，
95+
lightSettings: {
96+
lightsPosition: [-122.5, 37.7, 3000, -122.2, 37.9, 3000], // 指定为`[x，y，z]`的光在平面阵列中的位置
97+
ambientRatio: 0.2, //光照的环境比例
98+
diffuseRatio: 0.5, //光的漫反射率
99+
specularRatio: 0.3, //光的镜面反射率
100+
lightsStrength: [1.0, 0.0, 2.0, 0.0], //平面阵列中指定为“[x，y]`的灯的强度。 长度应该是`2 x numberOfLights`
101+
numberOfLights: 4 //光照值
102+
},
103+
//如需了解其他配置详情，请查看 DeckglLayer api
104+
onHover: function(feature) {
105+
if (!popup) {
106+
popup = new mapboxgl.Popup({
107+
anchor: 'bottom',
108+
closeButton: false,
109+
offset: {
110+
bottom: [0, -10]
111+
}
112+
});
113+
}
114+
if (!feature.object) {
115+
popup.remove();
116+
return;
117+
}
118+
//+" "+feature.lngLat
119+
popup.setHTML('Point Count： ' + feature.object.points.length);
120+
popup.setLngLat(map.unproject([feature.x, feature.y]));
121+
popup.addTo(map);
122+
}
123+
},
124+
callback: {
125+
getPosition: function(feature) {
126+
if (!feature.latitude || !feature.longitude) {
127+
return [0, 0];
128+
}
129+
return [Number(feature.longitude), Number(feature.latitude)];
130+
}
131+
}
132+
};
133+
ReactDOM.render(
134+
<SmWebMap
135+
mapOptions={mapOptions}
136+
onLoad={mapIsLoaded}
137+
>
138+
<SmDeckglLayer layerType={'hexagon-layer'} options={deckglOptions} />
139+
</SmWebMap>,
140+
document.getElementById('main')
141+
);
142+
});
143+
</script>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)