映射路由方向缩放到段
Map Route Direction Zoom to Segment
基本上我试图在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 /> Total distance: " + Math.round(directions.summary.totalLength) + "km" + "<br /> 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的示例。
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 方向地图没有正确定心/缩放
- 有没有办法在一个方向上缩放图像
- D3鼠标滚轮缩放方向