cesium相关问题

• 初始化viewer

var viewer = new Cesium.Viewer( 'cesium容器的id', {  
    animation : false,//是否创建动画小器件，左下角仪表  
    baseLayerPicker : false,//是否显示图层选择器  
    fullscreenButton : false,//是否显示全屏按钮  
    geocoder : false,//是否显示geocoder小器件，右上角查询按钮  
    homeButton : false,//是否显示Home按钮  
    infoBox : false,//是否显示信息框  
    sceneModePicker : false,//是否显示3D/2D选择器  
    selectionIndicator : false,//是否显示选取指示器组件  
    timeline : false,//是否显示时间轴  
    navigationHelpButton : false,//是否显示右上角的帮助按钮  
    scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源  
    clock : new Cesium.Clock(),//用于控制当前时间的时钟对象  
    selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义  
    imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组  
    selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义  
    terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组  
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "http://{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&L={z}&Z={z}&Y={y}&X={x}",
        credit: new Cesium.Credit("高德地图服务"),
        subdomains: ["webrd01", "webrd02", "webrd03", "webrd04"],
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 18
    }),
    terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅baseLayerPicker设为false有意义  
    skyBox : new Cesium.SkyBox({  
        sources : {  
          positiveX : 'Cesium-1.7.1/Skybox/px.jpg',  
          negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',  
          positiveY : 'Cesium-1.7.1/Skybox/py.jpg',  
          negativeY : 'Cesium-1.7.1/Skybox/my.jpg',  
          positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',  
          negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'  
        }  
    }),//用于渲染星空的SkyBox对象  
    fullscreenElement : document.body,//全屏时渲染的HTML元素,  
    useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true  
    targetFrameRate : undefined,//使用默认render loop时的帧率  
    showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息  
    automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置  
    contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）  
    sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式  
    mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系  
    dataSources : new Cesium.DataSourceCollection()  
    //需要进行可视化的数据源的集合  
});

var imageryLayers = viewer.imageryLayers;

• 网格影像

var GridImagery= new Cesium.GridImageryProvider();
var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery);//添加网格图层
imageryLayers.raiseToTop(GridImageryLayer);//将网格图层置顶*/

• 设置homebutton的位置

Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)

• 点击二三维切换按钮时候，切换了会显示一个大图，并没有回到原来的位置上去

解决办法一：

 viewer.sceneModePicker.viewModel.duration = 0.0;//去掉二三维切换动画效果

    设置这个参数，二三维切换的时候位置就会保持原来的了
    原理：  cesium底层的代码做了一个判断，如果延时参数大于0，就缩放到全球显示一个切换动画，设成0就没这个动画了
解决办法二：
    切换二三维的自己做UI，调用底层的代码切换，都可以实现切换二三维
    初始定位：

 var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15000);
    // 覆盖主页按钮的行为
    viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
        // 飞到自定义位置
        viewer.camera.flyToBoundingSphere(boundingSphere);
        // 告诉home按钮不要做任何事情
        commandInfo.cancel = true;
    });
    // 设置自定义初始位置
    viewer.camera.flyToBoundingSphere(boundingSphere, {duration: 0});

 

• 改变回到主视角的英文title为中文

viewer.homeButton.container.childNodes[0].title="回到主视角";

• 改变切换全屏的英文title为中文

viewer.fullscreenButton.container.childNodes[0].title="全屏";

• 取值为true时，球体会有高程遮挡效果（在没有地形时候也会有高程遮挡效果）

viewer.scene.globe.depthTestAgainstTerrain = false;

• Cesium地下可视化  

Cesium三维球开发的时候，会遇到需要对地下数据可视化的情况，如果只是显示的需要，可以采用这个办法：移除球上的imageryLayers，再设置Cesium球体的透明度，将绘制元素的高度设置为负值（需要夸张一定倍数）。
viewer.scene.globe.imageryLayers.removeAll();
viewer.scene.globe.baseColor = new Cesium.Color(0/255,0/255,0/255,0.01);

• 设置背景色

viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = Cesium.Color.RED;

• 隐藏月亮和太阳

viewer.scene.sun.show = false; 
viewer.scene.moon.show = false;

• 加载指北针

loadNavigation(viewer);

• 实时显示鼠标划过的经纬高

getPosition(viewer);

• 去除版权信息

viewer._cesiumWidget._creditContainer.style.display = "none";

•  切换二三维

viewer.scene.morphTo3D();

 改变相机位置

viewer.camera.setView({
    // Cesium的座标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
    // fromDegrees()方法，将经纬度和高程转换为世界座标
    destination: Cesium.Cartesian3.fromDegrees(117.48, 30.67, 15000.0),
    orientation: {
       // 指向
       heading: Cesium.Math.toRadians(90, 0),
       // 视角
       pitch: Cesium.Math.toRadians(-90),
       roll: 0.0
     }
});

• 地区搜索

AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
    var poiPicker = new PoiPicker({
        //city:'北京',
        input: 'search-content'
    });
    //初始化poiPicker
    poiPickerReady(poiPicker);
});

• 高程

viewer.terrainProvider = Cesium.createWorldTerrain();
tracker = new GlobeTracker(viewer);// 量算
if (extent != undefined && extent != null) {
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees((extent.xmin + extent.xmax) / 2, (extent.ymin + extent.ymax) / 2, extent.height),
    });
}

• 关于cesium加载kml线贴地问题

在加载kml文件时，有的文件，线可以贴地，有的不能贴地，主要原因是原始的kml文件中设置了贴地，在cesium中才贴地，否则在cesium中设置clampToGround: true也无法实现贴地；
1、原始数据格式
kml中贴地格式如下：tessellate 标签为1时贴地，没有设置贴地一般就没有tessellate这个标签；

2、cesium中加载kml(主要包含为线和点)

var len = viewer.dataSources.length;
if (len > 0) {
	for (var i = 0; i < len; i++) {
	    var dataSource = viewer.dataSources.get(i);
	    if (dataSource._name && dataSource._name == "我的地点.kmz") {
	         viewer.dataSources.remove(dataSource);
	    }
	}
}
var options = {
	//开启贴地
	camera: viewer.scene.camera,
	canvas: viewer.scene.canvas,
	clampToGround: true
};
viewer.dataSources.add(Cesium.KmlDataSource.load('kmz文件的位置',options))
    .then(function (dataSource) {
	     viewer.clock.shouldAnimate = false;
	     //你要飞的位置
	     viewer.camera.flyTo({
	         destination: Cesium.Cartesian3.fromDegrees(113.0028, 36.5436, 4010)
	     });
     });

• 点击地图加点事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
$("#show-collect-btn").unbind("click").click(function () {
    //改变鼠标的style
	document.body.setAttribute("style", "cursor:Crosshair");
	handler.setInputAction(function(movement) {
		let cartesian = viewer.scene.pickPosition(movement.position);
	    // 将度转为经纬度
	    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
	    var lon = Cesium.Math.toDegrees(cartographic.longitude);
	    var lat = Cesium.Math.toDegrees(cartographic.latitude);
	    var MouseHeight = cartographic.height;//模型高度
		viewer.entities.remove(citizensBankPark);
		citizensBankPark = viewer.entities.add( {  
			name : 'new_point',  
			position : Cesium.Cartesian3.fromDegrees(lon*1, lat*1, MouseHeight),
			point : { //点  
				pixelSize : 5,  
				color : Cesium.Color.RED,  
				outlineColor : Cesium.Color.WHITE,  
				outlineWidth : 2  
			 },  
			 label : { //文字标签  
				text : '新增点',  
				font : '14pt monospace',  
				style : Cesium.LabelStyle.FILL_AND_OUTLINE,  
				color : Cesium.Color.fromCssColorString('#317ef3'),
				outlineWidth : 2,  
				verticalOrigin : Cesium.VerticalOrigin.TOP, //垂直方向计算标签的位置              
                pixelOffset : new Cesium.Cartesian2( 0, -60 )   //偏移量  
			 },
			 billboard : { //图标  
				 image : '../image/[email protected]',  
				     width : 35,  
				     height : 35,
				     pixelOffset : new Cesium.Cartesian2( 0, -22 )   //偏移量  
				 }
			  });
			}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        });

•  关闭在地图上加点操作

handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
//鼠标样式回复默认
document.body.setAttribute("style", "default");

•  后台得到数据添加到地图上的方法

function addMarker(param){
  //添加之前先删除
  delMarker(param.id,param.type); 
  // 类型不同 加载不同的图标
  var imageUrl = param.type == 1 ? '1.png' : '2.png';
  if(param.type == 2 && param.status == 1){
     // 传入经度、纬度、高度 使当前这个点闪烁
     f2(param.lon,param.lat,param.height,"sh_"+param.id);
  }else if(param.type == 2 && param.status == 2){
     var getByIdBox = viewer.entities.getById("sh_"+param.id);
     viewer.entities.remove(getByIdBox);
  }
  var addMarkerObj = {  
	  id:param.id,
	  status:param.status,
	  type:param.type,
	  name : 'new_point',
	  position : Cesium.Cartesian3.fromDegrees(param.lon, param.lat,param.height),  
	  point : { //点  
		  pixelSize : 1,  
		  color : Cesium.Color.RED,  
		  outlineColor : Cesium.Color.WHITE,  
		  outlineWidth : 2  
	  },  
	  label : { //文字标签  
		  text : param.holeName,  
		  font : '14pt monospace',  
		  color : Cesium.Color.fromCssColorString('#fff'),
		  fillColor: Cesium.Color.fromCssColorString('#0b2070'),
		  style : Cesium.LabelStyle.FILL_AND_OUTLINE,  
		  outlineWidth :2,  
		  verticalOrigin : Cesium.VerticalOrigin.TOP, //垂直方向以底部来计算标签的位置  
		  pixelOffset : new Cesium.Cartesian2( 0, -60)   //偏移量  
	  },
	  billboard : { //图标  
		  image : imageUrl,  
		  width : 35,  
		  height : 35,
		  pixelOffset : new Cesium.Cartesian2( 0, -22 )   //偏移量  
	  }
  };
  var obj = {
	  "marker":param,
	  "id":param.commDeviceNumber + param.deviceNumber + param.defenceAreaNumber,
	  "holeName":param.holeName,
	  "status":param.status
  }
  if(param.type == 1){
	  videoMarkers.push(obj);
  }else if(param.type == 2){
	  policeMarkers.push(obj);
  }
  viewer.entities.add(addMarkerObj);
}

•  删除marker的方法

function delMarker(id,type){
    	var getByIdBox = null;
    	if(type == 1){
    		for(var j=0; j<videoMarkers.length; j++){
				if(id == videoMarkers[j].marker.id){
					getByIdBox = viewer.entities.getById('' + id);
				    viewer.entities.remove(getByIdBox);
				}
			}
    	}else if(type == 2){
    		for(var q=0; q<policeMarkers.length; q++){
				if(id == policeMarkers[q].marker.id){
					getByIdBox = viewer.entities.getById('' + id);
				    viewer.entities.remove(getByIdBox);
				}
			}
    	}
    }

• 加载指北针的方法

function loadNavigation(viewer1) {
    viewer = viewer1;
    var options = {};
    options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
    options.enableCompass= true; // 罗盘
    options.enableZoomControls= false; // 缩放控件
    options.enableDistanceLegend= false; // 距离图例
    options.enableCompassOuterRing= true; // 指南针外环
    viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
}

• 实时显示鼠标划过的经纬高的方法

function getPosition(viewer) {
    //得到当前三维场景
    var scene = viewer.scene;
    //得到当前三维场景的椭球体
    var ellipsoid = scene.globe.ellipsoid;
    var longitudeString = null;
    var latitudeString = null;
    var height = null;
    var cartesian = null;
    // 定义当前场景的画布元素的事件处理
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    //设置鼠标移动事件的处理函数，这里负责监听x,y座标值变化
    handler.setInputAction(function (movement) {
        //通过指定的椭球或者地图对应的座标系，将鼠标的二维座标转换为对应椭球体三维座标
        cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        if (cartesian) {
            //将笛卡尔座标转换为地理座标
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            //将弧度转为度的十进制度表示
            longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
            latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
            //获取相机高度
            height = Math.ceil(viewer.camera.positionCartographic.height);
            NowHeight = height;
            var dfmx = formatDegree(longitudeString * 1);
            var dfmy = formatDegree(latitudeString * 1);
            $("#mouse-map-info").html("当前视角高度：" + height + "米    经度：" + Math.round(longitudeString * 1 * 10000) / 10000 + "    纬度：" + Math.round(latitudeString * 1 * 10000) / 10000);
            $("#mouse-map-info2").html("当前视角高度：" + height + "米    经度：" + dfmx[0] + "°" + dfmx[1] + "′" + dfmx[2] + "″" + "    纬度：" + dfmy[0] + "°" + dfmy[1] + "′" + dfmy[2] + "″");
        } else {

        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    //设置鼠标滚动事件的处理函数，这里负责监听高度值变化
    handler.setInputAction(function (wheelment) {
        height = Math.ceil(viewer.camera.positionCartographic.height);
        NowHeight = height;
        var dfmx = formatDegree(longitudeString * 1);
        var dfmy = formatDegree(latitudeString * 1);
        $("#mouse-map-info").html("当前视角高度：" + height + "米    经度：" + Math.round(longitudeString * 1 * 10000) / 10000 + "    纬度：" + Math.round(latitudeString * 1 * 10000) / 10000);
        $("#mouse-map-info2").html("当前视角高度：" + height + "米    经度：" + dfmx[0] + "°" + dfmx[1] + "′" + dfmx[2] + "″" + "    纬度：" + dfmy[0] + "°" + dfmy[1] + "′" + dfmy[2] + "″");
    }, Cesium.ScreenSpaceEventType.WHEEL);
}

• 地区搜索

function poiPickerReady(poiPicker) {
    window.poiPicker = poiPicker;
    var marker = new AMap.Marker();
    var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20)
    });
    //选取了某个POI
    poiPicker.on('poiPicked', function (poiResult) {
//      var lnglat = [poiResult.item.location.lng,poiResult.item.location.lat];
//      var coord = AMap.map.lngLatToGeodeticCoord(lnglat);
        var longitude = parseInt(poiResult.item.location.lng);
        var latitude = parseInt(poiResult.item.location.lat);
        if (locationEntity) {
            viewer.entities.remove(locationEntity);    //viewer 3D cesium实体
        }
        locationEntity = new Cesium.Entity({
            id: 'locationEntity',
            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
            point: {
                pixelSize: 10,
                color: Cesium.Color.WHITE.withAlpha(0),
                outlineColor: Cesium.Color.WHITE.withAlpha(0),
                outlineWidth: 1
            }
        });
        viewer.entities.add(locationEntity);
        viewer.flyTo(locationEntity, {
            offset: {
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-90),
                range: 10000
            }
        });
//        $('#body-page-box').hide();
    });
}

•  使marker点闪烁

function f1(lon,lat,height) {
        var x=1;
        var flog=true;
        viewer.entities.add({
            name:"圆形区域闪烁",
            position:Cesium.Cartesian3.fromDegrees(lon,lat,0),
            ellipse : {
                semiMinorAxis : 200.0,
                semiMajorAxis : 200.0,
                height : 0,
                material:new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function () {
                    if(flog){
                        x=x-0.05;
                        if(x<=0){
                            flog=false;
                        }
                    }else{
                        x=x+0.05;
                        if(x>=1){
                            flog=true;
                        }
                    }
                    return Cesium.Color.RED.withAlpha(x);
                },false))
            }
        });
    }
    
    function f2(lon,lat,height,id){
        var x=1;
        var flog=true;
        viewer.entities.add({
       	    id:id,
            name:"圆点point闪烁",
            position:Cesium.Cartesian3.fromDegrees(lon,lat,height),
            point : {
                show : true, // default
                color :new Cesium.CallbackProperty(function () {
                    if(flog){
                        x=x-0.05;
                        if(x<=0){
                            flog=false;
                        }
                    }else{
                        x=x+0.05;
                        if(x>=1){
                            flog=true;
                        }
                    }
                    return Cesium.Color.RED.withAlpha(x);
                },false),
                pixelSize : 30, // default: 1
                outlineWidth :0
            }
        });
    }

• 点击marker出气泡

function popMarker(viewer) {
   var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
   var scene = viewer.scene;
   var infoDiv = '<div id="trackPopUp" class="trackPopUp">' +
       '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">' +
            '<a class="leaflet-popup-close-button" href="#">×</a>' +
            '<div class="leaflet-popup-content-wrapper">' +
            '<div id="trackPopUpLink" class="leaflet-popup-content"></div></div>' +
        '</div></div>';
   $("#cesium-map").append(infoDiv);
   //绑定鼠标单击
   handler.setInputAction(function (movement) {
      var pick = scene.pick(movement.position);
      if (pick && pick.id) {
          $('#trackPopUp').show();
          popContent = '<div>' + pick.id._name + '</div><table><tbody>';
          var data = {
			 "id":pick.id._id
		  };
          var requestUrl = 地址;
		  jPost(requestUrl,JSON.stringify(data),function(res){
			 if(res.code == 1){
				 var data = res.data;
				 for(var key in data){
					popContent += '<tr><td>'+key+'</th><td>'+data[key]+'</td></tr>';      
				 }
				 popContent += '</tbody></table>';
				 var obj = { position: movement.position, content: popContent };
                 infoWindow(obj);
			  }
		  });
          function infoWindow(obj) {
            var picked = scene.pick(obj.position);
            if (Cesium.defined(picked)) {
            var id = Cesium.defaultValue(picked.id, picked.primitive.id);
            if (id instanceof Cesium.Entity) {
              $(".cesium-selection-wrapper").show();
              $('#trackPopUpLink').empty();
              $('#trackPopUpLink').append(obj.content);
              function positionPopUp(c) {
                var x = c.x - ($('#trackPopUpContent').width()) / 2;
                var y = c.y - ($('#trackPopUpContent').height());
 $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');}
                var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                $('#trackPopUp').show();
                positionPopUp(c); // Initial position
                $('.leaflet-popup-close-button').click(function () {
                   $('#trackPopUp').hide();
                   $('#trackPopUpLink').empty();
                   $(".cesium-selection-wrapper").hide();
                   return false;
                 });
                 return id;
               }
              }
             }
            }
            else {
                $('#trackPopUp').hide();
            }
 
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        //绑定地图移动
        handler.setInputAction(function (movement) {
            $('#trackPopUp').hide();
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
        //绑定地图缩放
        handler.setInputAction(function (movement) {
            $('#trackPopUp').hide();
        }, Cesium.ScreenSpaceEventType.WHEEL);
        //绑定滚轮点击事件
        handler.setInputAction(function (movement) {
            $('#trackPopUp').hide();
        }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
    }