《广州市越秀区慢性病地理信息系统》项目研发阶段性总结

作者：李永健
撰写时间：2019年 1月19日
本次任务完成时间：2018年12月24日～2019年1月12日
开发工具与关键技术：SuperMap iDesktop、SuperMap iServer、SQL Server、C#MVC、Visual Studio
完成模块功能：个人资料、区域定位、查询搜索、周边分析、工具箱、图层管理器

一、 功能实现

1、登录页面如下：

2、首先来看一下主页面如下图：

3、可以通过点击左菜单栏字段在地图上显示它的具体位置

4、查询搜索是先通过类型来筛选后通过关键字来筛选查询出具体的数据，最后点击定位找到他位置

5、周边查询：点击选择用鼠标在地图上获取他一个中心点，默认半径为500、然后提选需要查询
的类型，点下面查询，它就会把圆圈里面的对应的点查出来，还在右边的周边分析详情展示出
所查出来的单位名称，点击某条单位名称会对应显示它的详细信息。

6、鼠标放到右边小图标会出现图层管理器，提选需要的分布图就会在地图上显示所有对应的点，点击该点
就会弹出对应的详细信息

7、工具箱里面的测距、测面积、圆选、方选、自定义选如下：
7.1 点击测距离，鼠标箭头加了一个小圆圈，在地图上任意点一下鼠标左键,就可以定起点,然后拖动鼠标到其他一点,再点击就可以再一个点。直到双击鼠标 就可以结束，并且自动测距离,展示以米为单位的距离。

7.2面积测量
点击测面积 。可以在地图上,任意地方点击,起点,然后随着这个点,围绕起来点击，就可以点出一个面的情况,最终双击鼠标左键结束画面。自动测量出距离。
7.3圆型区域查询
点击圆框选,鼠标没有任何变化,然后鼠标移到任意一个地方,要按住鼠标，以按住鼠标的这个位置起,鼠标往上移动,或者往下移动(不能松鼠标);然后松鼠标就结束了圆框选,把圆框里面的医院给查询出来。

方选、自定义选与圆选操作类似。

8、点击右上角出现下拉框选择个人资料可以弹出一个修改个人资料的模态框进行修改操作，在这界面中，输入框为灰色的输入框是不允许编辑的，只可读，不为灰色的可以进行编辑。

二、经典代码

function addLayer() {   // 向Map中添加图层    图层管理器
            hospitalLayer = new SuperMap.Layer.Markers("医院分布图", { visibility: false });          
            map.addLayers([layer, hospitalLayer]);//顺序决定
            map.setCenter(new SuperMap.LonLat(113.271729484425, 23.1341387890000), 0);
            AddLayerData();
            //添加图层数据          
        };
        function AddLayerData() {
            addhospitalLayer();
            addclublayer();
            addpharmacylayer();
            //createHeatPoints()
        }
        function addhospitalLayer() {         
            //声明字段
            var queryParam = [], queryBySQLParams, queryBySQLService;
            queryParam.push(new SuperMap.REST.FilterParameter({ name: "P15医疗服务[email protected]越秀区#1", attributeFilter: "TYPE = 7200" }));
            //SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。
            queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
                queryParams: queryParam//查询过滤条件参数数组
            });
            //SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。
            queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {//url 服务的访问地址
                eventListeners: { "processCompleted": processCompleted_YY }
            });
            //传递到服务端
            queryBySQLService.processAsync(queryBySQLParams);

        }
        function processCompleted_YY(queryEventArgs) {
            //console.log(queryEventArgs);
            var i, j, len, result = queryEventArgs.result;
            if (result && result.recordsets) {
                for (i = 0, recordsets = result.recordsets, len = recordsets.length; i < len; i++) {
                    if (recordsets[i].features) {
                        for (j = 0; j < recordsets[i].features.length; j++) {
                            var feature = recordsets[i].features[j];
                            var point = feature.geometry;
                            //console.log(feature);
                            if (point.CLASS_NAME == SuperMap.Geometry.Point.prototype.CLASS_NAME) {
                                var size = new SuperMap.Size(22, 22),
                                offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                                icon = new SuperMap.Icon("/Content/content/images/tool/医疗.png", size, offset),
                                marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);
                                marker.TypeName = "医院";
                                marker.NAME = feature.attributes.NAME;
                                marker.ADDRESS = feature.attributes.ADDRESS;
                                marker.TELEPHONE = feature.attributes.TELEPHONE;
                                //console.log(marker);
                                marker.events.on({
                                    "click": openInfoWin_YY,
                                    "touchstart": openInfoWin_YY,  //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                                    "scope": marker
                                });
                                hospitalLayer.addMarker(marker);
                            } else {
                                feature.style = style;
                                polygonLayer.addFeatures(feature);

                            }

                        }
                    }
                }
            }
        }

        function openInfoWin_YY(queryEventArgs) {
            closeInfoWin();
            var maker = this;
            console.log(maker);
            var X = maker.getLonLat().lon;
            var Y = maker.getLonLat().lat;
            var TypeName = maker.TypeName;
            var NAME = maker.NAME;
            var ADDRESS = maker.ADDRESS;
            var TELEPHONE = maker.TELEPHONE;

            if (ADDRESS == null || ADDRESS == "") {
                ADDRESS = "无"
            }
            if (TELEPHONE == null || TELEPHONE == "") {
                TELEPHONE = "无"
            }
            var TypeID = 1;
            if (TypeName == "医院") {
                TypeID = 1;
            }
            if (TypeName == "社康") {
                TypeID = 2;
            }
            if (TypeName == "药店") {
                TypeID = 3;
            }
            if (TypeName == "病例") {
                TypeID = 4;
            }

            var contentHTML = "<div style='font-size:12px;color:#222;max-width:500px;word-break: break-all;margin:0px auto;padding-left: 5px;'>" +
                //"<i class='i'></i>" +
                "<div style='padding-top:5px;'>" +
                    "<b>所选类型：</b>"
                    + TypeName +
                "</div>" +
                //"<i class='i'></i>" +
                "<div style='padding-top:5px;'>" +
                    "<b>医院名称：</b>"
                    + NAME +
                "</div>" +
                //"<i class='i'></i>" +
                "<div style='padding-top:5px;'>" +
                    "<b>医院地址：</b>"
                    + "广州市越秀区" + ADDRESS +
                "</div>" +
               //"<i class='i'></i>" +
                "<div style='padding-top:5px;'>" +
                    "<b>联系电话：</b>"
                    + TELEPHONE +
                "</div>" +
                "<div style='padding-top:15px;text-align:center;'>" +
                   "<button type='button' style='background:#1f94bc;color:#fff;padding:10px;border-radius:5px;font-size:14px;font-weight:600;' onclick='AmbitusQuery(" + TypeID + "," + X + "," + Y + ")'>周边查询</button>"
            "</div>" +
        "</div>";

            var size = new SuperMap.Size(0, 33);
            var offset = new SuperMap.Pixel(0, -size.h);
            var icon = new SuperMap.Icon("/Content/Icon/医疗.png", size, offset);
            var popup = new SuperMap.Popup.FramedCloud("popwin",
                    new SuperMap.LonLat(X, Y),
                    null,
                    contentHTML,
                    icon,
                    true);

            infowin = popup;
            map.addPopup(popup);

        }

三、开发总结

首先来分享一下操作流程：先去安装一个SuperMap iDesktop 9D或者SuperMap iDesktop 8C都是可以的，区别在于前者不稳定经常会出现大红叉而后者较稳定但是画质一般般，首先我们使用它来制作一个地图，美观都靠自己去筛选，制作完用iserver软件启动到浏览器去发布一下自己制作的地图即可，再到View请求地图的地址，就可以在页面显示地图了和其他功能的操作。这次GIS项目让我学习了不少新的知识点，并也提高了自己的自主学习能力，特别是在编辑功能时，当时真不知如何下手，因为没有接触过任何的GIS项目练习，当时真的有点慌，当是没事稳住，自己就在SuperMap iClient for JavaScript Help这个软件上寻找资料、案例来协助自己也通过外部寻找一些实例结合，就慢慢找到了感觉，逐渐有了信心。也在SuperMap iDesktop 9D里面知道了不少基本概念、操作，列如数据集保存在数据源里、数据源又保存在工作空间里，阶级保存关系，在SQL中数据源相当一个数据库等等….