《深圳龙岗区慢性病地理信息系统》项目实训阶段性总结一

版权声明：本文为博主思不良原创文章，转载请注明出处。 https://blog.csdn.net/weixin_44566320/article/details/86546563

开发工具与关键技术 Visual Studio 2015 C# ASP.NET MVC SuperMap GIS iClient 8C for JavaScript 树形插件ztree v3.5.30
作者 王雅思
撰写时间 2019-01-18
完成模块功能 图层管理器–医院图层 图层管理器–社康图层 图层管理器–药店图层

一、 功能实现

1、图层管理器–医院图层

主要包括：

医院图层的加载，
图层要素点的信息显示及其周边查询，
以及将查询结果以树形图的方式显示
还有点击树形图节点在地图上相应得显示出弹窗

1.1图层加载：见下图图1，是项目的主界面。

图1 主页面

点击图1点击勾选地图右上角的图层管理器的“医院分布图”，图层可见性改变，调用方法进行SQL查询，查询成功后，将查询结果在地图标记显示。如下图图2：

图3 弹窗

点击弹窗内的“周边查询”按钮，将该标记的坐标回填到左侧导航栏的“周边查询”下对应的文本框内，选择半径，勾选需要查询的类目，点击查询按钮进行查询。如下图图4：

图4 周边查询

点击查询后，地图上会显示出一个以选中标记点的坐标为原点，以选择的半径为半径，创建出来的一个圆形区域图，查询的结果将会以树形图的方式显示在地图右侧。如下图图5：

图5 圆形区域图、树形图

点击树形图的子节点，会在地图上相应地弹出该节点的信息弹窗。见下图图6：

图6 树形节点弹窗

2、图层管理器–社康图层

主要内容与“医院图层”相同，但比医院图层在内容上多了一项内容：如下

2.1 点击勾选地图右上角的图层管理器的“社康分布图”，图层可见性改变，调用方法进行SQL查询，查询成功后，将查询结果在地图标记显示。

2.2 点击地图上的标记，会相应地显示弹窗，弹窗内显示出标记的一些信息。

2.3 点击弹窗内的“详细信息”按钮，将查询该标记的详细信息，结果会显示在地图的右侧。
如下图，图7：

图7 详细信息

2.4 点击弹窗内的“周边查询”按钮，将该标记的坐标回填到左侧导航栏的“周边查询”下对应的文本框内，选择半径，勾选需要查询的类目，点击查询按钮进行查询。如下图，图8：

图8 社康-周边查询

3、图层管理器–药店图层

主要内容与“医院图层”相同，请参考“1、图层管理器–医院图层”。如下图，图9

图9 药店-周边查询

二、相关业务表和关系

均为SuperMap 地图数据，暂无业务表和关系

三、经典代码

声明数组，循环查询结果，将结果以树形图的数据结构方式添加进数组，然后配置树形图

// //树形图数据结构，例子中是标准数据格式 此为例子
        //var ztreeData = [
        //       { id: 1, pId: 0, name: "查询结果", open: true },
        //       { id: 11, pId: 1, name: "父节点 1", open: true },
        //       { id: 12, pId: 1, name: "父节点 2", open: true },
        //       { id: 13, pId: 1, name: "父节点 3", open: true },
        //       { id: 21, pId: 11, name: "子节点 2-1" },
        //       { id: 22, pId: 11, name: "子节点 2-2" },
        //       { id: 23, pId: 12, name: "子节点 2-3" },
        //       { id: 31, pId: 12, name: "子节点 3-1" },
        //       { id: 32, pId: 13, name: "子节点 3-2" },
        //       { id: 33, pId: 13, name: "子节点 3-3" }
        //];

代码 参考了 ztree API 以及 SuperMap iClient for JavaScript Help.chm
下面的查询结果调用方法根据 SuperMap 里面 SQL 查询后的查询结果的数据结构所写
代码结合参考了 ztree API 以及 SuperMap iserver里的示范程序
链接:
SuperMap iserver 8C 示范程序
zTree v3.5.38 API

        var ztreeData = [{ id: 1, pId: 0, name: "查询结果", open: true }];//树形数据
        //查询成功调用方法
        function processCompleted(queryEventArgs) {
            var i, j, feature, result = queryEventArgs.result;//声明参数
            features_Point = [];

            ztreeData.splice(1);//清空树形数据
            var fNodeID = 11;//父级ID
            var fsNodeID = 101;//子级ID
            var fNodeIDRecord = 0;//父级记录ID

            if (result && result.recordsets) {//如果查询结果有数据
                for (i = 0; i < result.recordsets.length; i++) {//循环查询结果的记录集
                    if (result.recordsets[i].features) {//如果查询结果的记录集中有要素数据       
                        if (result.recordsets[i].features.length > 0) {//如果查询结果中的记录集的要素数据的长度大于0
                            var datasetName = (result.recordsets[i].datasetName);//获取查询结果的记录集的图层名称

                            if (datasetName == "P医院_point@Szlg_Data#1") {//if判断,相对应添加父节点数据
                                var fNodeData = { id: fNodeID, pId: 1, name: "医院", open: true };//声明父节点数据
                                //                id: 父ID     pId: 父ID  节点名称：类型名称 ,open：节点是否展开       
                                ztreeData.push(fNodeData);//将父节点数据添加进数组
                                fNodeIDRecord = fNodeID;//记录父节点ID
                                fNodeID++;//父节点自增
                            }
                            else if (datasetName == "P社康_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "社康", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P药店_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "药店", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P17公司企业_point@Szlg_Data#2") { var fNodeData = { id: fNodeID, pId: 1, name: "公司企业", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P16科研教育_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "科研教育", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P19住宅小区_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "住宅小区", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P13宾馆酒店_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "宾馆酒店", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P21餐饮服务_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "餐饮服务", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P12零售行业_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "零售行业", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P14休闲娱乐_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "休闲娱乐", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P22汽车服务_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "汽车服务", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P18公园广场_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "公园广场", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P26公共厕所_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "公共厕所", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P27港口码头_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "港口码头", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P04汽车站_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "汽车站", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else if (datasetName == "P03火车站地铁站_point@Szlg_Data#1") { var fNodeData = { id: fNodeID, pId: 1, name: "火车站地铁站", open: true }; ztreeData.push(fNodeData); fNodeIDRecord = fNodeID; fNodeID++; }
                            else { var fNodeData = { id: fNodeID, pId: 1, name: "其它", open: true }; ztreeData.push(fNodeData); fNodeID++; }

                            for (j = 0; j < result.recordsets[i].features.length; j++) {//循环查询结果中的记录集的数据
                                feature = result.recordsets[i].features[j];
                                feature.style = style_Point2;
                                if ((feature.geometry.x == search_X && feature.geometry.y == search_Y)) { feature.style = style_Point; }
                                features_Point.push(feature);

                                //添加子节点         
                                var sNodeData = { id: fsNodeID, pId: fNodeIDRecord, name: feature.data.NAME };
                                //                 id:  子ID    pId:  父ID（记录ID）  节点名称：矢量数据的数据的Name值         
                                ztreeData.push(sNodeData);//添加数据进树形数据数组
                                fsNodeID++;//子节点ID自增
                            }
                        }
                    }
                }
            }
            vectorLayer_Circle.addFeatures(features_Point);//向矢量图层添加矢量数据
            select_Circle.activate();//激活控件
            window.parent.showZtree(ztreeData);//调用父页面的方法，将树形数据数组传递过去
        }

四、开发总结

这次这个“周边查询”功能，结果使用到树形插件 ztree 进行配置树形图，使我对树形插件的使用更加熟练，对树形图数据的结构的了解进一步加深。

此次使用树形图，消耗的时间并不长，也是因为在此之前有过使用过树形插件ztree 的经历。

那是在C# 控制器中查询数据库的数据，返回json数据到页面，由页面写js进行配置树形图。那时就对树形图的数据结构有了一定的了解，虽然了解并不深，但也使这次去配置树形图的难度没有那么大，而此次的树形图的配置使用也使我对树形插件ztree的使用更加的熟练，对树形图数据的结构的了解进一步加深。

由此，我深刻的意识到，插件，在做项目前使用的次数越多、了解越深，对日后的项目帮助越大；代码敲的次数越多，越熟练，对于日后的代码编写帮助越大；对插件了解越多，对于项目的某些相关功能的实现帮助越大；所以在此之后，我要努力学习认识更多的插件，敲更多有效果的代码，学习更多的知识，为日后做项目打基础，为我的未来打好基础，努力向前奋斗！

感谢您的浏览。