这段时间从项目中接触了cesium。在实现其中一个功能时，需要在页面中将地图缩放到某个视角并锁定。缩放到某个视角很简单，我想大家会用zoomto或者flyto实现。但是如何锁定视角不让相机移动呢？吐槽一下cesium的API，比较难以找到功能。但是经过不断查找终于找到一个方法是Scene场景中控制相机的API。写出来防止大家采坑。
cesium.screenSpaceCameraCotroller 是根据鼠标输入到画布修改摄像机的位置和方向。
API描述
该对象的类型是布尔型，如果为true就是接收来自用户的鼠标控制相机方法。其中包括了5种输入分别为：
1、enableTranslate：地图平移
2、enableZoom：地图缩放
3、enableLook：自由视角
4、enableRotate：地图旋转
5、enableTilt：倾斜相机
当然我们也可以只设置单项禁用，根据自己的实际需要。当设置后我们就锁定了相机
function setCameraController(value,map){
map.map.map._viewer.scene._screenSpaceCameraController.enableRotate = value;
map.map.map._viewer.scene._screenSpaceCameraController.enableTranslate = value;
map.map.map._viewer.scene._screenSpaceCameraController.enableZoom = value;
map.map.map._viewer.scene._screenSpaceCameraController.enableTilt = value;
map.map.map._viewer.scene._screenSpaceCameraController.enableLook = value;
}
之后我们看弹出图表如何实现。这里我用的是echarts图表。想用其他的也行，换汤不换药。通过jquery创建div对象的方法。然后通过cssText来设置div的css样式，也可以直接写在上面定好（注意这里的div对象是数组，我们要获取数组里面的对象）。接着获取需要的父级div，注意不要直接在cesium的div里添加子级div。会导致图层错误（mapbox也会这样）。然后我们在父级div中添加我们创建的div，最后初始化echarts图表然后设置我们需要的echarts图表。
var newdiv = $('<div class="newdiv" v-show="isShow" style ="width: 1000px;height: 618px;" ></div>');
newdiv[0].style.cssText+="position:absolute;right:300px;top:100px;";
var mapdiv = document.getElementById("homePage-map-c-map");
mapdiv.appendChild(newdiv[0]);
var mtcontainer1 = echarts.init(newdiv[0]);
mtcontainer1.setOption(echartsOption);
注意删除时需要把对象删除干净，并且如果要恢复相机控制，别忘处理相机控制。
