cesium入门示例-HelloWorld

示例准备：

在Cesium ion官网（https://cesium.com/）上注册用户，获取AccessToken，在js代码入口设置Cesium.Ion.defaultAccessToken，即可正常使用Cesium内置的影像和地形服务。

HelloWorld示例：

1、替换了cesium内置的影像和地形服务；

//bing map
var bingMap = new Cesium.ProviderViewModel({
    name: 'Bing Maps Aerial',
    iconUrl: './SampleData/bingAerial.png',
    tooltip: 'Bing Maps aerial imagery',
    category: 'Cesium ion',
    creationFunction: function() {
        return new Cesium.BingMapsImageryProvider({
            url: 'https://dev.virtualearth.net',
            key: binmapToken,
            mapStyle: Cesium.BingMapsStyle.AERIAL
        })
    }
})
//Tianditu
var tiandiMap = new Cesium.ProviderViewModel({
    name: 'Tiditu',
    iconUrl: './SampleData/fire.png',
    tooltip: 'Tiditu image',
    category: 'Cesium ion',
    creationFunction: function() {
        return new Cesium.WebMapTileServiceImageryProvider({
            //调用影像服务 
            url: "http://t1.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&tk=" + tidituToken
        })
    }
})
//google map
var googleMap = new Cesium.ProviderViewModel({
    name: 'Goolge Map',
    iconUrl: './SampleData/fire.png',
    tooltip: 'Google image',
    category: 'Cesium ion',
    creationFunction: function() {
        return new Cesium.UrlTemplateImageryProvider({
            //调用影像服务 
            url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
        })
    }
})
//自己下载的瓦片
var customMap = new Cesium.ProviderViewModel({
    name: 'Offline Map',
    iconUrl: './SampleData/fire.png',
    tooltip: 'Offline image',
    category: 'Cesium ion',
    creationFunction: function() {
        return new Cesium.UrlTemplateImageryProvider({
            //调用影像服务 
            url: "http://localhost/www/Johannesburg/{z}/{x}/{y}.png"
        })
    }
})

//添加自定义地形选择控件
var customTerrain = new Cesium.ProviderViewModel({
    name: 'myTerrain',
    iconUrl: './SampleData/fire.png',
    tooltip: 'custom terrain',
    category: 'Cesium ion',
    creationFunction: function() {
        return new Cesium.CesiumTerrainProvider({
            url: 'http://localhost/www/n39w119',
            requestVertexNormals: true
        })
    }
})
var terrainModels = Cesium.createDefaultTerrainProviderViewModels();
terrainModels.push(customTerrain);
var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, //去掉动画空间
    timeline: false, //去掉时间线控件
    imageryProviderViewModels: [bingMap, tiandiMap, googleMap, customMap],
    terrainProviderViewModels: terrainModels
});
//去除水印
viewer._cesiumWidget._creditContainer.style.display = "none";
//显示帧率信息
viewer.scene.debugShowFramesPerSecond = true;

 

自定义地形数据n39w119从https://apps.nationalmap.gov/3depdem/网站下载的美国某一片高程数据。
下载的数据为ErdasIMG格式的，在QGIS（或ArcGIS）中转为TIFF格式，然后使用cesiumlab(https://www.cesiumlab.com/)的地形处理工具切成cesium支持的.terrain离散文件，部署在服务器上即可访问。
global_tms为从cesiumlab交流群下载的乔峰地球上下载的.terrain离散文件，地形精度较低，测试用。

2、增加显示鼠标位置的经纬高信息；

<div id="cesiumContainer">
    <div id="coords" style="position: absolute;z-index: 1000;color: red;"></div>
</div>

//显示坐标 
var canvas = viewer.scene.canvas;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
    var cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
    var ellipsoid = viewer.scene.globe.ellipsoid;
    if(cartesian) { //能获取，显示坐标
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);

        var terrainLevel = level;
        var promise = Cesium.sampleTerrain(viewer.terrainProvider, terrainLevel, [cartographic]);
        Cesium.when(promise, function(updatedPositions) {
            if(updatedPositions.length > 0) {
                var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(2) + ', ' +
                    '纬度' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(2) + ',    ' + '高度' + (updatedPositions[0].height ? updatedPositions[0].height : 0);
                document.getElementById(divId).innerHTML = coords;
                document.getElementById(divId).style.display = '';
            } else {
                document.getElementById('coords').style.display = 'none';
            }
        });

    } else { //不能获取不显示
        document.getElementById('coords').style.display = 'none';
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

注意“coords"的div中的z-index的设置。

 

3、加载了天地图的注记服务；

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    //调用中文注记服务 
    url: "http://t2.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&tk=" + tidituToken
}));

4、加载多边形实体；

viewer.entities.add({
   polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK
    }
})

 

最后效果：