映射路由方向缩放到段

Map Route Direction Zoom to Segment

本文关键字:缩放 方向 路由 映射      更新时间:2023-09-26

基本上我试图在OneMap上获得方向时缩放到某些路由段。以下是我试图绘制路线并缩放到特定路由段的JavaScript代码:

function getDirections() {
var routeData = new Route;
var from = document.getElementById('txtFrom').value
var to = document.getElementById('txtTo').value
//Draw out the line from the cordinate to another cordinate
routeData.routeStops = from + ";" + to;
//What type of mode will it do
routeData.routeMode = "DRIVE";
//can draw out untill the following coordiante
routeData.barriers = '36908.388637,35897.420831';
{
    if (document.getElementById('CbAvoid').checked) {
        routeData.avoidERP = "1";
    }
    else
        routeData.avoidERP = "0";
}
routeData.GetRoute(showRouteData)
}
function showRouteData(routeResults) {
    if (routeResults.results == "No results") {
        alert("No Route found, please try other location.")
        return
    }
    $('#divComputedDirection').show();
    directions = routeResults.results.directions[0];
    directionFeatures = directions.features;
    var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(4);
    var mergedGeometry = new esri.geometry.Polyline()
    mergedGeometry.addPath(routeResults.results.routes.features[0].geometry.paths[0])
    OneMap.map.graphics.add(new esri.Graphic(mergedGeometry, routeSymbol));
    //Display the total time and distance of the route                   
    var htmlStr = "";
    htmlStr += "<img class='close-image' onclick='closeDirectionResultDIV();' alt='close' src='img/closeDirectionResult.png' />";
    htmlStr += "<span style='font-weight:bold;'><br /> &nbsp; Total distance: " + Math.round(directions.summary.totalLength) + "km" + "<br /> &nbsp; Total time: " + Math.round(directions.summary.totalTime) + "mins <br/></span>";
    document.getElementById("divComputedDirection").innerHTML = htmlStr;
    //List the directions and create hyperlinks for each route segment
    for (var i = 0; i < directions.features.length; i++) {
        var feature = directions.features[i]
        document.getElementById("divComputedDirection").innerHTML += '<a href="JavaScript:zoomToSegment(' + i + ')" style="font-size: 11px"><br>' + parseInt(parseInt(i) + 1) + ". " + feature.attributes.text + " (" + formatDistance(feature.attributes.length, "miles") + ", " + formatTime(feature.attributes.time) + ") " + '</a>';
    }
}
//Zoom to the appropriate segment when the user clicks a hyperlink in the directions list
function zoomToSegment(index) {
var segment = directionFeatures[index];
map.setExtent(segment.geometry.getExtent(), true);
if (!segmentGraphic) {
    segmentGraphic = map.graphics.add(new esri.Graphic(segment.geometry, segmentSymbol));
}
else {
    segmentGraphic.setGeometry(segment.geometry);
}

}

它确实画出了路线并显示了所有的方向。但是当我点击某个方向并缩放到分段时,它会给我一个错误信息,这是Uncaught TypeError: Cannot call method 'getExtent' of undefined

我想知道为什么会这样。提前感谢。

错误的根本原因是您试图获得不存在的.geometry属性的范围-这部分相对容易。我认为,问题在于你正在寻找旅程中每一段的几何形状,而OneMap的RouteTask返回的结果并没有直接给你这个。

整个路线的几何图形在

routeResults.results.routes.features[0].geometry.paths[0]

和各个片段以ESRI的一种有趣的压缩格式保存在值中:

routeResults.results.directions[x].features[y].compressedGeometry
这里有一些文档和c#代码用于此压缩格式: http://resources.esri.com/help/9.3/arcgisengine/ArcObjects/esrinetworkanalyst/INACompactStreetDirection_CompressedGeometry.htm

如果你真的需要单个片段的几何形状,那么将c#代码移植到JS应该是相对容易的。

OneMap在这里有一个完整的工作示例,展示了如何处理来自RouteTask的结果,但不幸的是,他们没有尝试提取compressedGeometry字段。


编辑:更多ESRI的示例代码在这里,包括c#/Java/Python的示例。