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 + "米&nbsp;&nbsp;&nbsp;&nbsp;經度：" + Math.round(longitudeString * 1 * 10000) / 10000 + "&nbsp;&nbsp;&nbsp;&nbsp;緯度：" + Math.round(latitudeString * 1 * 10000) / 10000);
            $("#mouse-map-info2").html("當前視角高度：" + height + "米&nbsp;&nbsp;&nbsp;&nbsp;經度：" + dfmx[0] + "°" + dfmx[1] + "′" + dfmx[2] + "″" + "&nbsp;&nbsp;&nbsp;&nbsp;緯度：" + 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 + "米&nbsp;&nbsp;&nbsp;&nbsp;經度：" + Math.round(longitudeString * 1 * 10000) / 10000 + "&nbsp;&nbsp;&nbsp;&nbsp;緯度：" + Math.round(latitudeString * 1 * 10000) / 10000);
        $("#mouse-map-info2").html("當前視角高度：" + height + "米&nbsp;&nbsp;&nbsp;&nbsp;經度：" + dfmx[0] + "°" + dfmx[1] + "′" + dfmx[2] + "″" + "&nbsp;&nbsp;&nbsp;&nbsp;緯度：" + 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);
    }