描述

  1. 通过设置起点和终点在地图上绘制两个POI,点击路径分析就会得到最佳路径。

代码 (文件格式为 UTF-8)


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="http://www.supermapcloud.com/demo/china/styles/action.css" rel="stylesheet" type="text/css"></link>
	<script type="text/javascript" src="http://services.supermapcloud.com/iserver/api?key=aXtbCHyF5FSZn6TeeEywSW0u8TDHrwC0IjFudD2j5xM%3D&v=1.1"></script>
   <title>SuperMap Online Service Platform Sample - 路径分析</title>
    <script type="text/javascript">
         var map = null;
        var featuresLayer = null;
		var markerLayer = null;
		var poiSearchGroup = null; //poi搜索结果分组
		var poiManager = null;
		var layer = null;
        //初始化地图
        function onPageLoad() {
           layer = new SuperMap.Layer.CloudLayer();
			markerLayer = new SuperMap.Layer.Markers("maker");
			featuresLayer = new SuperMap.Layer.Vector();
			 map = new SuperMap.Map("mapDiv", { controls: [
                      new SuperMap.Control.PanZoomBar(),
                      new SuperMap.Control.Navigation({
                          dragPanOptions: {
                              enableKinetic: true
                          }
                      })], allOverlays: true
            });
			map.addLayer(layer);
			map.addLayer(featuresLayer);
			map.addLayer(markerLayer);
			map.setCenter(new SuperMap.LonLat(12958399.4681885, 4852082.44060595),11);
			createPoiService();
        }
		
		function createPoiService(){
			poiManager = new SuperMap.OSP.UI.POIManager(map);
			poiManager.markerLayer = markerLayer;
			poiSearchGroup = new SuperMap.OSP.UI.POIGroup("poi_searchGroupId");
			poiSearchGroup.caption = "poi搜索分组";
			var scaledContent = new SuperMap.OSP.UI.ScaledContent();
			scaledContent.content = '<img src="images/num_map/1.png" />';
			scaledContent.offset = new SuperMap.OSP.Core.Point2D(0, 0);
			poiSearchGroup.scaledContents = scaledContent;
			poiManager.addPOIGroup(poiSearchGroup);
		}

// 路径分析-起始点和结束点固定ID
var findPath_StartID = 'findPath_POI_start';
var findPath_EndID = 'findPath_POI_end';
//路径分析结果处理
var drawLine = "";
var pathFeatures = [];
var pathItemPoints = []; //路径途径节点集合
var routePoints = [];
var pointMap;
var poiIndex = 0;//途经点索引
var pPntWay = [];//途经点坐标集合

//新路径分析方法
//起点116.37566618893023, "y":39.98860245609523
//终点x":116.45470821660479, "y":39.96279383689269
function findNewPath() {
	var startPoint = new SuperMap.LonLat(116.37566618893023,39.98860245609523);
	var endPoint = new SuperMap.LonLat(116.45470821660479,39.96279383689269);
	var startImg = SuperMap.OSP.Core.Utility.latLonToMeters(startPoint);
	var startSize = new SuperMap.Size(25,30);
	var startIcon = new SuperMap.Icon('http://www.supermapcloud.com/cloudweb/images/start.png', startSize);
	var startMarker = new SuperMap.Marker(new SuperMap.LonLat(startImg.lon,startImg.lat),startIcon);
	markerLayer.addMarker(startMarker);
	
	var endImg = SuperMap.OSP.Core.Utility.latLonToMeters(endPoint);
	var endSize = new SuperMap.Size(25,30);
	var endIcon = new SuperMap.Icon('http://www.supermapcloud.com/cloudweb/images/end.png', endSize);
	var endMarker = new SuperMap.Marker(new SuperMap.LonLat(endImg.lon,endImg.lat),endIcon);
	markerLayer.addMarker(endMarker);
	map.setCenter(new SuperMap.LonLat(12958879.900879698,4864286.157687547),12)
	
	var param = new SuperMap.OSP.Service.TransportionAnalystParameter();
	var findPathStartPoint = new SuperMap.OSP.Service.SePoint();
	findPathStartPoint.x = 116.37566618893023;
	findPathStartPoint.y = 39.98860245609523;
	param.startPoint = findPathStartPoint;
	
	var findPathEndPoint = new SuperMap.OSP.Service.SePoint();
	findPathEndPoint.x = 116.45470821660479;
	findPathEndPoint.y = 39.96279383689269;
	param.endPoint = findPathEndPoint;
	param.pPntWay = pPntWay;
	param.nSearchMode = 1;//最佳路径
	param.coordsysType = 0; //设置坐标系统参数,0为经纬度坐标,1为墨卡托坐标,默认为0
	var transportationAnalyst = new SuperMap.OSP.Service.TransportationAnalyst();
	transportationAnalyst.url = "http://services.supermapcloud.com";
	transportationAnalyst.findPath(param,function(result){
		featuresLayer.style = {fillColor: "#7C9DE4",strokeColor: "#7A9BE2",pointRadius:6,strokeWidth:4};
		var line = new SuperMap.Geometry.LineString(result.path);
		var lineFeature = new SuperMap.Feature.Vector(line);
		featuresLayer.addFeatures(lineFeature);
		pathFeatures.push(lineFeature);
		var pathInfoList = result.pathInfoList;
		findPathResult(result);
		drawLine = result;
	},function(error){
	
	});
}
function findPathResult(result){
//	setTab(-1, null);
	// 获取转向信息
	var getDirToSwerve = function(i){
		var turn = '';
		switch (i) {
	        case 0:
	            turn = '直行';
	            break;
	        case 1:
	            turn = '左前转弯';
	            break;
	        case 2:
	            turn = '右前转弯';
	            break;
	        case 3:
	            turn = '左转弯';
	            break;
	        case 4:
	            turn = '右转弯';
	            break;
	        case 5:
	            turn = '左后转弯';
	            break;
	        case 6:
	            turn = '右后转弯';
	            break;
	        case 7:
	            turn = '调头';
	            break;
	        case 8:
	            turn = '右转弯绕行至左';
	            break;
	        case 9:
	            turn = '直角斜边右转弯';
	            break;
	        case 10:
	            turn = '环岛';
	            break;
	        case 11:
	            turn = '直角斜边左转弯';
	            break;
	    }
		return turn;
	}
	
	/**
	 * @index 转向信息索引号
	 * @dRouteLength 道路长度
	 * @iDirToSwerve 转向信息
	 * @strRouteName 道路名称
	 * @xy			 经纬度
	 * @NextstrRouteName 下条道路名称,最后点无效
	 * @markName 当是起点或者终点时,显示点名称
	 */
	var getRountTable = function(index, dRouteLength, iDirToSwerve, strRouteName, x, y, NextstrRouteName, markName, isEnd){
		
		var rout = getDirToSwerve(iDirToSwerve);
		var tab = '';
		var length = loadLengthFormat(dRouteLength);
		var nextIndex = index + 1;
		if(index == 0){
			tab = '<table style="font-size:11px"><tr>' +
				'<th>' + (index + 1) + '.</th>' +
				'<td>从<strong>' + markName + '</strong>出发,沿<span><a href="#">' + strRouteName + '</a></span>行驶' + length + ',' + rout + '进入<span><a href="#">' + NextstrRouteName + '</a></span></td>' + 
				'<td>' + '</td>' + 
			'</tr></table>';
		} else if(index > 0 && !isEnd) {
			tab = '<table style="font-size:11px"><tr>' +
				'<th>' + (index + 1) + '.</th>' +
				'<td>沿<span><a href="#">' + strRouteName + '</a></span>行驶' + length + ',' + rout + '进入<span><a href="#">' + NextstrRouteName + '</a></span></td>' +
				'<td>' + '</td>' + 
			'</tr></table>';
		} else if(isEnd){
			// 结束点
			tab = '<table style="font-size:11px"><tr>' +
				'<th>' + (index + 1) + '.</th>' +
				'<td>沿<span><a href="#">' + strRouteName + '</a></span>行驶' + length + '' + ',到达<strong>' + markName + '</strong></td>' + 
				'<td>' + '</td>' + 
			'</tr></table>';
			//tab += '<div class="con_title"><img src="http://www.supermapcloud.com/cloudweb/images/bus/zhongdian.gif" align="absmiddle" /><span>终点</span></div>';
		}
		return tab;
	}
	
	var path = result.path;
	var rout = result.pathInfoList;
	
	// dLength
	var html = '<div class="con">';
	//html += '<div class="con_title"><img src="http://www.supermapcloud.com/cloudweb/images/bus/qidian.gif" alt="起点" align="absmiddle" /><span>起点</span></div>';
	var routLength = rout.length;
	if(routLength && routLength > 0){
		html +='<div class="msg">全程:约<span>' + loadLengthFormat(eval(rout[0].dLength)) + '</span></div>';
		if(loadLengthFormat(eval(rout[0].dLength)) < 400){
			html = "当前距离小于400米,建议步行";
		}else{
			var i = 0;
			for(; i < routLength; i++){
				var markName = '起点';
				if(i == (routLength - 1)){
					markName = '终点';
					// 结束点
					html += getRountTable(i, rout[i].dRouteLength, rout[i].iDirToSwerve, rout[i].strRouteName, rout[i].x, rout[i].y, null, markName, true);
				}else if(i == 0){
					html += getRountTable(i, rout[i].dRouteLength, rout[i].iDirToSwerve, rout[i].strRouteName, rout[i].x, rout[i].y, rout[i + 1].strRouteName, markName, false);
				}else {
					html += getRountTable(i, rout[i].dRouteLength, rout[i].iDirToSwerve, rout[i].strRouteName, rout[i].x, rout[i].y, rout[i + 1].strRouteName, null, false);
				}
			}
		}
	}
	
	//html += '</table><div class="search_bottom">查看:<a href="#">返程</a>│<a href="#">公交</a></div>';
	html += '</div>';
	document.getElementById("divInfo").innerHTML = html;
	document.getElementById("divInfo").style.display = "block";

}

function loadLengthFormat(length){
	
	var getFormat = function(val){
		var v = Math.round(val   *   10)   /10;
		return v;
	}
	
	var unit = '米';
	var dLength = eval(length);
	if(dLength > 900) {
		dLength = dLength / 1000.0;
		unit = '公里';
	}
	
	return getFormat(dLength) + unit;
}

        
        //清除路径分析高亮信息 
        function clearPath() {
            featuresLayer.removeAllFeatures();
			markerLayer.clearMarkers();
			document.getElementById("divInfo").innerHTML = "";
        }
    </script>

</head>
<body onload="onPageLoad()">
    <div id="mapDiv" style="position: absolute;  height:398px;width:498px; top: 0px;
        left: 0px; border: solid 1px">
    </div>
    <div id="operatePanel" style="position: absolute; width: 200px; left:500; top:0px;
        font-size: 12px; border: solid 0px #969696; z-index: 100; padding-bottom: 5px;
        background-image: url(../../images/toolbar_backgroundb.png);">
		<table style="font-size:12px">
            <tr>
                <td>
                    路径分析模式:
                </td>
                <td>
                    <input type="radio" name="radioPathMode" value="length" checked="checked" />最少路程
                </td>
            </tr>
            <tr>
                <td>
                    选择起点:
                </td>
                <td colspan="2">
                  <input type="hidden"
                        id="txtPathStart" />健翔桥
                </td>
            </tr>
            <tr>
                <td>
                    选择终点:
                </td>
                <td colspan="2">
                   <input type="hidden"
                        id="txtPathEnd" />三元桥
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="button" onclick="findNewPath()" value="路径分析" /><input type="button" onclick="clearPath()"
                        value="清除" />
                    <div id="divTime">
                    </div>
                </td>
            </tr>
        </table>
    </div>
	<div id="divInfo" style="position: absolute; width: 200px; left:500; top:100px;
        font-size: 12px; border: solid 0px #969696; z-index: 100; padding-bottom: 5px;
        background-image: url(../../images/toolbar_backgroundb.png);display:none">
        </div>
</body>
</html>