Cesium基本使用

1.初始化地图

首先要定义一个div作为地图容器

<div id="mapContainer"></div>

创建Cesium.Viewer实例，绑定上面创建的容器 

let viewer = new Cesium.Viewer(document.getElementById('mapContainer'),{
        //  sceneMode: Cesium.SceneMode.SCENE3D,
         animation:false, //动画小组件
         baseLayerPicker: false, //地图组件，选择三维数字地球的地图（imagery and terrain）
         fullscreenButton: false, //全屏组件
         vrButton: false, //vr模式
         geocoder: false, //地理编码搜索组件
         homeButton: false, //首页，点击之后将视图跳转到默认视角
         infoBox: false, //信息框
         sceneModePicker: false, //场景模型，切换2D，3D和Columbus View（CV）模式
         selectionIndicator: false, //是否显示选取指示器组件
         timeline: false, //时间轴
         navigationHelpButton: false, //帮助提示，如何操作数字地球
         //如果最初应该看到导航说明，则为true，如果直到用户明确单击该按钮，则该提示不显示，否则为false
         navigationInstructionInitiallyVisible: false,
        //  terrainProvider: Cesium.createWorldTerrain(),//显示地形
         scene3DOnly: true,
         //天空盒效果
     })

2.加载天地图影像和注记服务

使用天地图服务需要在天地图网站注册获取token

添加天地图影像服务

let tdtImageryLayer = new Cesium.WebMapTileServiceImageryProvider({
       url："http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+{token}
       layer："tdtBasicLayer"
       style: "default",
       format: "image/jpeg",
       tileMatrixSetID: "GoogleMapsCompatible",
       show: false
});

//添加影像图层到地图上
viewer.imageryLayers.addImageryProvider(tdtImageryLayer)

添加天地图注记服务

let tdtNoteImageryLayer = new Cesium.WebMapTileServiceImageryProvider({
       url："http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+{token}
       layer："tdtAnnoLayer"
       style: "default",
       format: "image/jpeg",
       tileMatrixSetID: "GoogleMapsCompatible",
       show: false
});

//添加注记图层到地图上
viewer.imageryLayers.addImageryProvider(tdtNoteImageryLayer)

3.加载本地影像切片服务

以下为添加本地TMS切片， 切片之前为tiff格式，在ArcMap中导出数据，使用cesiumlab对导出的数据进行切片，并将切片添加到本地Apache的webapps文件目录下，启动Apache获取资源

//切片资源路径
const CESIUM_SOURCE_PATH = 'http://localhost:8080/vegetationClass/'

let TMSImageryLayer = new Cesium.TileMapServiceImageryProvider({
   url: CESIUM_SOURCE_PATH + `zhouquEcoSer`
}

viewer.imageryLayers.addImageryProvider(TMSImageryLayer )

4.加载geojson数据

geojson数据通过shp数据进行转换，转换网站。

转换完成之后使用Cesium.GeoJsonDataSource加载geojson数据

//导入geojson
import geojson from 'geojson路径'

//添加geojson数据
Cesium.GeoJsonDataSource.load(geojson, {
        }).then((dataSource) => {
            var entities = dataSource.entities.values; 
            // 循环遍历每个实体 
            for (var i = 0; i < entities.length; i++) { 
                let entity = entities[i];

                    //设置多边形的边框颜色
                    entity.polygon.outline = false;
                    entity.polygon.fill = false; // 不填充多边形 
                    //单独设置线条样式
                    var positions = entity.polygon.hierarchy._value.positions;
                    entity.polyline = {
                        positions: positions,
                        width: 3,
                        material: Cesium.Color.fromCssColorString(SPOTCOLOR.value),
                        clampToGround: true
                    }
                    entity.name = 'spot'
                    viewer.entities.add(entity)
                    viewerRight.entities.add(entity)

            }
                
        })