GIS项目研发总结

《海珠区慢性防治系统》项目研发阶段性总结

作者:华境聪
本次任务完成时间:2018年12月22日~2019年1月16日
完成模块功能:前台【图层管理{医院、社康、药店】、后台【修改资料、密码、数据管理】

一. 功能实现

图层管理主要包括医院、社康、药店的功能模块。

医院分布图:见图1,实现界面。

GIS项目研发总结_第1张图片

                                   图1  医院分布图

点击图1“选择”按钮获取中心点的界面如图2,GIS项目研发总结_第2张图片

                                   图2 周边查询信息

单击查询按钮获取中心点和半径的数据以及查询目标的数据,绘制圆形查出相关范围的药店,并在右侧显示出来,如图2。
社康分布图:见图3,实现界面。GIS项目研发总结_第3张图片

                                   图3  社康分布图

点击图3“选择”按钮获取中心点的界面如图4,GIS项目研发总结_第4张图片

                                   图4 周边查询信息

单击查询按钮获取中心点和半径的数据以及查询目标的数据,绘制圆形查出相关范围的药店,并在右侧显示出来,如图4。GIS项目研发总结_第5张图片

                                   图5 详细信息

单击详细信息按钮,查询相关信息,在右侧显示出来,如图5。
药店分布图:见图6,实现界面。GIS项目研发总结_第6张图片

                                   图6  药店分布图

点击图7“选择”按钮获取中心点的界面如图7,GIS项目研发总结_第7张图片

                                   图7 周边查询信息

单击查询按钮获取中心点和半径的数据以及查询目标的数据,绘制圆形查出相关范围的医院,并在右侧显示出来,如图7。

数据管理主要包括导出、导入的功能模块。

后台菜单管理:见图8,实现界面。

登陆页面 可见下图

                                   图17  登陆页面

GIS项目研发总结_第8张图片

                                   图8  菜单列表图

点击图8“尖号”按钮弹出模态窗个人资料界面如图9,GIS项目研发总结_第9张图片

                                   图9 个人资料信息

单击“确认修改”即可完成修改信息操作
单击 图9“修改密码”弹出模态窗修改密码界面如图10,GIS项目研发总结_第10张图片

                                   图10 修改密码界面

单击“确认修改”即可完成修改信息操作注:判断原始密码正确和两次输入新密码的正确

数据管理主要导入、导出的功能模块。
见图11,实现界面GIS项目研发总结_第11张图片

                                  图11 数据管理导入导出

单击 “数据导入”按钮,选择导入模块后,点击选择文件Excel类型文件,见图12GIS项目研发总结_第12张图片

                               图12 选择导入模板

选择文件后跳转图13,查看数据GIS项目研发总结_第13张图片

                                图13 查看数据信息

点击“开始上传数据”按钮保存数据到数据库
数据管理页面,可见图14GIS项目研发总结_第14张图片

                                图14 数据管理页面

选择导出模板后。点击模板导出,见图15GIS项目研发总结_第15张图片

                                 图15 模板导出

再点击模板导出,即可导出到Excel表格,可见图16GIS项目研发总结_第16张图片

                                图16 导出数据图

二. 经典代码

自定义圆形代码:

  var map, local, layer, 
  url = "http://localhost:8090/iserver/services/map-Zhuhaimap/rest/maps/County_R@Zhuhai";
  function init() {
            //初始化地图
            map = new SuperMap.Map("map", {
                control: [
                       new SuperMap.Control.PanZoomBar(),//平移缩放控件
                       new SuperMap.Control.ScaleLine(),//比例尺控件
                       new SuperMap.Control.Navigation(),//鼠标拖拽控件
                       new SuperMap.Control.LayerSwitcher(),//图层控件
                       new SuperMap.Control.MousePosition()//鼠标移动获取地理坐标
                ], 
            });
            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("海珠地图", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
            //监听图层信息加载完成事件
            layer.events.on({ "layerInitialized": addLayer });
            klialin = new SuperMap.Layer.Vector("周边分析图层", { displayInLayerSwitcher: false });
            markerLayer = new SuperMap.Layer.Markers("图标", { displayInLayerSwitcher: false });//标记层
            //获取坐标
            draw = new SuperMap.Control.DrawFeature(klialin, SuperMap.Handler.Point);//查询多变形
            draw.events.on({ "featureadded": drawCom });//使用on()接口监听事件
            //添加控件
            map.addControl(draw);
            map.addControl(new SuperMap.Control.LayerSwitcher());//图层
            map.addControl(new SuperMap.Control.ScaleLine());//比例尺
        }
          //异步加载图层
        function addLayer() {
            map.addLayers([layer, markerLayer, klialin]);
            map.setCenter(new SuperMap.LonLat(12616179.7635450009, 2641804.5424003000), 0);
        }
   $("#btnchaxun").click(function () {
            klialin.removeAllFeatures();
            markerLayer.clearMarkers();
            var kl = $("input[name='yiban']:checked")
            if ($("#zxdwbk").val() == "" || kl.length == 0) {
                alert('请选择中心点或者查询目标!')
                klialin.removeAllFeatures();
                markerLayer.clearMarkers();
            } else {
                $("#ZHZSrightban1").addClass("none");
                $("#ZHZSrightban").removeClass("none");
                    var li = $("#zxdwbk").val().split("-")[0];
                    var ijn = $("#zxdwbk").val().split("-")[1];
                    var chen_centerPoint = new SuperMap.Geometry.Point(li, ijn);//用来生成线串的点数组
                    var rou = $("#bjwbk").val();//半径
                    var polygon = SuperMap.Geometry.Polygon.createRegularPolygon(chen_centerPoint, rou, 360, 360);//实例化多边形
                    var circleVector = new SuperMap.Feature.Vector(polygon);//矢量数据集
                    circleVector.style = {
                        strokeColor: "#3f7ee5",
                        fillColor: "#ccc",
                        strokeWidth: 2,
                        fillOpacity: 0.3,
                        strokeOpacity: 0.5
                    };
                    klialin.addFeatures(circleVector);
                    map.zoomToExtent(circleVector.geometry.bounds);//缩放到指定范围,重新定位中心点。
                    circleselect(circleVector);
        }    
        })

三. 开发总结(不少于500字)

做一个GIS系统,首先要设计好所需要的地图和基础数据库,然后将地图发布到iServer里面去,在你的项目中引用SuperMap插件,设计好显示地图所需要的方法,然后,再你的地图上添加一些矢量图层和控件,构造一些方法,利用数据库将数据传到地图去,让地图更加完美呈现你所需要的功能效果。
对于第一次接触GIS项目的我来说,是充满挑战的。首先,自己对所要接触的代码,不熟;第二,对所需要实现的功能,初次感到困难重重;第三,规定完成项目的时间,比较短。对于初次接触GIS项目的我们,只能通过老师所发的SuperMap iClient forJavaScript HelpSuper指导文档去找到自己所要用到的方法,了解其中含义。为了让自己的项目做更好,而不断的去寻找一些令人感到头痛方法,人们都说“过程是痛苦的,结果是美好的”,正是因为这么一句话,我们才会不断探索,让自己的技术成长起来;事情不是一帆风顺的,也许,我们会在寻找真正的出口时,迷失方向;也许,我们会在看似充满荆棘的道路上,踌躇不前;也许,我们会在充满迷雾的岔道上,原地打转;但是,我们不应感到气馁,不应感到恐惧,更不应放弃;只有勇敢地迈出坚实的那一步,就算经历的挫折,也要勇敢面对,才会明白其中的秘密。或许,在一些比较聪明的人看来,这是多么简单的方法,为什么还会做不出来呢?这个就是,我们和他们的区别,只有经历更多的人才会开发更多道路出来,因为成功的方法不只一种。

你可能感兴趣的:(项目研发)