ArcGIS API for JavaScript 4.X+360度环视

最新推荐文章于 2024-04-13 15:24:47 发布

足迹2017

最新推荐文章于 2024-04-13 15:24:47 发布

阅读量762

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_28459505/article/details/98642786

ArcGIS API for JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

GIS工作室

2 篇文章

订阅专栏

本文介绍了一个使用ArcGIS API实现的360度环视地图动画项目，通过JavaScript编程，实现了地图的自动旋转和平滑过渡效果，中心位于特定的地理坐标，提供了全方位的视角体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,  user-scalable=no">
	<title>360度环视</title>
	<style type="text/css">
		html,
		body,
		#viewDiv {
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}
		#optionsDiv {
        position: absolute;
        bottom: 17px;
        width: 100%;
        padding: 20px 0;
        z-index: 1;
        text-align: center;
      }
	</style>
	<link rel="stylesheet" href="http://localhost:8080/api412/esri/css/esri.css">
	<script src="http://localhost:8080/api412/init.js"></script>
	<script>
		require([
			"esri/Map",
			"esri/views/SceneView",
			"dojo/domReady!"
		], function (Map, SceneView) {
			var map = new Map({
				"basemap": "hybrid",
				"ground": "world-elevation"
			});
			var sceneView = new SceneView({
				map: map,
				container: "viewDiv",
				scale: 80000,
				center: [86.859291, 28.143449]
			});
           var btn2 = document.getElementById('btn2');
               btn2.addEventListener('click', move);
               btn2.addEventListener('click', remove); 
	         //btn2.removeEventListener('click', showMsg); //去除绑定		 			   
//核心算法			   
       var i = 0;	
       var x0=86.859291;var y0=28.143449; var R=0.02; //旋转半径，1度代表110公里
	   var X1; var Y1; 
       function move(){
		setTimeout(function(){		
			i=i+1   //每次变换角度值
			if(i<360){
				move()
			}
			X1=x0+R*Math.cos((360-i)*Math.PI/180);
			Y1=y0+R*Math.sin((360-i)*Math.PI/180);
		 sceneView.goTo({
		  //target: [-122, 38, 50000],      //zoom: 13,      //显示级别
		   heading: 360-i,    //方向角
		   lng:X1,   //经度
		   lat:Y1,    //维度
		   altitude:80000,   //高程
		   tilt: 45     //倾斜角度
            });			
		}, 50) //毫秒		
	}
	function remove(){ i=0; }
});
</script>
</head>
<body>
 <div id="viewDiv">
    <div id="optionsDiv">
      <button id="btn2">360度环视</button>
    </div>
</div>
</body>
</html>