Cesium开发小技巧（二）

Cesium飞行跳转、直接跳转

• 飞行定位，就是获取当前用户输入的经纬度、海拔高度进行飞行定位。定位时有一段飞行动画。主要调用的方法是：viewer.scene.camera.flyTo方法，查询API可以知道flyTo方法的参数和效果。

  
  

• 直接定位，就是获取当前用户输入的经纬度、海拔高度进行直接定位。定位是没有动画效果直接跳转到输入的坐标位置。主要调用的方法是：viewer.camera.setView方法，查询API可以知道setView方法的参数和效果。

  
  
  

//HTML代码部分
<input id="lon" style="position:absolute;top:20px;left: 164px; width: 100px" value="输入经度">
<input id="lat" style="position:absolute;top:20px;left: 280px; width: 100px" value="输入纬度">
<input id="heigh" style="position:absolute;top:20px;left: 390px; width: 100px" value="输入高度">
<button id="position" style="position:absolute;top:18px;left: 500px; width: 75px" onclick="Fly()">飞行定位</button>
<button id="fly" style="position:absolute;top:18px;left: 580px; width: 75px" onclick="position()">直接定位</button>

//JS代码部分
/**
 * 飞行定位
 * */
var Fly = function() {
        var lon = Number(document.getElementById("lon").value);
        var lat = Number(document.getElementById("lat").value);
        console.log(lon);
        if(lon == NaN && lat == NaN){
            alert("请输入坐标进行定位");
        }
        else{
            viewer.scene.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(lon, lat, 10000),  //定位坐标点，建议使用谷歌地球坐标位置无偏差
                duration:5   //定位的时间间隔
            });
        }

}

/**
 * 直接定位
 * */
var position = function () {
     var lon = Number(document.getElementById("lon").value);
     var lat = Number(document.getElementById("lat").value);

     if(lon == NaN && lat == NaN){
         alert("请输入坐标进行定位");
     }
      else{
         viewer.camera.setView({
             destination: Cesium.Cartesian3.fromDegrees(lon, lat , 10000)  //定位坐标点，建议使用谷歌地球坐标位置无偏差
         });
     }

}

特别值得说的就是前端获得用户输入的经纬度和高度是String类型的，直接当参数传到方法中会报错。这里我使用了JavaScript中的Number()函数将String类型转换成数值类型在传入方法中就能执行。（简书上不能上传视频，不能给大家看到效果，大家可以关注公众号看Demo的视频。）