《GIS ——“实现地点的分布图”》项目研发阶段性总结

《GIS ——“实现医院的分布图”》项目研发阶段性总结

作者：潘玉莹
本次任务完成时间：2018年1月10日～2018年1月15日
完成模块功能：显示某个地区全部医院分布图
开发工具： SuperMap iDesktop 9D、SuperMap_iserver、 Visual Studio 2015

一、 功能实现

医院分布图包括——1地图的发布 2医院的查询 借鉴于SuperMan

第一步：首先在iDesktop里创建一幅地图，新创建一个数据源，并在数据源中加入地
图要素，即（数据集）然后保存工作空间。图一所示：

并获取其中的数据信息：
数据库名称：工作空间的名称（即地图数据库表的名称）
用户名称、密码：数据库名称、数据库密码
工作空间名称：即保存地图时SmWorkspace表里的SmWorkspaceName名称
图二所示：

第二步：发布地图：启动并登陆iserver，iserver主要用于地图的发布，点击for JavaScript进入并获取上方的路径，此路径主要用于项目发布地图：图三所示：

成功发布地图后，在VS实现代码的查询

第三步：创建一个矢量图层（以医院为例），并加入到地图中。代码如下

//定义layer图层，TiledDynamicRESTLayer：分块动态 REST 图层

layer = new SuperMap.Layer.TiledDynamicRESTLayer("LuoHu_Data", url, {transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
////创建图层对象
//为图层初始化完毕添加addLayer()事件
layer.events.on({"layerInitialized": addLayer})
Hospital = new SuperMap.Layer.Markers("医院分布图");
Hospital.events.on({
"loadend": Hospital.setVisibility(false),
});

把创建的图层加入到地图中：代码如下
function addLayer() {
map.addLayers([ Hospital]);
map.setCenter(new SuperMap.LonLat(114.115281221379, 22.5380840324007), 0);
Hospital1()；
}

在地图加载事件里写一个加载事件，并调用此加载事件：如下图
成功调用第一个监听事件processHospital，失败则调用第二个监听事件processFailed

function Hospital1() {
var queryParam, queryByBoundsParams, queryService;
queryParam = new SuperMap.REST.FilterParameter({name: "P15医疗服务_point_1@LuoHu_Data#1" });//FilterParameter设置查询条件，name是必设的参数，（图层名称格式：数据集名称@数据源别名）
queryByBoundsParams = new SuperMap.REST.QueryBySQLParameters({ expectCount: 9999999, queryParams: [queryParam] });//queryParams查询过滤条件参数数组。bounds查询范围
queryService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: {
"processCompleted": processCompletedHospital,
"processFailed": processFailed,
}
});
queryService.processAsync(queryByBoundsParams);//向服务端传递参数，然后服务端返回对象
//开始异步执行边的边的耗费权重的更新 Parameters: params - {SuperMap.REST.UpdateEdgeWeightParameters} 更新服务参数
}

QueryParam：FilterParameter设置查询条件，name是必设的参数，
（图层名称格式：数据集名称@数据源别名）
queryByBoundsParams：queryParams查询过滤条件参数数组。bounds查询范围
queryService：服务端传递参数，然后服务端返回对象

调用成功的监听事件写法：图四所示：

function processCompletedHospital(queryEventArgs) {
var i, j, result = queryEventArgs.result.recordsets[0].features;
if (result) {
for (i = 0; i < result.length; i++) {
var feature = result[i];
var address;
if (feature.data.ADDRESS) {
address = feature.data.ADDRESS + feature.data.NAME;
addressName = feature.data.ADDRESS + feature.data.NAME;
}
else {
address = feature.data.NAME;
}
var X = feature.data.SmX;//点数据里面的x和y轴
var Y = feature.data.SmY;

size = new SuperMap.Size(25, 25),//此类描绘一对高宽值的实例
offset = new SuperMap.Pixel(-(size.w / 2), -size.h);//Pixel 此类用x,y坐标描绘屏幕坐标（像素点）。
//Icon具有url,size和position属性。也包含偏移量属性， 可以提供作为一个固定的偏移量，也可以函数计算得到期望的偏移量。
var icon = new SuperMap.Icon("/Content/images/医院.svg", size, offset)；
//标记覆盖物，对地图上的点进行标注，可以自定义选择标注的图标，需添加到 Markers 图层上显示。
marker = new SuperMap.Marker(new SuperMap.LonLat(X, Y), icon);//LonLat 这个类用来表示经度和纬度对。
marker.sm_capital = feature.attributes;//f.data.属性/SuperMap/images/colorpicker.png
marker.events.on({
"click": HospitalShiJian,
"touchstart": HospitalShiJian, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
"scope": marker
});
Hospital.addMarker(marker);//在标记图层里添加marker（标记）。 Parameters: marker - {SuperMap.Marker}需要添加的标记。
}
//当返回结果不为空时，调整登记内容栏的高度60%
}
}

失败的监听事件

function processFailed(e) {
alert(e.error.errorMsg);
}

设置气泡显示医院的信息
注释的代码段意思是：通过获取属性表的某个字段来判断显示的值
如果属性表的值等于1时，显示一种值，等于2是则显示另一种值
则不同的值将会呈现不同的数据：图五所示：

var infowin_BL = null;
function HospitalShiJian(obj) {
closeInfoWin_BL2();
var marker = this;
var lonlat = marker.getLonLat();
var contentHTML = "<div style='font-size:-9em; opacity: 0.8; overflow-y:hidden;height:130px;'>";
contentHTML += "<div>医院名称：" + marker.sm_capital.NAME + "</div>";
contentHTML += "<div>医院地址：" + marker.sm_capital.ADDRESS + "</div>";
contentHTML += "<div>医院编号：" + marker.sm_capital.ADMINCODE + "</div>";
contentHTML += "<div>下属社康：" + marker.sm_capital.PRIOR_AUTH + "</div>";
contentHTML += "<div><button  onclick='ZhouBianSeleectHospital(this)'  x=" + marker.sm_capital.SmX + " y=" + marker.sm_capital.SmY + " type='button' class='btn btn-info' >周边查询</button></div></div>";
var size = new SuperMap.Size(30, 30);
var offset = new SuperMap.Pixel(-size.w, -size.h);
var icon = new SuperMap.Icon("/SuperMap/images/Circle_Blue.png", size, offset);

//var State = marker.sm_capital.ClubState;//1,2是图片
//if (State == 1) {
//    var icon = new SuperMap.Icon("/Content/images/捕获.PNG", size, offset);
//} if (State == 2) {
//    var icon = new SuperMap.Icon("/Content/images/捕获规划.PNG", size, offset);
//} else if (State == 3) {
//    var icon = new SuperMap.Icon("/Content/images/捕获已停业.PNG", size, offset);
//}

//FramedCloud具有指向和边框的浮动弹窗。
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(lonlat.lon, lonlat.lat),//LonLat 创建一个新的地图位置对象  lat 地图的单位的Y轴（纵轴）坐标，默认为0.0
null,
contentHTML,
icon,
true);
infowin_BL = popup;
map.addPopup(popup);
}

功能如图所示：
勾选上右边的医院管理器可开启与关闭医院分布图；图六所示：

开发总结：
刚开始知道要学习GIS这门课程时，对GIS是一点都不了解，不清楚学这门主要是用来实现什么的，学习第一节课时，授课老师给我们讲了GIS理论知识，但还是懵懵懂懂，主要了解这门课程主要是以地理空间数据库为基础的。学习编程中总是很多很多的迷茫，跟不上，学不过来。但是只要自己慢慢认真去研究琢磨并去理解，相信总是可以克服。学习编程是需要一定的思维，所谓智商是最短的距离，只要付出时间付出精力总会有一定的回报。学习编程的时候我总会问自己为什么？问多了可能会理解个究竟出来。生活中其实很多事情都与我们学习编程有联系的，多想、多写总会有好处的。时刻相信自己！