Skip to content

Commit 49c6307

Browse files
Yuki-ZhaoYuki-Zhao
committed
2 parents 2a9a479 + cf92dae commit 49c6307

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+34836
-11917
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: 31047 additions & 11896 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 & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/component/components_animate_marker_layer_react.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
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_componentsAnimateMarkerLayer_React"></title>
9+
<script type="text/javascript" include="react,jquery" src="../js/include-web.js"></script>
10+
<script
11+
type="text/javascript"
12+
include="mapbox-gl-enhance,iclient-mapboxgl-react"
13+
src="../../dist/mapboxgl/include-mapboxgl.js"
14+
></script>
15+
<style>
16+
#main {
17+
margin: 0 auto;
18+
width: 100%;
19+
height: 100%;
20+
}
21+
.radio-group {
22+
position: absolute;
23+
left: 10px;
24+
top: 10px;
25+
text-align: center;
26+
background: transparent;
27+
z-index: 1000;
28+
}
29+
.radio-btn-wrap {
30+
margin: 0;
31+
padding: 0;
32+
list-style: none;
33+
color: rgb(255, 255, 255);
34+
font-size: 14px;
35+
}
36+
.radio-btn-item {
37+
display: inline-block;
38+
height: 32px;
39+
line-height: 30px;
40+
padding: 1px 15px;
41+
background: rgb(0, 0, 0);
42+
border: 1px solid rgb(73, 73, 73);
43+
color: rgb(255, 255, 255);
44+
font-weight: bold;
45+
}
46+
.radio-btn-item:hover {
47+
cursor: pointer;
48+
}
49+
.active-btn-item {
50+
color: #1890ff;
51+
border: 1px solid #1890ff;
52+
border-radius: 4px 0 0 4px;
53+
border-left: 1px solid #1890ff !important;
54+
}
55+
</style>
56+
</head>
57+
58+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
59+
<div id="main"></div>
60+
<script type="text/babel">
61+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
62+
var url = host + '/iserver/services/map-china400/rest/maps/China';
63+
var param = new SuperMap.QueryBySQLParameters({
64+
queryParams: {
65+
name: 'China_provincename_A_txt@China',
66+
attributeFilter: 'SMID > 0'
67+
}
68+
});
69+
var mapUrl = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
70+
var attribution =
71+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
72+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
73+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
74+
var mapOptions = {
75+
container: 'map',
76+
style: {
77+
version: 8,
78+
sources: {
79+
'raster-tiles': {
80+
attribution: attribution,
81+
type: 'raster',
82+
tiles: [mapUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
83+
tileSize: 256
84+
}
85+
},
86+
layers: [
87+
{
88+
id: 'simple-tiles',
89+
type: 'raster',
90+
source: 'raster-tiles',
91+
minzoom: 0,
92+
maxzoom: 22
93+
}
94+
]
95+
},
96+
center: [105.98046235680022, 28.528014198723596],
97+
zoom: 5.151412188068154,
98+
bearing: 0.8568,
99+
pitch: 60
100+
};
101+
102+
var SmWebMap = window.SuperMap.Components.SmWebMap;
103+
var SmAnimateMarkerLayer = window.SuperMap.Components.SmAnimateMarkerLayer;
104+
// 类型选择
105+
class RadioButton extends React.Component {
106+
constructor(props) {
107+
super(props);
108+
this.state = { type: 'breathingAperture' };
109+
this.clickHandler = this.clickHandler.bind(this);
110+
}
111+
clickHandler(type) {
112+
this.setState({ type });
113+
this.props.onTypeChange(type);
114+
}
115+
render() {
116+
return (
117+
<div class="radio-group">
118+
<ul class="radio-btn-wrap">
119+
<li
120+
class={this.state.type === 'breathingAperture' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
121+
value="breathingAperture"
122+
onClick={e => {
123+
this.clickHandler('breathingAperture');
124+
}}
125+
>
126+
{resources.btn_breathingAperture}
127+
</li>
128+
<li
129+
class={this.state.type === 'haloRing' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
130+
value="haloRing"
131+
onClick={e => {
132+
this.clickHandler('haloRing');
133+
}}
134+
>
135+
{resources.btn_haloRing}
136+
</li>
137+
<li
138+
class={this.state.type === 'rotatingAperture' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
139+
value="rotatingAperture"
140+
onClick={e => {
141+
this.clickHandler('rotatingAperture');
142+
}}
143+
>
144+
{resources.btn_rotatingAperture}
145+
</li>
146+
<li
147+
class={this.state.type === 'diffusedAperture' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
148+
value="diffusedAperture"
149+
onClick={e => {
150+
this.clickHandler('diffusedAperture');
151+
}}
152+
>
153+
{resources.btn_diffusedAperture}
154+
</li>
155+
<li
156+
class={this.state.type === 'rotatingTextBorder' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
157+
value="rotatingTextBorder"
158+
onClick={e => {
159+
this.clickHandler('rotatingTextBorder');
160+
}}
161+
>
162+
{resources.btn_rotatingTextBorder}
163+
</li>
164+
<li
165+
class={this.state.type === 'fluorescence' ? 'radio-btn-item active-btn-item' : 'radio-btn-item'}
166+
value="fluorescence"
167+
onClick={e => {
168+
this.clickHandler('fluorescence');
169+
}}
170+
>
171+
{resources.btn_fluorescence}
172+
</li>
173+
</ul>
174+
</div>
175+
);
176+
}
177+
}
178+
class App extends React.Component {
179+
constructor(props) {
180+
super(props);
181+
this.state = {
182+
type: 'breathingAperture',
183+
breathingApertureParam: {
184+
width: 80
185+
},
186+
haloRingParam: {
187+
width: 44
188+
},
189+
rotatingTextBorderParam: {
190+
width: 120
191+
},
192+
param: null
193+
};
194+
this.onTypeChange = this.onTypeChange.bind(this);
195+
this.changeParam = this.changeParam.bind(this);
196+
}
197+
onTypeChange(type) {
198+
this.setState({ type });
199+
this.changeParam(type);
200+
}
201+
changeParam(type) {
202+
let param;
203+
if (this.state[type + 'Param']) {
204+
param = this.state[type + 'Param'];
205+
} else {
206+
param = null;
207+
}
208+
this.setState({
209+
param
210+
});
211+
}
212+
componentDidMount() {
213+
this.setState({
214+
param: this.state.breathingApertureParam
215+
});
216+
}
217+
render() {
218+
return (
219+
<SmWebMap mapOptions={this.props.mapOptions}>
220+
<RadioButton onTypeChange={this.onTypeChange} />
221+
<SmAnimateMarkerLayer
222+
features={this.props.features}
223+
type={this.state.type}
224+
width={this.state.param && this.state.param.width}
225+
textField="name"
226+
fitBounds={false}
227+
/>
228+
</SmWebMap>
229+
);
230+
}
231+
}
232+
var queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(param, function(serviceResult) {
233+
var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
234+
var features = recordsets && recordsets[0] && recordsets[0].features;
235+
features.features.forEach(function(feature) {
236+
feature.geometry.coordinates = _unproject(feature.geometry.coordinates);
237+
feature.properties.name = feature.properties.texts[0];
238+
});
239+
// 渲染App组件
240+
ReactDOM.render(<App mapOptions={mapOptions} features={features} />, document.getElementById('main'));
241+
});
242+
function _unproject(point) {
243+
var d = 180 / Math.PI,
244+
r = 6378137,
245+
ts = Math.exp(-point[1] / r),
246+
phi = Math.PI / 2 - 2 * Math.atan(ts);
247+
for (var i = 0, dphi = 0.1, con; i < 15 && Math.abs(dphi) > 1e-7; i++) {
248+
con = 1;
249+
dphi = Math.PI / 2 - 2 * Math.atan(ts * con) - phi;
250+
phi += dphi;
251+
}
252+
return [(point[0] * d) / r, phi * d];
253+
}
254+
</script>
255+
</body>
256+
</html>

‎examples/component/components_cluster_react.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
ReactDOM.render(
65+
<SmWebMap mapId={'676816598'} serverUrl={'http://support.supermap.com.cn:8092/'}>
66+
<SmClusterLayer data={geojson} radius={100} />
67+
</SmWebMap>,
68+
document.getElementById('main')
69+
);
70+
});
71+
</script>
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)