学习Cesium记录

这篇文章只是记录我学习的过程，会持续更新，侵删
在这里感谢原博主的文章http://blog.sina.com.cn/s/blog_15e866bbe0102xnml.html
2018.12.7
模型加载
加载的代码为：
var entity = viewer.entities.add({ name: url, position: position, orientation: orientation, model: { uri: url, minimumPixelSize: 128, maximumScale: 20000 } });
参数：minimumPixelSize ：无论缩放如何，模型近似最小像素大小来确保即使在观看者缩小时模型也可见
maximumScale ：模型的最大比例尺寸，给出一个上限Model#minimumPixelSize，确保模型永远不是一个不合理的规模。
基础代码还同之前一样，
①.用ArcGIS/rest/services做数据源
②.创建viewer并且设置相应小组件
③.用你电脑上的gltf文件做模型，obj格式在线转gltf格式，因为Cesium支持gltf，一般常用的三维建模工具都不支持gltf格式文件的直接导出。
④.用核心代码加载

1.加载arcGIS数据源
var arcGISMap = new Cesium.ArcGisMapServerImageryProvider({
    		url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    	});
 2.viewer
 var viewer = new Cesium.Viewer('cesiumContainer',{
    		imageryProvider:arcGISMap,
    		conytextOptions:{
    			webgl:{
    				alpha:true
    			}
    		},
    		creditContainer:'creditContainer',
    		selectionIndicator: false,
    		animation:false,
    		baseLayerPicker:false,
    		geocoder:false,
    		timeline:false,
    		sceneModePicker:true,//投影方式控件
    		navigationHelpButton:false,//帮助信息控件
    		infoBox:false,//显示点击点要素之后显示的信息
    		fullscreenButton:true
    	});
3.创建3D模型的方法
createModel('./ceshi/file.gltf',0.0);
    	function createModel(url, height) {
    	//查过API了解到viewer中的entity是返回一个EntityCollection，先从集合中删除所有实体。
        viewer.entities.removeAll();
        var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
        var heading = Cesium.Math.toRadians(135);
        var pitch = 0;
        var roll = 0;
        //HeadingPitchRoll中的三个参数分别是：航向，俯仰，滚动，航向是围绕负z轴的旋转。俯仰是围绕负y轴的旋转。滚动是围绕正x轴的旋转。
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        //headingPitchRollQuaternion 是transform中的一个方法，API中发现他有5个参数，但是我没弄明白具体是怎么和意思，如果有大佬知道还请告知
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
       4. var entity = viewer.entities.add({
            name: url,
            position: position,
            orientation: orientation,
            model: {
                uri: url,
               // 无论缩放如何，模型近似最小像素大小来确保即使在观看者缩小时模型也可见
                minimumPixelSize: 128,
                //模型的最大比例尺寸，给出一个上限Model#minimumPixelSize，确保模型永远不是一个不合理的规模。
                maximumScale: 20000
            }
        });
        //trackedEntity ：获取或设置摄像头当前正在跟踪的Entity实例。
        viewer.trackedEntity = entity;
    }

效果图：

因为刚学Cesium没多久，而且还是看着大佬的总结然后自己在一点一点按照自己理解的总结，和大牛差的很远，但却是我自己的理解，难免会出错，恳请大家批评指正。

2018.12.6
baseLayerPicker的使用
步骤：
①：创建数据源
②：设置ProviderViewModel

①：用ArcGIS/rest/services做数据源
var arcGISMap = new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      });
   ②：设置ProviderViewModel
   var providerViewModels = [];
   var arcGISMapModel = new Cesium.ProviderViewModel({
            name: 'arcGISMap ',
            //iconUrl:表示图层的图标。tooltip:用于显示项目被鼠标悬停的工具提示。
            iconUrl: Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),
            tooltip: 'ArcGIS 地图服务 \nhttps://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
            creationFunction: function () {
                return esriMap;
            }
        });
        providerViewModels.push(esriMapModel);
        var viewer = new Cesium.Viewer('cesiumContainer', {
            //       imageryProvider:globemap, //指定此项 则必须设置： baseLayerPicker: false
            contextOptions: {
                webgl: {
                    alpha: true
                }
            },
            creditContainer: "creditContainer",
            selectionIndicator: false,
            animation: false,  //是否显示动画控件
                   // baseLayerPicker就是viewer提供的一个可以选择地图的小组件，如果设置了imageryProvider则baseLayerPicker要设置成fasle
            **//   baseLayerPicker: false, //是否显示图层选择控件**
            imageryProviderViewModels: providerViewModels,//自定义扩展
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false,  //是否显示点击要素之后显示的信息
            fullscreenButton: true
        });

转载自：https://blog.csdn.net/longlongzuo/article/details/84859048