佛山南海地区GIS项目

作者：马光佳
本次任务完成时间：2018.12.21-2019.1.19
开发工具与关键技术：MicrossftVisualStudio，GIS

一、登录界面
输入正确的登录名称和密码，点击登录方可进入主页面，输入错误的登录信息，有提示框提示错误

二、主页面
主页面显示地图，
完成的功能模块：图层管理、查询搜索、周边分析、工具箱（测距离、测面积、圆选、框选、自定义选、清除图层）

三、查询搜索
查询搜索可以进行模糊查询，也可以进行条件查询；
操作流程：
模糊查询=》在input文本里输入该地区的一个名称或者一个字，点击查询，查询出的结果会显示文本框下面被隐藏的盒子里，选择自己想要查询的地址，选中点击，该地址就会在地图上标记出来，并且弹出地址的详细信息，如下图所示：
条件查询=》在select下拉框里选择自己要查询的条件，点击查询，该条件信息的数据都会显示出来，然后再选中需要查询的地点，点就会在地图上标记出来，如图下：

四、周边分析
操作流程：
查询按钮：点击选择按钮可在地图上任意选择一个点作为周边查询的中心点数据，半径默认为20000米，可编辑，勾选需要查询的数据，点击更多>>显示更多的数据条件出来，勾选好需要查询的数据后，点击查询，地图会圈出一个半径为20000米的圆，圆里面会显示勾选中的数据信息标记，点击图标，弹出该地点的详细信息；
重置按钮：是重新选择中心点，并且清空上一次的操作数据；
清除按钮：是清除所有上一次的操作，并且无法再进行选择中心点；

五、图层管理
操作流程：
图层管理的数据是针对整个地图上的数据；
点击图层显示图层数据，勾选医院分布图，地图就会显示该地区的所有医院位置出来，点击图标显示详细信息，清除勾选，数据就在地图上消失；

六、测距离
点击该图标，可以在地图上任意选取点，选取最后一个点时，双击鼠标左键，方可出现下图的标示，每一个点显示的距离都是离起点的距离

七、测面积
点击侧面积按钮，在地图上选择三个以上的点进行操作，在最后一个点时，双击鼠标左键，将弹出面积的信息提示框；

八、圆选查询医务
点击圆选按钮，在地图上任意选择一个点按住鼠标左键往外拉，形成一个需要查询的面积圆后，松开鼠标即可查询到圆选内的医院数据信息，点击图标显示详细信息；点击清除按钮，就可以清除图层的所有数据；
九、框选查询村庄
点击框按钮，在地图上选择一个点，按住鼠标左键，往外拉，松开松开即可查询到框选的村庄数据，点击图表弹出详细地址信息
十、自定义选查询村庄
点击自定义按钮，在地图上选择三个以上的点进行操作，在最后一个点时，双击鼠标左键，将弹出选中面积的村庄数据，点击图标显示详细地址信息数据

十一、工具箱
点击工具箱按钮显示和隐藏其它图标，
工具箱可拖动，背景颜色还会无限循环的动画运动；鼠标放上去每个图标都会旋转360度，并且图标颜色也变化；

工具箱经典的代码：
结构的搭建：

<article id="article">
      <div class="title1" style="display:none " title="圆选医务站" onclick="drawGeometry1()" >
          <a class="jrerg tu"><i class="icon iconfont icon-zidingyi"></i></a>                       
      </div>
      <div class="title2" style="display: none " title="测面积" onclick="areaMeasure()" >
          <a class="haubuin tu"><i class="icon iconfont icon-cemianji"></i></a>
      </div>
      <div class="title3" style="display:none " title="测距" onclick="distanceMeasure()">
          <a class="jrerg1 tu"><i class="icon iconfont icon-ceju"></i></a>
      </div>
       <div class="title4" style="display:none "title="框选" onclick="drawGeometry5()">
          <a class="zaikai1 tu"><i class="icon iconfont icon-zidingyi2"></i></a>
      </div>
      <div class="title5" style="display:none" title="自定义框选村庄" onclick="drawGeometry2()">
          <a id="haubuin1" class="haubuin1 tu"><i class="icon iconfont icon-zidingyi1"></i></a>
      </div>
      <div class="title6" style="display:none" title="清除" onclick="clearFeatures()">
          <a class="zaikai tu"><i class="icon iconfont icon-qingchu3"></i></a>
      </div>
      <div class="zongheanniu" title="工具箱">
          <a class="dibu1 tu"><i class="icon iconfont icon-zonghe2"></i></a>
      </div>
  </article>

背景动画变化的css样式：

 #article .title1,#article .title2,#article .title3,#article .title4,#article .title5,#article .title6 {
   height: 60px;
    width: 60px;
    border-radius: 50%;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;            
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    background: linear-gradient(45deg,rgba(111, 199, 181, 0.72) 0%,rgba(19, 189, 206, 0.72), 20%,rgba(0, 148, 217, 0.72) 40%, rgba(90, 54, 148, 0.72) 60%, rgba(238, 77, 116, 0.72) 80%, rgba(245, 140, 88, 0.72) 100%);
    background-size: 400%;
    background-position: 0% 100%;
    animation: gradient 7.5s ease-in-out infinite;
}
 @keyframes gradient {
    0% {
        background-position: 0% 100%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}

十二、项目开发总结
学习GIS课程一个星期，老师就叫我们自己研发GIS项目，说真的，我一脸懵逼，无从下手；
第一阶段：我用了一个星期去搭建项目的页面，然后不知道做什么了，看到很多人都完成不少的功能模块，瞬间压力来了；
第二阶段：逐渐去看代码，找思路，询问同学的帮助；大概用了四天，有逐渐想放弃的想法；
第三阶段：领悟成功，静心思考完成了工具箱的所有功能；
第四阶段：又卡在查询搜索功能模块，用了两天时间思考，完成了查询搜索功能，从放弃过无数次，但还是学下去；
第五阶段：一样卡在周边分析功能模块，不放弃的精神，用了一个星期完成周边分析的功能模块；
GIS项目的研发让我悟懂了一个道理：“只要坚持去做，就一定会做出来”，从一开始的一脸懵逼到现在能完成多个功能的我；虽然代码很多都不了解是什么意思，但只要自己坚持去研究，总是会能明白一些关键所在的；不管是做项目还是课后练习，我觉得我们同学之间需要多交流，一个人的研究是比不上多人的研究，只有交流，我们才会领悟得更加快；实施个人开放，那么你离成功将不远了；