《深圳市宝安区GIS》项目研发阶段性总结

一、功能实现
说明：主要是对该地区的医院分布进行查询，利用图标显示在地图上，可查看医院的详细信息，点击“周边分析”可以进行周边查询。
1、 首先要加载地图，再创建图层标记类，然后添加图层到地图上

图1
2、 勾选医院分布图层管理，在地图上显示医院图标，在你查询的范围内显示，也就是根据你查询的条件查询出相应的地理位置，并加以显示。注意在查询的过程中，难免会出现一些小错误，比如图层名称的格式：数据集名称@数据源别名，这里还有一点就是它是否为你设置专题图的那个别名（如P15医疗服务_point@BaoAnQu#1），我们有时就会忽略“#1”，因此就不会显示在地图上；SQL查询服务类，说的是在一个或多个指定的图层上查询符合SQL查询条件的空间地物信息，所以在你的指定的查询范围内给出合理的条件，通过监听事件来触发它查询成功的方法，或是失败时的方法，再通过异步加载出来（如图2）

图2
3、 点击图标，查看医院详细信息。在SQL查询成功的方法中注册一个点击事件，弹出它的详细信息，在弹出框里写你需要显示的内容，以及想要的样式（如图3）

图3
4、 点击周边分析，中心点数据回填，可进行周边查询。我们在弹窗的详细信息中，设置所在位置的坐标轴，在弹窗中显示，当点击周边分析按钮时，坐标回填到中心点文本框，再选择你要查询的目标，点击查询，就可以进行周边查询了。 （如图4）

图4
二、相关代码
UIL层代码：

  var map, layer, heatMapLayer, markerHospital
  url = "http://localhost:8090/iserver/services/map-ShenZhenBaoAnQu/rest/maps/深圳宝安区@BaoAnQu";
  
    function init() {
        map = new SuperMap.Map("map", {
            controls: [
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.PanZoomBar(),//平移缩放类。 用于平移缩放地图，默认情况下垂直显示在地图左上角。
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
        });
        map.addControl(new SuperMap.Control.MousePosition());
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("BaoAnQu", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
        //初始化标记图层类(创建图层)
        markerHospital = new SuperMap.Layer.Markers("医院分布图层管理", { visibility: false });//SuperMap.Layer图层类。SuperMap.Layer.Markers标记图层类
        layer.events.on({ "layerInitialized": addLayer });
    }
    
    //添加图层  异步加载
    function addLayer() {
        map.addLayers([layer,markerHospital]);
        map.setCenter(new SuperMap.LonLat(0, 0), 0);
        queryBySQL();
    }
    
    //SQL查询
    function queryBySQL() {
        var queryParam, queryBySQLParams, queryBySQLService;
        // 初始化查询参数
        queryParam = new SuperMap.REST.FilterParameter({
            name: "P15医疗服务_point@BaoAnQu#1",
            attributeFilter: "TYPE=7280 and NAME like '%医院%'"//属性过滤条件  相当于 SQL 语句中的 WHERE 子句
        }),
        // 初始化sql查询参数
        queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
            queryParams: [queryParam]
        }),
        // SQL查询服务
        queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
            eventListeners: { "processCompleted": processCompletedHospital, "processFailed": processFailedHospital }
        });
        queryBySQLService.processAsync(queryBySQLParams);

    }
    
    //SQL查询(医院)成功时触发此事件
    function processCompletedHospital(obj)//在地图上显示医院站点地标
    {
        var result = obj.result;
        var feature, x, y;//Feature 类同时具有 marker 和 lonlat 属性
        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++) {
                        feature = recordsets[i].features[j];//SuperMap.Feature 要素类组合了地理和属性，Feature 类同时具有 marker 和 lonlat 属性 
                        x = feature.geometry.x;
                        y = feature.geometry.y;
                        size = new SuperMap.Size(17, 20),
                        offset = new SuperMap.Pixel(-(size.w / 2), -size.h);//SuperMap.Pixel此类用x,y坐标描绘屏幕坐标（像素点）。
                        icon = new SuperMap.Icon("../Content/images/yiyanlogin.png", size, offset);
                        LocalMarker = new SuperMap.Marker(new SuperMap.LonLat(x, y), icon);//SuperMap.Marker标记覆盖物，对地图上的点进行标注，可以自定义选择标注的图标，需添加到 Markers 图层上显示 
                        LocalMarker.name = feature.data.NAME;//医院名称
                        LocalMarker.laction = "广东省深圳宝安区" + feature.data.ADDRESS;//医院地址 
                        //添加到图层上
                        markerHospital.addMarker(LocalMarker);
                        //注册 click 事件,触发 mouseClickHospital()方法
                        LocalMarker.events.on({
                            "click": mouseClickHospital,
                            "touchstart": mouseClickHospital, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                            "scope": LocalMarker//范围
                        });
                    }
                }
            }
        }
    }
      
    //SQL查询(医院)失败时出发的事件
    function processFailedHospital(e) {
        alert(e.error.errorMsg);
    }
     
    //定义mouseClickHospital函数，触发click事件会调用此函数
    //弹出医院详细信息
    function mouseClickHospital(LocalMarker) {
        closeInfoHospital();//关闭弹出窗
        var marker = this;
        var xAxis;//X轴
        var yAxis;//Y轴
        if (LocalMarker.bool == true) {
            xAxis = LocalMarker.lonlat.lon;
            yAxis = LocalMarker.lonlat.lat;
        } else {
            xAxis = marker.getLonLat().lon;
            yAxis = marker.getLonLat().lat;
        }
        popup = new SuperMap.Popup(//SuperMap.Popup弹窗类
        "chicken",
        new SuperMap.LonLat(xAxis, yAxis),//SuperMap.LonLat 这个类用来表示经度和纬度对
        new SuperMap.Size(300, 235),
         "<div class='popwin_titleDiv' style=''><span class='popwin_title'>医院分布图层管理</span></div>" +
         "<div style=overflow:hidden;overflow:auto;color:#000;height:auto;text-align:center; margin:auto 0px;'>" +
         '[外链图片转存失败(img-D9KdSrir-1562146677925)(https://mp.csdn.net/Content/images/%E7%96%BE%E7%97%85%E9%98%B2%E6%8E%A7%E7%B1%BB.jpg)]<br/><br/>' +
         '<span style="margin-left: 0px;">医院名称：' + LocalMarker.object.name + "</span><br/>" + '<span style="margin-left: 0px">医院地址：' + LocalMarker.object.laction +
         "</span>" + '<span style="margin-left: 0px;display:none;" id="xZB">' + xAxis + "</span><br/>" + '<span style="margin-left: 0px;display:none;" id="yZB">' + yAxis + "</span><button id='fat-btn' class='btn btn-primary' onclick='circumSelect()'>周边分析</button></div>",
        true,
        null
        );
        console.log(LocalMarker.object.name);
        console.log(LocalMarker.object.laction);
        //设置弹窗的边框样式
        popup.setBorder("solid 2px #6CA6CD");
        infowin = popup;
        //添加弹窗到map图层
        map.addPopup(popup);
    }
    
    var infowin;
    //关闭弹窗
    function closeInfoHospital() {
        if (infowin) {
            try {
                infowin.hide();
                infowin.destroy();
            }
            catch (e) { }
        }
    }

   //周边查询
  function circumSelect() {
     $("#Show").click();
      $("#bounds").click();
      //地图弹框的坐标值 数据回填
      var xZB = $("#xZB").text();
      var yZB = $("#yZB").text();
      $("#centralPoint").val(xZB + "-" + yZB);
}

四、开发总结
地理信息系统（GIS），它是以地理空间数据库为基础，对空间相关的数据进行采集、管理、操作、分析、显示，适时提供各种空间的动态的地理信息，为地理研究和决策服务建立起计算机技术系统。简单来说，GIS就是对地理空间数据进行一些系统操作，通过计算机技术对它进行研究和管理。当然，这只是我个人的理解，如果有什么不对的地方还请多指教！相信你们对GIS也有不同的理解。
第一次做GIS项目，有很多地方都不怎么懂，在所学的基础上加以巩固，这既是对我们的锻炼也体现了我们的自学能力，有些东西光是照本宣科的教是没有什么好处的，关键是我们自己，其实老师说的对，他们教的只是方法，最重要的是我们能如何利用，这才是重点。从制作地图到发布地图，再到页面上显示，在对地图进行一系列操作，看似简单好像也没那么简单，还是花了很长的时间，有时候结果似乎也没那么重要，重要的是过程，而在这个过程中又学到了什么，学习过程中会遇到很多bug，我们需要找到它的侧重点，对它进行一步一步的调试，虽然有点繁琐，但是在解决bug的时候我们会学到很多东西，这是值得庆幸的，不要懊恼bug的存在，因为bug才更有乐趣。学的慢与快也不重要，重要的是你是否坚持了，所以坚持才是学下去的动力！