Cesium通过经纬度构建实体对象选择框SelectionIndicator

最近做Cesium项目，具体内容为在Cesium中加载模型，通过点击地球上的模型可以出现弹出框并在弹出框中显示模型的详细信息，在左侧出现模型列表DIV，通过左侧模型列表中DIV可以实现定位到模型位置，并出现弹出框显示对应的模型详细信息。

出现问题

当我们点击地球表面出现的模型的时候，模型外面会出现一个选择框，如下图

解决思路

1. 通过查看源码可以看到，实现模型外侧的选择款是给viewer当前选择的实体对象构建出来，设置Viewer._selectedEntity为当前选择模型；

2. 所以在可以拿到经纬度的情况下，我们可以构建出一个position对象；
   var position=Cesium.Cartesian3.fromDegrees(112.315216, 39.5125612,0);

3. 通过position对象构建一个临时的实体对象；

    var model2=new Cesium.Entity({
   		    	position:position
   })
   

4. 将构建的实体对象设置为viewer选择的实体对象；

   viewer._selectedEntity = value;
   

5. 然后添加外部选择框；

   viewer._selectedEntity = value;
                       var selectionIndicatorViewModel = defined(viewer._selectionIndicator) ? viewer._selectionIndicator.viewModel : undefined;
                       if (defined(value)) {
                           if (defined(selectionIndicatorViewModel)) {
                               selectionIndicatorViewModel.animateAppear();
                           }
                       } else if (defined(selectionIndicatorViewModel)) {
                           selectionIndicatorViewModel.animateDepart();
                       }
                       viewer._selectedEntityChanged.raiseEvent(value);
   

通过以上步骤就可以在模型外部出现选择框

全部代码如下

<script>
   	var viewer = new Cesium.Viewer('cesiumContainer',{ 
   		//需要进行可视化的数据源的集合
       animation: false, //是否显示动画控件
        shouldAnimate : true,
        homeButton: false, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false , //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        //fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
	 	 imageryProvider:new Cesium.createTileMapServiceImageryProvider({  
		     url : 'http://127.0.0.18080/arcgisTile',
		     credit:"googvarile"
		 })
	});
	var layers = viewer.imageryLayers;  
	viewer._cesiumWidget._creditContainer.style.display="none";
	var position=Cesium.Cartesian3.fromDegrees(112.315216, 39.5125612,0);
	/*viewer.camera.setView({
		destination: Cesium.Cartesian3.fromDegrees(112.315216, 39.5125612, 10000)  //定位坐标点，建议使用谷歌地球坐标位置无偏差
	});*/
	viewer.scene.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(112.315216, 39.5125612, 10000),  //定位坐标点，建议使用谷歌地球坐标位置无偏差
		duration:15   //定位的时间间隔
	});
	var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(click) {
    	debugger
       // 处理鼠标按下事件
       // 获取鼠标当前位置
        // console.log('1111');
        var pick = viewer.scene.pick(click.position);
        //选中某模型   pick选中的对象
        if(pick && pick.id){
        	/*alert(pick.id._code);*/
        }

     }, Cesium.ScreenSpaceEventType.LEFT_CLICK  );
    addFengjiModel(position);
	function  addFengjiModel(position){
	var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(180), 0, 0);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    var color=Cesium.Color.LIME ;
    // 添加模型
    var model = viewer.entities.add({
        // 模型id
       // id:'model',
        // 模型位置
        position: position,
        // 模型方向
        orientation: orientation,
        // 模型资源
        model: {
            // 模型路径
            uri: '../model/fengji.gltf',
            // 模型最小刻度
            minimumPixelSize: 128,
            // 模型最大刻度
            maximumSize: 128,
            //设置模型最大放大大小
            maximumScale : 200000,
            // 模型是否可见
            show: true,
            // 模型轮廓颜色
            silhouetteColor:Cesium.Color.WHITE,
            // 模型颜色  ，这里可以设置颜色的变化
            color: color ,
              // 仅用于调试，显示魔仙绘制时的线框
	        debugWireframe : false,
	        // 仅用于调试。显示模型绘制时的边界球。
	        debugShowBoundingVolume : false,
	        scale:100,
	        runAnimations:true                //是否运行模型中的动画效果
        },
        // 添加描述
        description: '风机模型'
    });  
    //构建一个临时实体对象
    var model2=new Cesium.Entity({
    	position:position
    })
    // 视角切换到模型
    //viewer.trackedEntity = model;
    selectEntity(model2);
    //判断变量是否存在值
    function defined(value) {
        return value !== undefined && value !== null;
    }
    function selectEntity(value){
	 if (viewer._selectedEntity !== value) {
	 
        viewer._selectedEntity = value;
        var selectionIndicatorViewModel = defined(viewer._selectionIndicator) ? viewer._selectionIndicator.viewModel : undefined;
        if (defined(value)) {
            if (defined(selectionIndicatorViewModel)) {
                selectionIndicatorViewModel.animateAppear();
            }
        } else if (defined(selectionIndicatorViewModel)) {
            selectionIndicatorViewModel.animateDepart();
        }
        viewer._selectedEntityChanged.raiseEvent(value);
    }
    }
}
</script>