<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>天地图山东地图API-示例-轨迹移动</title>
<link rel="stylesheet" href="http://www.sdmap.gov.cn/api/javascript/js/esri/css/esri.css" />
<script type="text/javascript" src="http://www.sdmap.gov.cn/api/javascript/js/init.js"></script>
<script type="text/javascript">
//定义地图对象
var map,graphic,moving,polylineJson,points;
var startNum,endNum,isStop=false;
//引入天地图山东矢量图层
require(["esri/map","tdlib/SDTDTLayer","esri/geometry/Extent",
"esri/geometry/Point","esri/symbols/PictureMarkerSymbol",
"esri/geometry/Polyline","esri/SpatialReference","esri/symbols/SimpleLineSymbol",
"esri/graphic","dojo/domReady!"],
function(Map,SDTDTLayer,Extent,Point,PictureMarkerSymbol,Polyline,SpatialReference,SimpleLineSymbol,Graphic){
map=new Map("mapDiv",{
logo:false,
slider:true,
nav:false,
extent:new Extent({xmin:116.5,ymin:36.2,xmax:117.5,ymax:37.2,spatialReference:{wkid:4490}})
});
//图层初始化
var sdvecLayer=new SDTDTLayer();
map.addLayer(sdvecLayer);
polylineJson={
"paths": [[[116.895, 36.6513], [116.972, 36.773], [117.089212, 36.65343], [117.466312, 36.73743],[117.081, 36.926], [116.972, 36.773]]],
//"paths": [[[119.930, 36.794], [119.961, 36.775], [120.036, 36.778]]],
"spatialReference":{"wkid":4490}
};
var polyline=new Polyline(polylineJson);
var sys=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH,new esri.Color([0,255,0]),3);
var graphic2=new Graphic(polyline,sys);
map.graphics.add(graphic2);
var point=new Point(116.895, 36.6513,new SpatialReference({wkid:4490}));
var pictureMarkerSymbol=new PictureMarkerSymbol("img/carcar.png",25,51);
graphic=new Graphic(point,pictureMarkerSymbol);
map.graphics.add(graphic);
document.getElementById("openTool").onclick=function(){
if(typeof(moving)!="undefined"){
clearInterval(moving); //清除移动
}
points = polylineJson.paths[0];
graphic.geometry.x = points[0][0];
graphic.geometry.y = points[0][1];
map.graphics.redraw();
move(0,1);
document.getElementById("closeTool").disabled=false;
document.getElementById("continueTool").disabled=true;
document.getElementById("returnTool").disabled=true;
};
document.getElementById("closeTool").onclick = function () {
clearInterval(moving);
document.getElementById("continueTool").disabled=false;
document.getElementById("returnTool").disabled=false;
};
document.getElementById("continueTool").onclick = function () {
if(typeof(moving)!="undefined"){
clearInterval(moving); //清除移动
}
move(startNum,endNum);
document.getElementById("returnTool").disabled=true;
};
document.getElementById("returnTool").onclick = function () {
graphic.geometry.x = points[0][0];
graphic.geometry.y = points[0][1];
graphic.symbol.angle=0;
map.graphics.redraw();
document.getElementById("continueTool").disabled=true;
};
///根据序列点坐标 进行移动
function move(start,end){
var x1=points[start][0];
var y1=points[start][1];
var x2=points[end][0];
var y2=points[end][1];
var p=(y2-y1)/(x2-x1);//斜率
var v=0.01;//距离 距离越小 位置越精确
moving=setInterval(function(){
startNum=start;
endNum=end;
if(endNum==points.length-1){
document.getElementById("closeTool").disabled=true;
document.getElementById("continueTool").disabled=true;
document.getElementById("returnTool").disabled=false;
}
//分别计算 x,y轴方向速度
if(Math.abs(p)==Number.POSITIVE_INFINITY){//无穷大
graphic.geometry.y+=v;
}
else{
if(x2<x1){
graphic.geometry.x-=(1/Math.sqrt(1+p*p))*v;
graphic.geometry.y-=(p / Math.sqrt(1 + p * p)) * v;
//计算汽车角度
graphic.symbol.angle =CalulateXYAnagle(x1,y1,x2,y2); //// (Math.PI / 2 - Math.atan(p)) * 180 / Math.PI+180
}
else{
graphic.geometry.x+=(1/Math.sqrt(1+p*p))*v;
graphic.geometry.y+=(p / Math.sqrt(1 + p * p)) * v;
//计算汽车角度
graphic.symbol.angle =CalulateXYAnagle(x1,y1,x2,y2); ////(Math.PI / 2 - Math.atan(p)) * 180 / Math.PI
}
}
//图层刷新
map.graphics.redraw();
if (Math.abs(graphic.geometry.x - x2) <=0.01 && Math.abs(graphic.geometry.y - y2) <=0.01) {
clearInterval(moving);
startNum=start++;
endNum=end++;
if (end < points.length)
move(start, end);
}
}, 50);
}
function continueMove(){
}
});
function CalulateXYAnagle(startx,starty,endx,endy){
var tan=Math.atan(Math.abs((endy-starty)/(endx-startx)))*180/Math.PI+90;
if (endx > startx && endy > starty)//第一象限
{
return -tan+180;
}
else if (endx > startx && endy < starty)//第二象限
{
return tan;
}
else if (endx < startx && endy > starty)//第三象限
{
return tan - 180;
}
else
{
return - tan;
}
}
</script>
</head>
<body>
<div id="mapDiv" style="position:absolute;width:100%; height:100%">
<div style="position:absolute;z-index: 1;top:10px;right:20px;border:1px blue solid">
在地图上添加一条折线。<br />
<input type="button" id="openTool" value="开启" />
<input type="button" id="closeTool" value="暂停" />
<input type="button" id="continueTool" disabled="disabled" value="继续" />
<input type="button" id="returnTool" disabled="disabled" readonly value="返回" />
</div>
</div>
</body>
</html>
arcgis api for js轨迹移动.模拟行程



《ArcGIS API for JavaScript:构建轨迹移动与模拟行程应用》 ArcGIS API for JavaScript 是Esri公司提供的一个强大的Web地图开发工具,它允许开发者在网页上创建交互式地图应用程序。这个API广泛应用于地理信息系统(GIS)领域,尤其在构建动态地图、地理分析以及空间数据可视化等方面表现出色。在“arcgis api for js轨迹移动.模拟行程”项目中,我们利用这个API来模拟物体或人的运动轨迹,实现暂停、继续等高级功能。 理解轨迹移动的关键在于地理编码和路径规划。地理编码是将地址转换为地图上的坐标点的过程,而路径规划则是在地图上找到两点之间的最佳路径。ArcGIS API for JavaScript 提供了地理编码服务,可以轻松地将地址转化为经纬度坐标,为轨迹移动提供起点和终点。 接着,模拟行程的核心是利用地图图层和图形对象。我们可以创建动态图层来显示移动轨迹,每个时间点的位置用图形对象表示,如点、线或面。通过定时器更新图形的位置,模拟物体沿预设路径的移动。同时,API中的动画功能可以增强视觉效果,让移动更加平滑自然。 为了实现暂停和继续功能,我们需要在代码中添加事件监听器,监听用户的操作。例如,当用户点击“暂停”按钮时,停止定时器更新,而点击“继续”按钮则恢复定时器。这需要对JavaScript的异步编程有深入的理解,以及熟练掌握ArcGIS API的事件处理机制。 此外,为了优化用户体验,我们还需要考虑性能问题。大数据量的轨迹可能导致页面加载慢或者运行卡顿,因此可能需要采用分段加载策略,只加载可视范围内的轨迹点,或者进行轨迹数据的压缩和简化。ArcGIS API提供了动态图层的剪裁和缓冲区分析等功能,有助于提升性能。 在实际应用中,还可以结合其他GIS服务,如实时数据流服务,实现实时轨迹追踪。ArcGIS Server或ArcGIS Online可提供此类服务,通过订阅这些服务,可以将实时位置数据无缝集成到模拟行程中。 利用ArcGIS API for JavaScript构建轨迹移动和模拟行程,不仅涉及到地图显示、地理编码、路径规划等基础GIS功能,还需要掌握事件驱动编程、性能优化等高级技术。通过对API的深入理解和灵活运用,我们可以创建出丰富多样的GIS应用,满足各种业务需求。



















- 1

- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整
- Mr.T'sBlog2021-04-26链接失效,没有标注arcgis版本 无法运行,差评
- zz133971152352020-06-22太棒的例子了
- qq_263124732020-06-12你是TH哪一位?
- GIS_zhong2019-06-06刚刚好,用上了,相当好用
- 夢往憂傷2018-07-25不知道怎么说,下载还没用过jiegiser#2019-04-17有什么不懂的可以联系我

- 粉丝: 2517
- 资源: 11
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- pygobject2-doc-2.28.6-11.el7.x64-86.rpm.tar.gz
- 基于node.js的课题系统.zip(毕设&课设&实训&大作业&竞赛&项目)
- 18考试真题最近的t8.txt
- 18考试真题最近的t9.txt
- 18考试真题最近的t10.txt
- 18考试真题最近的t11.txt
- API 934-A 2025 高温高压氢气用2¼Cr-1Mo、2¼Cr-1Mo-¼V、3Cr-1Mo和3Cr-1Mo-¼V钢厚壁压力容器的材料和制造.pdf
- 18考试真题最近的t12.txt
- API SPEC 5CT-2025 套管和油管Casing and Tubing.pdf
- 18考试真题最近的t13.txt
- 双有源桥式变换器驱动超级电容实现高功率转换:开关频率达10kHz,电压提升从400V至700V,功率达10kW,双有源桥式变换器驱动超级电容实现高功率转换:开关频率达10kHz,电压提升从400V至7
- 基于ssh框架的线上图书借阅系统(毕设&课设&实训&大作业&竞赛&项目)
- 18考试真题最近的t14.txt
- 18考试真题最近的t15.txt
- 基于滑模观测器的Matlab Simulink电流传感器容错切换控制研究:矢量控制下的切换机制与故障模拟,基于滑模观测器的Matlab Simulink电流传感器容错切换控制研究:矢量控制下的切换机制
- 18考试真题最近的t16.txt


