《GIS——“最佳路经查询”》项目研发阶段性总结

时间:2024-03-17 07:42:38

作者:李坤凤
本次任务完成时间:2019年1月16日
开发工具与关键技术:开发工具:SuperMap iDesktop 9D、SuperMap iServer、.net,关键技术:拓扑构网
完成模块功能:最佳路经查询

一、地图与拓扑构网

首先在SuperMap iDesktop 中新建SQL的数据型数据源,然后在资源导入所需要的数据集,通过点、线、面构建出所需要的地图。
《GIS——“最佳路经查询”》项目研发阶段性总结
1.创建好地图,进行拓扑构网,其中所说的构网,也就是有每一条的线数据组成的网格。在SuperMap iDesktop点击交通分析,点击拓扑构网选择选择构建二维网格。
《GIS——“最佳路经查询”》项目研发阶段性总结
《GIS——“最佳路经查询”》项目研发阶段性总结
2、构建二维网格数据集,点击左上角的新增按钮,跳转选择线数据集页面,选择所需要的线数据集进行构建二维网格数据。
《GIS——“最佳路经查询”》项目研发阶段性总结
《GIS——“最佳路经查询”》项目研发阶段性总结
3、二维网格构建完成后,点击数据的线拓扑处理,弹出模态框点击确定进行线数据处理。
《GIS——“最佳路经查询”》项目研发阶段性总结
《GIS——“最佳路经查询”》项目研发阶段性总结
《GIS——“最佳路经查询”》项目研发阶段性总结
4、交通分析,点击最佳路经进行刺点,然后进行最佳路经分析点击执行,通过三个站点来分析路线,得出最佳的结果路经。
《GIS——“最佳路经查询”》项目研发阶段性总结

二、功能实现

1、在SuperMap iDesktop处理完所需要的数据,然后在SuperMap iServer中重新发布地图。《GIS——“最佳路经查询”》项目研发阶段性总结

<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/[email protected]";
      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、点击站点按钮进行定点,然后通过点击提交按钮进行最佳路经选择。
《GIS——“最佳路经查询”》项目研发阶段性总结