作者:华境聪
本次任务完成时间:2018年12月22日~2019年1月16日
完成模块功能:前台【图层管理{医院、社康、药店】、后台【修改资料、密码、数据管理】
医院分布图:见图1,实现界面。
图1 医院分布图
图2 周边查询信息
单击查询按钮获取中心点和半径的数据以及查询目标的数据,绘制圆形查出相关范围的药店,并在右侧显示出来,如图2。
社康分布图:见图3,实现界面。
图3 社康分布图
图4 周边查询信息
单击查询按钮获取中心点和半径的数据以及查询目标的数据,绘制圆形查出相关范围的药店,并在右侧显示出来,如图4。
图5 详细信息
单击详细信息按钮,查询相关信息,在右侧显示出来,如图5。
药店分布图:见图6,实现界面。
图6 药店分布图
图7 周边查询信息
单击查询按钮获取中心点和半径的数据以及查询目标的数据,绘制圆形查出相关范围的医院,并在右侧显示出来,如图7。
后台菜单管理:见图8,实现界面。
登陆页面 可见下图
图17 登陆页面
图8 菜单列表图
图9 个人资料信息
单击“确认修改”即可完成修改信息操作
单击 图9“修改密码”弹出模态窗修改密码界面如图10,
图10 修改密码界面
单击“确认修改”即可完成修改信息操作注:判断原始密码正确和两次输入新密码的正确
图11 数据管理导入导出
单击 “数据导入”按钮,选择导入模块后,点击选择文件Excel类型文件,见图12
图12 选择导入模板
图13 查看数据信息
点击“开始上传数据”按钮保存数据到数据库
数据管理页面,可见图14
图14 数据管理页面
图15 模板导出
图16 导出数据图
自定义圆形代码:
var map, local, layer,
url = "http://localhost:8090/iserver/services/map-Zhuhaimap/rest/maps/County_R@Zhuhai";
function init() {
//初始化地图
map = new SuperMap.Map("map", {
control: [
new SuperMap.Control.PanZoomBar(),//平移缩放控件
new SuperMap.Control.ScaleLine(),//比例尺控件
new SuperMap.Control.Navigation(),//鼠标拖拽控件
new SuperMap.Control.LayerSwitcher(),//图层控件
new SuperMap.Control.MousePosition()//鼠标移动获取地理坐标
],
});
//初始化图层
layer = new SuperMap.Layer.TiledDynamicRESTLayer("海珠地图", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
//监听图层信息加载完成事件
layer.events.on({ "layerInitialized": addLayer });
klialin = new SuperMap.Layer.Vector("周边分析图层", { displayInLayerSwitcher: false });
markerLayer = new SuperMap.Layer.Markers("图标", { displayInLayerSwitcher: false });//标记层
//获取坐标
draw = new SuperMap.Control.DrawFeature(klialin, SuperMap.Handler.Point);//查询多变形
draw.events.on({ "featureadded": drawCom });//使用on()接口监听事件
//添加控件
map.addControl(draw);
map.addControl(new SuperMap.Control.LayerSwitcher());//图层
map.addControl(new SuperMap.Control.ScaleLine());//比例尺
}
//异步加载图层
function addLayer() {
map.addLayers([layer, markerLayer, klialin]);
map.setCenter(new SuperMap.LonLat(12616179.7635450009, 2641804.5424003000), 0);
}
$("#btnchaxun").click(function () {
klialin.removeAllFeatures();
markerLayer.clearMarkers();
var kl = $("input[name='yiban']:checked")
if ($("#zxdwbk").val() == "" || kl.length == 0) {
alert('请选择中心点或者查询目标!')
klialin.removeAllFeatures();
markerLayer.clearMarkers();
} else {
$("#ZHZSrightban1").addClass("none");
$("#ZHZSrightban").removeClass("none");
var li = $("#zxdwbk").val().split("-")[0];
var ijn = $("#zxdwbk").val().split("-")[1];
var chen_centerPoint = new SuperMap.Geometry.Point(li, ijn);//用来生成线串的点数组
var rou = $("#bjwbk").val();//半径
var polygon = SuperMap.Geometry.Polygon.createRegularPolygon(chen_centerPoint, rou, 360, 360);//实例化多边形
var circleVector = new SuperMap.Feature.Vector(polygon);//矢量数据集
circleVector.style = {
strokeColor: "#3f7ee5",
fillColor: "#ccc",
strokeWidth: 2,
fillOpacity: 0.3,
strokeOpacity: 0.5
};
klialin.addFeatures(circleVector);
map.zoomToExtent(circleVector.geometry.bounds);//缩放到指定范围,重新定位中心点。
circleselect(circleVector);
}
})
做一个GIS系统,首先要设计好所需要的地图和基础数据库,然后将地图发布到iServer里面去,在你的项目中引用SuperMap插件,设计好显示地图所需要的方法,然后,再你的地图上添加一些矢量图层和控件,构造一些方法,利用数据库将数据传到地图去,让地图更加完美呈现你所需要的功能效果。
对于第一次接触GIS项目的我来说,是充满挑战的。首先,自己对所要接触的代码,不熟;第二,对所需要实现的功能,初次感到困难重重;第三,规定完成项目的时间,比较短。对于初次接触GIS项目的我们,只能通过老师所发的SuperMap iClient forJavaScript HelpSuper指导文档去找到自己所要用到的方法,了解其中含义。为了让自己的项目做更好,而不断的去寻找一些令人感到头痛方法,人们都说“过程是痛苦的,结果是美好的”,正是因为这么一句话,我们才会不断探索,让自己的技术成长起来;事情不是一帆风顺的,也许,我们会在寻找真正的出口时,迷失方向;也许,我们会在看似充满荆棘的道路上,踌躇不前;也许,我们会在充满迷雾的岔道上,原地打转;但是,我们不应感到气馁,不应感到恐惧,更不应放弃;只有勇敢地迈出坚实的那一步,就算经历的挫折,也要勇敢面对,才会明白其中的秘密。或许,在一些比较聪明的人看来,这是多么简单的方法,为什么还会做不出来呢?这个就是,我们和他们的区别,只有经历更多的人才会开发更多道路出来,因为成功的方法不只一种。