《深圳市宝安区慢性病地理信息系统——“地图上传”模块》项目研发阶段性总结

作者:邓婵
本次任务完成时间:2019年1月16日~2019年1月21日
完成模块功能:地图上传
一、 功能实现
我们做地理信息系统首先得有地图,做好地图后再把地图上传到我们所做的项目当中,那我们需要把脚本库文件(libs文件夹和theme文件夹)复制到我们的项目,如(图1)所示:
《深圳市宝安区慢性病地理信息系统——“地图上传”模块》项目研发阶段性总结
(图1)
如下(图2)就是上传好到项目当中的效果
《深圳市宝安区慢性病地理信息系统——“地图上传”模块》项目研发阶段性总结
(图2)

二、 相关代码

方法一:
说明:先要添加脚文本引用,然后body标签中添加"onPageLoad()"后添加承载地图控件的DIV,再然后编辑如下代码:
《深圳市宝安区慢性病地理信息系统——“地图上传”模块》项目研发阶段性总结

方法二:
说明:先要添加脚文本引用,然后body标签中添加"onPageLoad()"后添加承载地图控件的DIV,再然后编辑如下代码:

 var map, layer;       
        url = "http://localhost:8090/iserver/services/map-ShenZhenBaoAnQu/rest/maps/深圳宝安区";
        //创建对象
        function onPageLoad() {
            // 初始化地图
            map = new SuperMap.Map("map", {
                controls: [//控件参数
            //  new SuperMap.Control.LayerSwitcher(),//图层选择控件类。 用于控制地图中的图层可见性。
              new SuperMap.Control.ScaleLine(),//比例尺控件。默认位置为地图左下角。
              new SuperMap.Control.PanZoomBar(),//平移缩放类。 用于平移缩放地图,默认情况下垂直显示在地图左上角。
              new SuperMap.Control.LayerSwitcher(),//博士帽图标
              new SuperMap.Control.Navigation({//此控件处理伴随鼠标事件(拖拽,双击、鼠标滚轮缩放)的地图浏览, 如果创建地图时没有设置任何控件,此控件会默认添加到地图
                  dragPanOptions: {
                      enableKinetic: true//设置是否使用拖拽动画。默认为false,不使用动画。
                  }
              })]
            });

            //初始化图层(定义layerWorld图层,获取图层服务地址)
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("宝安区_region", url, null, { maxResolution: "auto" });          
            //监听图层信息加载完成事件(为图层初始化完毕添加layerInitialized事件)
            layer.events.on({ "layerInitialized": addLayer });
        }
        //异步加载图层
        function addLayer() {
            map.addLayers([layer]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(113.86, 22.6), 3.6);
        }

归结:两种方法均可将地图发布到项目当中,但第一种方法缺点在于写有关地图发布的代码与主页面的代码不可放在同一页面上,需重新建一个页面存放有关地图的信息,这样主页面所编辑的代码与地图的代码就不可存放于同一页面,而第二种方法则可以同时存放同一页面上

三、开发总结

其实一开始我连地图如何才能上传发布于实际项目中都不懂,还好有SuperMap iServer 8C,从一开始什么都不懂到现在慢慢摸索也学到了不少的东西,比如这个地图发布于项目当中看似很简单但如果你深入去了解也会从中发现不少你意料不到的事情,一开始呢我就是去iserver里查找相关的代码,恰好里面有我需要的,但是我并不知道这里面的代码与我的主页面是不能放在同一页面上,然后我就在想怎么样才能把它们都放在同一页面上,让两者之间不需要分开页面来编辑,所以就去查找资料去研究,经过一番的努力我发现了还有别的方法去解决这一问题,然后就采用了更加简洁又有同样效果的方法去编写。虽然在这里也浪费了一定的时间,但也收获了相应的结果,总算没有白浪费时间。