-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
972 lines (930 loc) · 40.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property='og:title' content="Jiateng Xu's Website">
<meta property='og:image' content='images/banner.png'>
<meta property='og:description' content='Description that will show in the preview'>
<meta property='og:url' content= "www.jiatengxu.com" >
<title>Jiateng Xu</title>
<link rel="icon" href="images/favicons/logo.png" type="image/png">
<link rel="icon" href="images/favicons/logo.png" sizes="16x16" type="image/png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.min.css">
<!--link rel="stylesheet" href="css/style.css"-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
</head>
<body>
<!-- Header Section -->
<section class="banner" role="banner" id ="LocTop">
<!-- Navigation Section -->
<header id="header">
<div class="header-content clearfix">
<div class="logo"><img src="images/logo.png"></div>
<nav class="navigation" role="navigation">
<ul class="primary-nav">
<li><a href="#LocTop" class="active">Home</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#works">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#footprint">Footprints</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<a href="resume-Jiateng Xu.docx" class="nav-toggle">Menu<span></span></a> </div>
</header>
<!-- Navigation Section -->
<!-- Banner Section -->
<div class="container">
<div class="col-md-9 banner-inner-wrapper">
<div class="banner-text">
<h1>Welcome to my portfolio!</h1>
<h1>I'm Jiateng Xu. A GIS Enthusiast.</h1>
<h3>I want to become a GIS data sciencist and a developer<br>
to assist users to leverage the spatial data and trending technologies more easily.</h3>
<br>
<h2><i class="fa fa-circle"></i>University of Minnesota MGIS Graduate Student.</h3>
<h2><i class="fa fa-circle"></i>Previous Research Assistant at U-Spatial.</h3>
<br>
<!-- banner text -->
</div>
</div>
<!-- Banner Section -->
</section>
<!-- Header Section -->
<!-- Intro Section -->
<section id="aboutme" class="aboutme section">
<div class="container" id="" style="width:83%">
<div class="col-six tab-full">
<h3>About Me</h3>
<p><br>To me, Geographic Information Science (GIS) incorporates geographic and time factors into decision making. Furthermore, with the combination of GIS and Web 2.0, WebGIS can visualize geographic information to the public, and gather volunteered geographic information from the public.
<br><br>
I just graduated from the University of Minnesota with my master’s degree in GIS. I obtained my bachelor degrees in GIS and Geomatics with a minor in computer science from Wuhan University and the University of Waterloo, respectively. Over the past four years, my passion for GIS has continued to grow, and I am especially interested in the fields of spatial statistics, application development, and WebGIS. For my future career, I am seeking a job at a private agency or research organization as a GIS scientist or developer.
<br><br>
Since GIS is an interdisciplinary science, gaining experience and knowledge from a variety of fields are crucial for a GIS professional. Owing to my background and experience, I am familiar with spatial analysis, spatial databases, remote sensing, web mapping, and a variety of programming languages, including C, Python, and JavaScript. I have hands-on experiences with GI-systems, such as ArcMap, ArcGIS pro, ArcGIS online, ENVI, ERDAS, and QGIS. During university, I worked as a graduate research assistant at U-Spatial, and I primarily worked on a Groundwater project funded by DNR Serendipity Grant. I developed a groundwater web app using ArcGIS JavaScript API for academic support and dissemination proposes. My duties also include researching and answering questions about GIS, RS, and spatial computing from students and faculty.
<br><br>
Clifton StrengthsFinder identifies my top 5 themes as Input, Learner, Developer, Activator, and Communication, which I think suits me well. The themes Input, Learner, and Activator are demonstrated by my eagerness to learn and turn thoughts into action. During my fourth year as an undergraduate, I learned web design by myself from scratch. Since then, I have created many mapping websites for carpool sharing, field photo exhibition, and groundwater data visualization. I always have a passion for learning more, and I am learning ML and ANN to equip myself for the new generation big spatial data analysis. The themes of Developer and Communication are related to my ability to work in a group. When I worked as a GIS technical support intern at China Aerospace Science and Industry Corporation, I went to the Philippines as a member of the on-site survey team and cooperated with four partners from the Philippines and Canada.
<br><br>
Thank you for your time! If you're interested in working together, please <a href="#contact">contact me</a>. <br></p>
<button class="VF btn" id="VF">View Full Resume Online</button>
<a href="resume-Jiateng Xu.pdf" download class="DR btn" >Download Resume</a>
</div>
</div>
</section>
<div id="Modal_resume" class="modal">
<span class="close">×</span>
<div id="modal-resume">
<div id= "RHeading">
<h3 id = "resumeheading">Resume</h3>
<a href="resume-Jiateng Xu.pdf" download class="DR btn" id="DR2">Download Resume</a>
</div>
<div class="container" id="resume">
<div class="row resume-timeline" >
<div class="col-twelve resume-header">
<h3>Work Experience</h2>
</div> <!-- /resume-header -->
<div class="col-twelve">
<div class="timeline-wrap">
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Research Assistant</h3>
<p>Sep 2018 - Present</p>
</div>
<div class="timeline-content">
<h4>U-Spatial - University of Minnesota</h4>
<p> I am now a graduate research assistant at U-Spatial and I am developing a groundwater web app using ArcGIS JavaScript API,
which shows statistic and analytic results of groundwater for academic support and dissemination proposes.
My duty also includes researching and answering questions about GIS, RS and spatial computing from students and faculty.</p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>GIS Technical Support Intern</h3>
<p>June 2018 - Aug 2018</p>
</div>
<div class="timeline-content">
<h4>Global Aerospace Data Integration Center - CASIC</h4>
<p>I participated in the Philippine Environmental Monitoring project,
which aims to utilize spatial data to monitor the environment condition and help government to make reasonable plan to restore the environment.
As a member of the on-site survey group, I went to the Philippines and cooperated with partners from China, the Philippines and Canada.</p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Web Designer</h3>
<p>July 2017 - Sept 2017</p>
</div>
<div class="timeline-content">
<h4>Chinese Academy of Science</h4>
<p>It is a summer intern after graduation, and I was working for
professor Xiangliang Xu. I helped him design two website for
presenting analysis maps and field photos.</p>
</div>
</div> <!-- /timeline-block -->
</div> <!-- /timeline-wrap -->
</div> <!-- /col-twelve -->
</div> <!-- /resume-timeline -->
<div class="row resume-timeline">
<div class="col-twelve resume-header">
<h3>Education</h2>
</div> <!-- /resume-header -->
<div class="col-twelve">
<div class="timeline-wrap">
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-briefcase"></i>
</div>
<div class="timeline-header">
<h3>Master Degree</h3>
<p>Sept 2017 - Present</p>
</div>
<div class="timeline-content">
<h4>University of Minnesota</h4>
<p>I am a current graduate student of MGIS program.</p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-briefcase"></i>
</div>
<div class="timeline-header">
<h3>Bachelor Degree</h3>
<p>July 2015 - June 2017</p>
</div>
<div class="timeline-content">
<h4>University of Waterloo</h4>
<p>I majored in Geomatics and minored in Computer Science.
I also got the diploma of Excellence in GIS</p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-briefcase"></i>
</div>
<div class="timeline-header">
<h3>Bachelor Degree</h3>
<p>Sept 2013 - June 2017</p>
</div>
<div class="timeline-content">
<h4>Wuhan University</h4>
<p>I studied GIS in WU, and I applied to attend the 2+2 program
between WU and UW.</p>
</div>
</div> <!-- /timeline-block -->
</div> <!-- /timeline-wrap -->
</div> <!-- /col-twelve -->
</div> <!-- /resume-timeline -->
<div class="row resume-timeline" >
<div class="col-twelve resume-header">
<h3>Activities</h2>
</div> <!-- /resume-header -->
<div class="col-twelve">
<div class="timeline-wrap">
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Volunteer - Front Desk</h3>
<p>May 2016 - August 2016</p>
</div>
<div class="timeline-content">
<h4 id="remove">University of Waterloo Glow Center</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Volunteer - Salesclerk</h3>
<p>May 2016 - August 2016</p>
</div>
<div class="timeline-content">
<h4 id="remove">Environment Student Socity Non-profit Coffee Shop</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Volunteer - Office Support</h3>
<p>August 2015</p>
</div>
<div class="timeline-content">
<h4 id="remove">Wuhan Strawberry Music Festival - Office Support</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Vice-minister</h3>
<p>September 2013 - July 2015</p>
</div>
<div class="timeline-content">
<h4 id="remove">Dept. of Public Information of College Student Union at WHU</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-header">
<h3>Member</h3>
<p>Auguest 2014</p>
</div>
<div class="timeline-content">
<h4 id="remove">GIS Companies (Wuhan/Guangzhou) Investigations Team</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
</div> <!-- /timeline-wrap -->
</div> <!-- /col-twelve -->
</div> <!-- /resume-timeline -->
<div class="row resume-timeline">
<div class="col-twelve resume-header">
<h3>Awards & Certificate</h2>
</div> <!-- /resume-header -->
<div class="col-twelve">
<div class="timeline-wrap">
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-briefcase"></i>
</div>
<div class="timeline-header">
<h3>Excellent in GIS</h3>
<p>June 2017</p>
</div>
<div class="timeline-content">
<h4 id="remove">University of Waterloo</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
<div class="timeline-block">
<div class="timeline-ico">
<i class="fa fa-briefcase"></i>
</div>
<div class="timeline-header">
<h3>Entrance Scholarship</h3>
<p>July 2015</p>
</div>
<div class="timeline-content">
<h4 id="remove">University of Waterloo</h4>
<p><br id="hidebr"><br></p>
</div>
</div> <!-- /timeline-block -->
</div> <!-- /timeline-wrap -->
</div> <!-- /col-twelve -->
</div> <!-- /resume-timeline -->
</div>
</div>
</div>
<!-- Intro Section -->
<!-- work section -->
<section id="works" class="works section no-padding" style="padding-top:20px;background-color:#e5e5e5">
<div id="projectBanner">
<div class="container">
<div class="col-six tab-full">
<h3>Projects</h3>
</div>
</div>
<br>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class='slidesphoto' id="largewidth">
<img src="images/work-31big.JPG">
</div>
<div class='slidescontent'>
<h4>Groundwater Web App</h4><br>
<p>The groundwater project funded by DNR Serendipity Grant.
The Groundwater Web App was developed for academic support and dissemination proposes.</p>
</div>
</div>
<div class="mySlides fade">
<div class='slidesphoto'>
<img src="images/work-1big.jpg">
</div>
<div class='slidescontent'>
<h4>Quantitative Assessment and drone Data Processing</h4><br>
<p>Our investigation group supported USGIS to assess the condition of one constructed meander. The study area is the upstream of the relocated channel around intersection of county road H and I-35W.<br>
This was a group project of my master course, started from October 17, and ended at December 17.</p>
</div>
</div>
<div class="mySlides fade">
<div class='slidesphoto' id="largewidth">
<img src="images/work-2big.png">
</div>
<div class='slidescontent' id="norrowC">
<h4>Field Photo Exhibition, Downloading, and Uploading</h4><br>
<p>This website was created during my internship at the Chinese Academy of Science.<br>
The Field Map website was designed for field photo exhibition, downloading and uploading.</p>
</div>
</div>
<div class="mySlides fade">
<div class='slidesphoto' id="largewidth">
<img src="images/work-3big.png">
</div>
<div class='slidescontent' id="norrowC">
<h4>The Electronic Atlas of Analysis Maps at China-India Border</h4><br>
<p>This website was created during my internship at the Chinese Academy of Science.<br>
The electronic atlas website was designed to display of the analysis maps of the China-India border.</p>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" >❮</a>
<a class="next" >❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<br><br>
<div class="container-fluid" style="position:static">
<div class="row no-gutter">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a id = "project5" class="work-box"> <img src="images/work-31.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a id = "project4" class="work-box"> <img src="images/work-23.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a href="images/work-21big.png" class="work-box work-boxA"> <img src="images/work-21.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a id = "project3" class="work-box"> <img src="images/work-22.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a id = "project0" class="work-box"> <img src="images/work-1.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a id = "project1" class="work-box"> <img src="images/work-2.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a id = "project2" class="work-box"> <img src="images/work-3.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a href="images/work-4big.jpg" class="work-box work-boxA"> <img src="images/work-4.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<!-- <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a href="images/work-5big.jpg" class="work-box work-boxA"> <img src="images/work-5.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 work"> <a href="images/work-6big.jpg" class="work-box work-boxA"> <img src="images/work-6.png" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><i class="fa fa-search-plus fa-2x"></i></p>
</div>
</div>
</a> </div> -->
</div>
</div>
</section>
<!-- project model -->
<div class="modal" id="Model_project">
<span class="close">×</span>
<div class="modal-project">
<div class="PHeading">
<h3>Quantitative Assessment and drone Data Processing</h3>
</div>
<div class="projectcontent">
<div class="leftproject">
<h5>Description</h5>
<p>In the early 1900s, Rice Creek’s channel was straightened for agriculture purpose. However, without twists and turns, the water in the channel moves faster, which accelerates the erosion of steam bank and bed. To mitigate the issue, the Rice Creek Meander Restoration Project was carried out. Starting form 2015, new meanders have been constructed, and these constructed meanders were left there for one year with filling water to let vegetation establish.<br>
In addition, due to major road construction at the intersection of county road H and I-35W, Rice Creek channel around this section was relocated for road construction.<br>
Our investigation group supported USGIS to assess the condition of one constructed meander. The study area is the upstream of the relocated channel around intersection of county road H and I-35W. This was a group project of my master course, started from October 17, and ended at December 17.</p>
<br>
<h5>Methodology</h5>
<p> 1. We used the phantom 4 drone from DJI to collect geotagged-image. The drone collection plan was made on Pix4D Capture.<br>
2. Multiple processing tool including Pix4D, Drone Deploy, and Open Drone Map were utilized to reconstruct 3D models from geotagged-image.<br>
3. The accuracy of these three 3D models were assessed and compared.<br>
4. The Digital elevation model(DEM) generated using Pix4D and the pervious Lidar generated DEM from USGIS were used for change detection analysis.
</p>
<br>
<h5>Presentation</h5>
<p>This project was presented at Minnesota GIS/LIS conference</p>
<a href="images/project/1.6.jpg" class="work-box work-boxA"> <img style="float:left;width:40%;" src="images/project/1.6.jpg"></a>
</div>
<div class="rightproject">
<h5>Results</h5>
<a href="images/project/1.1.jpg" class="work-box work-boxA"><img src="images/project/1.1.jpg"></a><br>
<a href="images/project/1.2.png" class="work-box work-boxA"><img src="images/project/1.2.png"></a><br>
<a href="images/project/1.5.jpg" class="work-box work-boxA"><img src="images/project/1.5.jpg"></a>
<a href="images/project/1.3.png" class="work-box work-boxA"><img src="images/project/1.3.png"></a>
<a href="images/project/1.4.jpg" class="work-box work-boxA"><img src="images/project/1.4.jpg"></a>
</div>
</div>
</div>
</div>
<div class="modal" id="Model_project1">
<span class="close">×</span>
<div class="modal-project">
<div class="PHeading">
<h3>Field Photo Exhibition, Downloading, and Uploading</h3>
</div>
<div class="projectcontent">
<div class="leftproject">
<h5>Description</h5>
<p>This website was created during my internship at the Chinese Academy of Science.<br>
The Field Map website was designed for field photo exhibition, downloading and uploading. There is a database at the server side storing all the field photo and user information. The BaiduMap API was used here for mapping purposes, each mark on the map represents a field photo. The map is also linked to the information bar on the right hand. For example, if the photo category is changed on the information bar, the photos shown on map are changed accordingly. If I click one photo in the information bar, the map will zoom in to the photo and show the photo’s information. Besides, the marker cluster was generated to power up the website’s performance, right click function is added to solve the marker overlay issue; and the search function is also available in the website. The photo download page allows users to download the photos in the customized area from the database, and the upload page allow users to upload the image to the database.</p>
<br>
<h5>Link</h5>
<a href="http://www.resdc.cn/FieldPhoto/index.html">http://www.resdc.cn/FieldPhoto/index.html</a>
<br><br>
</div>
<div class="rightproject">
<h5>Result</h5>
<a href="images/project/2.1.png" class="work-box work-boxA"> <img src="images/project/2.1.png"></a>
</div>
</div>
</div>
</div>
<div class="modal" id="Model_project2">
<span class="close">×</span>
<div class="modal-project">
<div class="PHeading">
<h3>The Electronic Atlas of Analysis Maps at China-India Border</h3>
</div>
<div class="projectcontent">
<div class="leftproject">
<h5>Description</h5>
<p> This website was created during my internship at the Chinese Academy of Science.<br>
The electronic atlas website was designed to display of the analysis maps of the China-India border. BaiduMap API was used here for mapping purposes. The analysis map was transferred to a set of tiles using ArcGIS tile packages. And the tiles were used as the upper layer base map. <br>
The key feature of this website is that all the list content, drop-down menus, and navigation bar, can automatically update when the folder structure is changed at the server side. So, there is no need to change the HTML file when a new category is created or a new analysis map is added.</p>
<br>
<h5>Link</h5>
<a href="http://www.resdc.cn/border/index.html">http://www.resdc.cn/border/index.html</a>
<br><br>
</div>
<div class="rightproject">
<h5>Result</h5>
<a href="images/project/3.1.png" class="work-box work-boxA"> <img src="images/project/3.1.png"></a>
</div>
</div>
</div>
</div>
<div class="modal" id="Model_project3">
<span class="close">×</span>
<div class="modal-project">
<div class="PHeading">
<h3 style="font-size: 26px;">Compare Rolling Windows, EM, and HMM in AIS Fishing Activity Detection</h3>
</div>
<div class="projectcontent">
<div class="leftproject">
<h5>Description</h5>
<p>The objective of the project is to classify the fishing and non-fishing activities using AIS data,
which is meaningful because the results can be used to identify illegal fishing. Our main dataset was AIS,
which is a tracking system of the vessel. We also acquired fishing vessel data from Global Fish Watch to select trawlers from the AIS dataset. We implemented Rolling Windows,
Expectation–Maximization (EM), and Hidden Markov Model (HMM) models to classify the fishing and non-fishing activities and compared the performance of them. HMM model showed slightly better result in the content of our project.</p>
<br>
<h5>Methodology</h5>
<p></p>
<a href="images/project/4.1.png" class="work-box work-boxA"> <img style="float:left;width:95%;" src="images/project/4.1.png"></a>
<br>
</div>
<div class="rightproject">
<h5>Results</h5>
</div>
</div>
</div>
</div>
<div class="modal" id="Model_project4">
<span class="close">×</span>
<div class="modal-project">
<div class="PHeading">
<h3 style="font-size: 26px;">Building detection methods comparison of OBIA and CNNs</h3>
</div>
<div class="projectcontent">
<div class="leftproject">
<h5>Description</h5>
<p>Nowadays, Deep learning becomes the most popular topic in the scientific world, especially CNN, it totally changes the world of visual imagery analysis. Does it means deep learning methods, can outperform other traditional methods in all scenario?
Object detection of buildings on UMN campus is the scenario we examined for this project.
We applied OBIA and CNN on the same RS 4-band remote sensing image. OBIA mainly rely on empirical knowledge; while CNN rely on the data-trained model. After we got output from both OBIA and CNN, we compare two methods in the end.
</p>
<br>
<h5>Methodology</h5>
<p></p>
<a href="images/project/5.1.JPG" class="work-box work-boxA"> <img style="float:left;width:40%;" src="images/project/5.1.JPG"></a>
<br>
</div>
<div class="rightproject">
<h5>Results</h5>
<a href="images/project/5.2.png" class="work-box work-boxA"> <img src="images/project/5.2.png"></a>
<a href="images/project/5.3.png" class="work-box work-boxA"> <img src="images/project/5.3.png"></a>
</div>
</div>
</div>
</div>
<div class="modal" id="Model_project5">
<span class="close">×</span>
<div class="modal-project">
<div class="PHeading">
<h3 style="font-size: 26px;">Goundwater Web App</h3>
</div>
<div class="projectcontent">
<div class="leftproject">
<h5>Description</h5>
<p>
Due to the hidden and complex natures of groundwater, it is often undervalued by researches and the public. Groundwater is poorly understood yet desperately needs attention; in this circumstance, the Groundwater web app was developed for both academic support and dissemination proposes. The groundwater web app explains basic knowledge, visualizes the spatial-temporal information, and shows statistic and analytic results. Based on the currently existing data sources, the web app consists of 6 major sections: 1) Introduction, 2) Summary Charts, 3) Well Observation Data, 4) MPARS Data, 5) Other Analysis Maps, 6) Get Data.
</p>
<br>
<h5>Link</h5>
<a href="https://maps.umn.edu/mpars/index.html">https://maps.umn.edu/mpars/index.html</a>
<br><br>
</div>
<div class="rightproject">
<h5>Results</h5>
<a href="images/project/6.1.JPG" class="work-box work-boxA"> <img src="images/project/6.1.JPG"></a>
<a href="images/project/6.2.JPG" class="work-box work-boxA"> <img src="images/project/6.2.JPG"></a>
<a href="images/project/6.3.JPG" class="work-box work-boxA"> <img src="images/project/6.3.JPG"></a>
<a href="images/project/6.4.JPG" class="work-box work-boxA"> <img src="images/project/6.4.JPG"></a>
</div>
</div>
</div>
</div>
<!-- project model -->
<!-- work section -->
<!-- skills section -->
<section id="skills" class="skills section" style="padding:50px">
<div class="container" id="">
<div class="col-six tab-full">
<h3>Skills</h3>
<p>The following skill bars indicate my skill level.</p>
<ul class="skill-bars">
<li>
<div class="progress percent95"><span>95%</span></div>
<strong>ArcGIS</strong>
<br><p>ArcMap, ArcGIS Pro, ArcGIS Online, ArcGIS Collector</p>
</li>
<li>
<div class="progress percent80"><span>80%</span></div>
<strong>Remote Sensing</strong>
<br><p>ENVI, ERDAS</p>
</li>
<li>
<div class="progress percent85"><span>85%</span></div>
<strong>Web Mapping</strong>
<br><p>HTML, CSS, JavaScript, PHP, GoogleMaps API, BaiduMap API</p>
</li>
<li>
<div class="progress percent85"><span>85%</span></div>
<strong>Database</strong>
<br><p>SQL, Oracle, MySQL, SQL Server</p>
</li>
<li>
<div class="progress percent80"><span>80%</span></div>
<strong>Programming Language</strong>
<br><p>C, Python</p>
</li>
</ul> <!-- /skill-bars -->
</div>
</div>
</section>
<!-- skills section -->
<!-- footprint section -->
<section id="footprint" class="footprint section" style="padding-top:20px;padding-bottom:50px;background-color:#e5e5e5">
<div class="container" id="">
<div class="col-six tab-full">
<h3>Footprints</h3>
<p>View my footprints on the earth, click the marker to view my picture.</p>
<div id="3dmap" class="" style="width:100%; height:500px;">
</div>
</div>
</div>
</section>
<!-- footprint section -->
<!-- footer section -->
<section id="contact" class="section" style="padding-top:25px;padding-bottom:0px">
<div class="container" style="margin-top:23px">
<div class="col-six tab-full">
<h3>Contact Me</h3>
<form> <!--action="https://maker.ifttt.com/trigger/getemail/with/key/n5NtzRd9Y39ZAnPMxiecHyuOwBPhE8M0zOAEf8AtJOr" method="get" enctype="text/plain"-->
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="lname">Email</label>
<input type="text" id="email" name="email" placeholder="Your email..">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:100px"></textarea>
</form>
<button class="btn" id="ContactB">Submit </button><span id="demo"></span>
</div>
</div>
<br><br>
<footer class="footer">
<br>
<div class="container" style="text-align:center; background-color: #e5e5e5;">
<div class="col-md-4" style="float:left" id="reservefoot">
<p> University of Minnesota.<br>
Email : <a href="mailto:hello@floix.com"> xu000099@umn.edu </a></p>
</div>
<div class="col-md-4">
<p>© 2017 All rights reserved. All Rights Reserved<br></p>
</div>
<div class="col-md-4" style="float:right" id="reservefoot">
<h4>Social presense</h4>
<ul class="footer-share">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<br>
</footer>
<section>
<!-- footer section -->
<!-- JS FILES -->
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script-->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<!--script src="js/retina.min.js"></script-->
<script src="js/modernizr.js"></script>
<script src="js/main.js"></script>
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require(["esri/config"], function(esriConfig) {
esriConfig.request.corsEnabledServers.push("http://www.jiatengxu.com");
});
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/layers/support/Field",
"esri/geometry/Point",
"esri/renderers/SimpleRenderer",
"esri/symbols/PointSymbol3D",
"esri/symbols/IconSymbol3DLayer",
"esri/request",
"dojo/domReady!"
], function(Map, SceneView, FeatureLayer, Field, Point, SimpleRenderer, PointSymbol3D,
IconSymbol3DLayer, esriRequest) {
// Code to create the map and view will go here
var trunkRenderer = new SimpleRenderer({
symbol: new PointSymbol3D({ // PointSymbol3D is always used for point geometries
// add one symbol layer: Object symbol layers render point data as volumes
symbolLayers: [new IconSymbol3DLayer()]/*({
material: {
color: "brown" // make the tree trunks consistently brown
},
resource: { // use a cylinder primitive to simulate the shape of a tree trunk
primitive: "cylinder"
}
})]*/
}),
visualVariables: [{
// size each icon based on the airport's elevation
type: "size",
field: "ObjectID",
minSize: 10, // min size in pts
maxSize: 15, // max size in pts
minDataValue: 0,
maxDataValue: 15000
}, {
// shade each airport a different color based on its type
type: "color",
field: "ObjectID",
stops: [
// {
// value: 1,
// color: [252, 12, 245]
// },
// {
// value: 2,
// color: [83, 0, 244]
// },
{
value: 3,
color: [4, 245, 248]
}]
}]
});
// var features = [
// {
// geometry: new Point({
// x: -100,
// y: 38
// }),
// attributes: {
// ObjectID: 1,
// DepArpt: "KATL",
// MsgTime: Date.now(),
// FltId: "UAL1"
// }
// },
// {
// geometry: new Point({
// x: -77,
// y: 35
// }),
// attributes: {
// ObjectID: 2,
// DepArpt: "KZBW",
// MsgTime: Date.now(),
// FltId: "SW999"
// }
// },
// {
// geometry: new Point({
// x: -120,
// y: 40
// }),
// attributes: {
// ObjectID: 3,
// DepArpt: "WKRP",
// MsgTime: Date.now(),
// FltId: "Fever1"
// }
// }
// ];
var map = new Map({
basemap: "dark-gray",
//ground: "world-elevation",
//layers:[trunkLyr]
});
var view = new SceneView({
container: "3dmap", // Reference to the DOM node that will contain the view
map: map, // References the map object created in step 3
scale: 500000000, // Sets the initial scale to 1:50,000,000
center: [-120, 40] // Sets the center point of view with lon/lat
});
view.then(function() {
// Request the earthquake data from USGS when the view resolves
getData()
.then(createGraphics) // then send it to the createGraphics() method
.then(createLayer) // when graphics are created, create the layer
.then(createLegend) // when layer is created, create the legend
.otherwise(errback);
});
// Request the earthquake data
function getData() {
var url = "http://www.jiatengxu.com/map.geojson";
return esriRequest(url, {
responseType: "json"
});
}
function createGraphics(response) {
// raw GeoJSON data
var geoJson = response.data;
console.log(geoJson);
// Create an array of Graphics from each GeoJSON feature
return geoJson.features.map(function(feature, i) {
return {
geometry: new Point({
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
}),
// select only the attributes you care about
attributes: {
ObjectID: i,
url: feature.properties.url
}
};
});
}
function createLayer(graphics) {
trunkLyr = new FeatureLayer({
fields: [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "url",
alias: "url",
type: "string"
}],
objectIdField: "ObjectID",
geometryType: "point",
//spatialReference: { wkid: 4326 },
source: graphics,
renderer: trunkRenderer, // set renderer on layer
popupTemplate: { // autocasts as new PopupTemplate()
title: "{url}",
content: "<img src='images/footprint/{url}.jpg' onerror = \"this.src='images/footprint/{url}.JPG';this.onerror=null;\">"
}
});
map.add(trunkLyr);
return trunkLyr;
console.log("create layer success");
}
function errback(error) {
console.error("Creating legend failed. ", error);
}
});
// send email
var submitbtn = document.getElementById('ContactB');
submitbtn.onclick = function(){
var data = { 'value1': document.getElementById("name").value,
'value2' : document.getElementById("email").value,
'value3' : document.getElementById("subject").value};
var jsonsend = JSON.stringify(data);
$.ajax({
type: 'POST',
dataType: 'jsonp',
data: data,
//jsonp:false,
//jsonpCallback:function(){ alert('boo'); },
url: "https://maker.ifttt.com/trigger/getemail/with/key/n5NtzRd9Y39ZAnPMxiecHyuOwBPhE8M0zOAEf8AtJOr",
success: function (result,status,xhr) {
document.getElementById("demo").innerHTML = result;
},
error: function (xhr,status,error) {
document.getElementById("demo").innerHTML = xhr.status + " " + xhr.statusText;
console.log(xhr);
}
});
/*
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
//xhttp.responseText;
//console.log(xhttp.responseText);
}
};
console.log(jsonsend);
xhttp.open("POST", "https://maker.ifttt.com/trigger/getemail/with/key/n5NtzRd9Y39ZAnPMxiecHyuOwBPhE8M0zOAEf8AtJOr", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
xhttp.send(jsonsend);
*/
}
</script>
</body>
</html>