作者：李坤凤
本次任务完成时间：2019年1月16日
开发工具与关键技术：开发工具：SuperMap iDesktop 9D、SuperMap iServer、.net，关键技术：拓扑构网
完成模块功能：最佳路经查询
一、地图与拓扑构网
首先在SuperMap iDesktop 中新建SQL的数据型数据源，然后在资源导入所需要的数据集，通过点、线、面构建出所需要的地图。
1．创建好地图，进行拓扑构网，其中所说的构网，也就是有每一条的线数据组成的网格。在SuperMap iDesktop点击交通分析，点击拓扑构网选择选择构建二维网格。
2、构建二维网格数据集，点击左上角的新增按钮，跳转选择线数据集页面，选择所需要的线数据集进行构建二维网格数据。
3、二维网格构建完成后，点击数据的线拓扑处理，弹出模态框点击确定进行线数据处理。
4、交通分析，点击最佳路经进行刺点，然后进行最佳路经分析点击执行，通过三个站点来分析路线，得出最佳的结果路经。
二、功能实现
1、在SuperMap iDesktop处理完所需要的数据，然后在SuperMap iServer中重新发布地图。
<link href="~/content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>@*样式插件*@
<script src="~/content/jquery.bsgrid-1.37/builds/merged/bsgrid.all.min.js"></script>
<link href="~/content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />@*地图插件*@
<script src="~/SuperMap/libs/SuperMap.Include.js"></script>@*地图插件*@
@*路径查询*@
<h3 class="menu_head"style="border-radius:10px;margin: 0px 0px 10px 0px;font-family: cursive; font-size: 20px;">路径查询</h3>
<div style="display:none;height:550px;" class="menu_body">
<div class="" id="gg" style="display:block">
<input type="radio" style="margin:0 0 0 7px;" /><a style="margin:0 0 0 6px;text- decoration:none;color:#fff;font-size:15px;font-family:cursive;">病例活动路径</a>
<input type="radio" style="margin: 0 0 0 7px;" /><a style="margin: 0 0 0 6px;text-decoration: none;color:#fff;font-size:15px;font-family: cursive;">病原活动路径</a><br />
<div class="host" style="text-align:center">
<div class="col-md-12 col-sm-12 col-xs-12" style="padding-left:2px;">
<form class="form-horizontal" role="form">
<div>
<ul class="nav nav-tabs">
<li class="active"><a href="#nian" data-toggle="tab" style="background:#08b1ec;font- size: 15px;color:white">年</a></li>
<li class=""><a href="#yue" data-toggle="tab" style="background:#08b1ec;font-size: 15px;color:white">月</a></li>
<li class=""><a href="#tian" data-toggle="tab" style="background:#08b1ec;font-size: 15px;color:white">周</a></li>
<li class=""><a href="#tian" data-toggle="tab" style="background:#08b1ec;font-size: 15px;color:white">天</a></li>
</ul>
</div>
<div class="tab-content foots host">
<div class="tab-pane active fade in" id="nian">
<label class="col-md-2 col-sm-2 control-label resert" style="font-size: 15px;top: -21px;margin: -4px 0 0 -19px;font-family: cursive;">开始年份</label>
<div class="col-md-2 col-sm-2 resert">
<input type="date" class="form-control" id="nian01" name="ReturnTime" style="margin: -16px 118px 0 -26px; width: 166px;" />
</div><br /><br />
<label class="col-md-2 col-sm-2 control-label resert" style="font-size:15px;top:-15px;margin: -12px 0 0 -19px;font-family: cursive;">结束年份</label>
<div class="col-md-2 col-sm-2 resert">
<input type="date" class="form-control" id="nian02" name="ReturnTime" style="margin: -17px 99px 0 -25px; width: 166px;" />
</div>
</div>
<div class="tab-pane fade" id="yue">
<label class="col-md-2 col-sm-2 control-label resert" style="font-size: 15px;top: -18px;margin: -1px 0 0 -18px;font-family: cursive;">开始月份</label>
<div class="col-md-2 col-sm-2 resert">
<input type="date" class="form-control" id="yue01" name="ReturnTime" style="margin: -18px 118px 0 -25px; width: 166px;" />
</div><br /><br />
<label class="col-md-2 col-sm-2 control-label resert" style="font-size:15px;top:-15px;margin: -7px 0 0 -24px;font-family: cursive;">结束月份</label>
<div class="col-md-2 col-sm-2 resert">
<input type="date" class="form-control" id="yue02" name="ReturnTime" style="margin: -19px 99px 0 -19px; width: 166px;" />
</div>
</div>
<div class="tab-pane fade" id="tian">
<label class="col-md-2 col-sm-2 control-label resert" style="font-size: 15px;top: -18px;margin: 0px 0 0 -26px;font-family: cursive;">开始月份</label>
<div class="col-md-2 col-sm-2 resert">
<input type="date" class="form-control" id="tian01" name="ReturnTime" style=" width: 166px;margin: -12px 118px 0 -19px;" />
</div><br /><br />
<label class="col-md-2 col-sm-2 control-label resert" style="font-size:15px;top:-15px;margin: -6px 0 0 -25px;font-family: cursive;">结束月份</label>
<div class="col-md-2 col-sm-2 resert">
<input type="date" class="form-control" id="tian02" name="ReturnTime" style="margin: -15px 0px 0 -20px; width: 166px;" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" type="button" style="top: -13px;margin: 17px 0 0 -164px;border-radius: 7px;font-family: cursive;">登记号</button>
</span>
<input type="text" class="form-control" placeholder="请输入项目登记号" style="width: 190px;top: 32px;height: 40px;margin: -27px 0 0 -43px;">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br />
</div>
<div class="form-group">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" type="button" style="top: -13px;margin: -10px 0 0 0px;border-radius: 7px;font-family: cursive;">年龄</button>
</span>
<div class="col-md-2 col-sm-2 resert">
<input type="text" class="form-control" id="StaffID" name="StaffID" placeholder="不限（默认）" style="width: 206px;height: 40px;margin: -22px 0 0 -16px;" />
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br />
</div>
<div class="form-group">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" type="button" style="top: -30px;margin:8px 0 0 0px;border-radius: 7px;font-family: cursive;">性别</button>
</span>
<div class="col-md-2 col-sm-2 resert">
<input type="text" class="form-control" id="StaffID" name="StaffID" placeholder="不限（默认）" style="width: 206px;height: 40px;margin: -20px 0 0 -16px;" />
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br />
</div>
<div class="form-group">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" type="button" style="top: -25px;margin: -12px 0 0 0px;border-radius: 7px;font-family: cursive;">户籍</button>
</span>
<div class="col-md-2 col-sm-2 resert">
<input type="text" class="form-control" id="StaffID" name="StaffID" placeholder="不限（默认）" style="width: 206px;height: 40px;margin: -36px 0 0 -16px;" />
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br /><br />
</div>
<div class="form-group">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" type="button" style="top: -20px;margin: -18px 0 0 0px;border-radius: 7px;font-family: cursive;">疾病</button>
</span>
<div class="col-md-2 col-sm-2 resert">
<input type="text" class="form-control" id="StaffID" name="StaffID" placeholder="不限（默认）" style="width: 206px;height: 40px;margin: -36px 0 0 -16px;" />
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br /><br />
</div>
<div class="form-group">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" type="button" style="top: -15px;margin: -24px 0 0 0px;border-radius: 7px;font-family: cursive;">疾病亚型</button>
</span>
<div class="col-md-2 col-sm-2 resert">
<input type="text" class="form-control" id="StaffID" name="StaffID" placeholder="不限（默认）" style="width: 178px;height: 40px;margin: -38px 0 0 -16px;" />
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<button class="btn btn-info" style="margin: 10px 0 0 -87px;border-radius: 7px;font-family: cursive;">查询</button>
<button class="btn btn-danger" style="margin: 10px 0 0 33px;border-radius: 7px;font-family: cursive;">重置</button>
<div class="">
<button class="btn btn-info" type="button" onclick="ww()" style="border-radius: 10px;font-family: cursive;top: 10px;">站点</button>
<button class="btn btn-info" type="button" onclick="findPath()" style="border-radius: 10px;font-family: cursive;top: 10px;">提交</button>
<button class="btn btn-info" type="button" onclick="clearElements()" style="border-radius: 10px;font-family: cursive;top: 10px;">清除</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var map, layer, drawLine, lineLayer, polygonLayer, s, ss, tu1, tu2, vectorLayer,
nodeArray = [], pathTime, pathListIndex = 0, routeCompsIndex = 0,
style = {
strokeColor: "#304DBE",
strokeWidth: 2,
pointerEvents: "visiblePainted",
fillColor: "#304DBE",
fillOpacity: 0.8
},
styleGuidePoint = {
pointRadius: 10,
externalGraphic: "/SuperMap/theme/images/point.png"
},
styleGuideLine = {
strokeColor: "#25FF25",
strokeWidth: 6,
fill: false
},
url = "http://localhost:8090/iserver/services/map-FuTianQu/rest/maps/行政地图@FuTianQu";
urls = "http://localhost:8090/iserver/services/map-ugcv5-HangZhengDiTuFuTianQu/rest/maps/行政地图@FuTianQu";
url1 = "http://localhost:8090/iserver/services/transportationAnalyst-FuTianQu/rest/networkanalyst/Road@FuTianQu";
function init(){
///路经查询矢量图层
vectorLayer = new SuperMap.Layer.Vector("病原基因分布图",{displayInLayerSwitcher:false});
drawPoint = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);
select = new SuperMap.Control.SelectFeature(vectorLayer, { onSelect: onFeatureSelect, onUnselect: onFeatureUnselect });
drawPoint.events.on({ "featureadded": drawCompleted1 });
}
function ww() {
clearElements();
map.addControl(drawPoint);
drawPoint.activate();
}
function drawCompleted1(drawGeometryArgs) {
var point = drawGeometryArgs.feature.geometry,
size = new SuperMap.Size(44, 33),
offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
icon = new SuperMap.Icon("/content/images/b_poi_geo_hl.png", size, offset);
markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon));
nodeArray.push(point);
}
//选中时显示路径指引信息
function onFeatureSelect(feature) {
if (feature.attributes.description) {
popup = new SuperMap.Popup("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new SuperMap.Size(200, 30),
"<div style='font-size:.8em; opacity: 0.8'>" + feature.attributes.description + "</div>",
null, false);
feature.popup = popup;
map.addPopup(popup);
}
if (feature.geometry.CLASS_NAME != "SuperMap.Geometry.Point") {
feature.style = styleGuideLine;
vectorLayer.redraw();
}
}
//清除要素时调用此函数
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
if(feature.geometry.CLASS_NAME != "SuperMap.Geometry.Point"){
feature.style = style;
}
vectorLayer.redraw();
}
function findPath() {
drawPoint.deactivate();
var findPathService, parameter, analystParameter, resultSetting;
resultSetting = new SuperMap.REST.TransportationAnalystResultSetting({
returnEdgeFeatures: true,
returnEdgeGeometry: true,
returnEdgeIDs: true,
returnNodeFeatures: true,
returnNodeGeometry: true,
returnNodeIDs: true,
returnPathGuides: true,
returnRoutes: true
});
analystParameter = new SuperMap.REST.TransportationAnalystParameter({
resultSetting: resultSetting,
weightFieldName: "SmLength"
});
parameter = new SuperMap.REST.FindPathParameters({
isAnalyzeById: false,
nodes: nodeArray,
hasLeastEdgeCount: false,
parameter: analystParameter
});
if (nodeArray.length <= 1) {
alert("站点数目有误");
}
findPathService = new SuperMap.REST.FindPathService(url1, {
eventListeners: { "processCompleted": processCompleted2 }
});
findPathService.processAsync(parameter);
}
function processCompleted2(findPathEventArgs) {
var result = findPathEventArgs.result;
allScheme(result);
}
function allScheme(result) {
if (pathListIndex < result.pathList.length) {
addPath(result);
} else {
pathListIndex = 0;
//线绘制完成后会绘制关于路径指引点的信息
addPathGuideItems(result);
}
}
//以动画效果显示分析结果
function addPath(result) {
if (routeCompsIndex < result.pathList[pathListIndex].route.components.length) {
var pathFeature = new SuperMap.Feature.Vector();
var points = [];
for (var k = 0; k < 2; k++) {
if (result.pathList[pathListIndex].route.components[routeCompsIndex + k]) {
points.push(new SuperMap.Geometry.Point(result.pathList[pathListIndex].route.components[routeCompsIndex + k].x, result.pathList[pathListIndex].route.components[routeCompsIndex + k].y));
}
}
var curLine = new SuperMap.Geometry.LinearRing(points);
pathFeature.geometry = curLine;
pathFeature.style = style;
vectorLayer.addFeatures(pathFeature);
//每隔0.001毫秒加载一条弧段
pathTime = setTimeout(function () { addPath(result); }, 0.001);
routeCompsIndex++;
} else {
clearTimeout(pathTime);
routeCompsIndex = 0;
pathListIndex++;
allScheme(result);
}
}
function addPathGuideItems(result) {
vectorLayer.removeAllFeatures();
//显示每个pathGuideItem和对应的描述信息
for (var k = 0; k < result.pathList.length; k++) {
var pathGuideItems = result.pathList[pathListIndex].pathGuideItems, len = pathGuideItems.length;
for (var m = 0; m < len; m++) {
var guideFeature = new SuperMap.Feature.Vector();
guideFeature.geometry = pathGuideItems[m].geometry;
guideFeature.attributes = { description: pathGuideItems[m].description };
if (guideFeature.geometry.CLASS_NAME === "SuperMap.Geometry.Point") {
guideFeature.style = styleGuidePoint;
}
else {
guideFeature.style = style;
}
vectorLayer.addFeatures(guideFeature);
}
}
select.activate();
}
function clearElements() {
pathListIndex = 0;
routeCompsIndex = 0;
nodeArray = [];
select.deactivate();
if (vectorLayer.selectedFeatures.length > 0) {
map.removePopup(vectorLayer.selectedFeatures[0].popup);
}
vectorLayer.removeAllFeatures();
markerLayer.clearMarkers();
}
</script>
2、上面就就是个人样式与实现功能代码。（在后面有完成后的功能效果图片）
3、点击站点按钮进行定点，然后通过点击提交按钮进行最佳路经选择。
