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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy