《广州市越秀区慢性病地理信息系统》项目研发阶段性总结
作者：杨文艺
本次任务完成时间：2018年12月24日～2019年1月12日
开发工具与关键技术：SuperMap iDesktop、SuperMap iServer、SQL Server、C#MVC、Visual Studio
完成模块功能：区域定位、查询搜索、周边查询、用户管理、日志管理
一、功能实现
（1）区域定位
下图是系统的主页面。
图1 系统主页面
点击图1区域定位下面显示的街道信息可以定位到相应的区域并显示一个图标，点击图标弹出一个信息框，显示街道的名称如图2
图2
（2）查询搜索如图3，选择查询目标（公司企业或地址），输入单位名称或单位地址，点击查询按钮即可查询相应的数据
图3 查询搜索
点击“定位”即可定位到相应的位置，并弹出信息框，如图4
图4
（3）周边查询，点击“选择”按钮，在地图选择一个中心点，选择之后地图会出现一个小圆圈如图5
图5 周边查询
从图5中选择中心点和查询目标后，半径默认为500米，点击查询按钮在地图显示相应的数据并弹出周边分析详情信息框，点击地图图标可以弹出一个信息款显示目标信息如图6
图6
点击图6周边分析详情信息的具体目标，可以定位到相应的位置并弹出信息框显示目标信息。
（4）图层管理器如图7，完成部分（医院分布图、社康分布图、药店分布图）
图7 图层管理器
点击图7医院分布图，地图会显示相应的信息，点击图标弹出信息框显示目标信息如图8
图8
点击图8周边查询按钮，默认查询目标500米范围内的药店和医院并弹出周边分析详情信息框如图9
图9
社康分布图的操作与医院分布图操作一样如图10
图10
药店分布图的操作与医院分布图操作一样如图11
图11
（5）用户管理如图12，这里可以查询、修改、删除用户信息
图12 用户管理
（6）日志管理如图13 ，这里可以查询用户的操作信息
图13 日志管理
二、经典代码
区域定位代码(代码参考于SuperMap iServer)
//-------------------区域定位 开始----------------------//
var markerLayerone = new SuperMap.Layer.Markers("Marker", { displayInLayerSwitcher: false });
function RowLocation(Num) {
clearLayer();
//声明字段
var queryParam = [], queryBySQLParams, queryBySQLService;
queryParam.push(new SuperMap.REST.FilterParameter({
name: "乡镇_point@GuangZhouYueXiuDate#1",//查询数据集名称或者图层名称，根据实际的查询对象而定，必设属性
attributeFilter: "SmID=" + Num,//属性过滤条件 相当于 SQL 语句中的 WHERE 子句，
}));
//SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
queryParams: queryParam//查询过滤条件参数数组
});
//SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {//url 服务的访问地址
eventListeners: { "processCompleted": processCompleted, "processFailed": processFailedone }
});
//传递到服务端
queryBySQLService.processAsync(queryBySQLParams);
}
function processCompleted(getFeaturesEventArgs) {
var i, len, result = getFeaturesEventArgs.result;
//var x = getFeaturesEventArgs.result.recordsets[0].features[0].geometry.x;
//var y = getFeaturesEventArgs.result.recordsets[0].features[0].geometry.y;
var i, j, result = getFeaturesEventArgs.result, marker;//queryEventArgs服务端返回的对象,返回值
//recordsets查询结果记录集 将查询出来的地物按照图层进行划分，一个查询记录集存放一个图层的查询结果,即查询出的所有地物要素。
if (result && result.recordsets) {
for (i = 0, recordsets = result.recordsets, len = recordsets.length; i < len; i++) {
if (recordsets[i].features)//recordsets[i].features记录集中所有地物要素。
{
for (j = 0; j < recordsets[i].features.length; j++) {
var f = recordsets[i].features[j];
var point = f.geometry;//geometry该属性用于存放几何信息。
size = new SuperMap.Size(44, 33);//此类描绘一对高宽值的实例。
offset = new SuperMap.Pixel(-(size.w / 2), -size.h);//偏移量
//图标类，表示显示在屏幕上的图标，通常与 {SuperMap.Marker} 配合使用表示屏幕上显示的Marker。
//Icon具有url,size和position属性。也包含偏移量属性， 可以提供作为一个固定的偏移量，也可以函数计算得到期望的偏移量。
icon = new SuperMap.Icon("/SuperMap/theme/images/marker.png", size, offset);
//标记覆盖物，对地图上的点进行标注，可以自定义选择标注的图标，需添加到 Markers 图层上显示。
marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);//当前标记的位置,当前标记的图标。
marker.sm_capital = f.attributes.NAME;//sm_capital为索要展示的内容,CAPITAL图层内的属性名+ ","
//console.log(f.attributes);
marker.events.on({
"click": openInfoWin,
"touchstart": openInfoWin, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
"scope": marker
});
markerLayerone.addMarker(marker);
map.addLayer(markerLayerone);
map.setCenter(new SuperMap.LonLat(point.x, point.y), 2);
console.log(point.y)
closeInfoWin();
}
}
}
}
}
function processFailedone(e) {
layer.alert(e.error.errorMsg);
}
function clearLayer() {
markerLayerone.clearMarkers();
map.removeAllPopup();//移除所有弹窗
}
var infowin = null;
function openInfoWin() {
closeInfoWin();
var marker = this;
//console.log(marker);
var lonlat = marker.getLonLat();
var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
contentHTML += "<div>" + marker.sm_capital + "</div></div>";
var size = new SuperMap.Size(0, 33);
var offset = new SuperMap.Pixel(0, -size.h);
var icon = new SuperMap.Icon("/SuperMap/images/markerbig_select.png", size, offset);
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(lonlat.lon, lonlat.lat),
null,
contentHTML,
icon,
true);
infowin = popup;
map.addPopup(popup);
}
function closeInfoWin() {
if (infowin) {
try {
infowin.hide();
infowin.destroy();
}
catch (e) { }
}
三、开发总结
在做这个地理信息系统项目之前，我内心其实比较慌乱的，因为自己对GIS项目并没有足够的了解。第一步制作地图就遇到了不少问题，因为对软件的操作并不是很懂，一开始地图显示的数据很乱，数据都是叠加在一起的，有些书据根本就看不清。还有就是地图的颜色搭配也很不协调，看起来违和感十足。一些软件操作是自己后来慢慢才了解，还有就是问同学和看一下之前学习的视频才学会。最后地图完成时，还是挺满意的，虽然槽点还是有不少，但比一开始要好很多了。所以当有不懂得地方或做得不够好的地方时，需要自己去探索(SuperMap iServer)还有就是提问身边的同学，以便提高自己的能力。
当然问题不止这一个，最主要的问题还是编学代码，因为是第一次接触GIS项目，懂得地方实在是太少了，虽然iServer里面有相关的例子，但是代码的内容自己有很多看不懂的。在学代码时也是出现了很多问题，每做一个功能都要花费不少时间。虽然费了不少功夫，但也学到很多知识点。