Cesium影像服务—BaseLayerPicker使用

由于图层操作是最基本的操作，cesium自己封装了现成的组件：BaseLayerPicker。本篇博客我们就学习下内置BaseLayerPicker的使用以及如何自定义实现BaseLayerPicker（基础底图）。

1、修改内置BaseLayerPicker

在初始化Viewer时，将baseLayerPicker设置为true即可显示BaseLayerPicker控件。我们可以通过将viewer.baseLayerPicker.viewModel.selectedImagery 设置为viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6]来设置BaseLayerPicker的默认数据源（注：我们这里设置的[5]）。

        //一：使用cesium内置数据源选择工具：BaseLayerPicker
        var viewer = new Cesium.Viewer('cesiumContainer', {
            TerrainProvider:null,
            selectionIndicator:false,
            animation:false,  //是否显示动画控件
            baseLayerPicker:true, //是否显示图层选择控件
            geocoder:false, //是否显示地名查找控件
            timeline:false, //是否显示时间线控件
            sceneModePicker:true, //是否显示投影方式控件
            navigationHelpButton:false, //是否显示帮助信息控件
            infoBox:false,  //是否显示点击要素之后显示的信息
            fullscreenButton:true
        });
        //取消双击事件
       viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //设置homebutton的位置
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE=
                Cesium.Rectangle.fromDegrees(110.15,34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
        //设置初始位置
        viewer.camera.setView({
            destination:Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
        });
        //设置默认地图源
        viewer.baseLayerPicker.viewModel.selectedImagery= viewer.baseLayerPicker.viewModel.imageryProviderViewModels[5];

2 、自定义BaseLayerPicker

除了使用baseLayerPicker中默认的地图数据源，我们可以使用cesium提供的ProviderViewModel接口自己扩展数据源。在初始化viewer时设置imageryProviderViewModels为自定义的providerViewModels。例如我们添加一个esri自定义数据源过程：

       var viewer = new Cesium.Viewer('cesiumContainer');
        //定义ImageryProvider：
         var esriMap = new Cesium.ArcGisMapServerImageryProvider({
            url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
            enablePickFeatures:false
        });
        //设置ProviderViewModel：
        var esriMapModel = new Cesium.ProviderViewModel({
            name:'esri Maps',
            iconUrl:Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),
            tooltip:'ArcGIS 地图服务',
            creationFunction:function () {
                return esriMap;
            }
        });


        //只有一个
        var providerViewModels = [];
        providerViewModels.push(esriMapModel);
        viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;

      //新增一个
      //var providerViewModels = viewer.baseLayerPicker.viewModel.imageryProviderViewModels;
      //providerViewModels.push(esriMapModel);
      //viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;

image.png