SuperMap iClient3D for WebGL（地图显示）

最新推荐文章于 2023-12-19 17:19:14 发布

Hubery_P

最新推荐文章于 2023-12-19 17:19:14 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/ps_Hubery/article/details/105367840

版权

SuperMap iClient3D for WebGL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一般可以使用本地图片，天地图，BingMap，STK地形等来显示地图。

一，引用的js和css文件：

Cesium/Widgets/widgets.css

bootstrap.min.css

pretty.css

jquery.min.js

require.min.js

bootstrap.min.js

bootstrap-select.min.js

main.js

//(main.js)
var developMode = false;

if(developMode){
	require.config({
	baseUrl : '../Source',

    paths: {
        Zlib: '../Build/Cesium/Workers/zlib.min.js' //(根据自己的文件位置设置，以下类似）
    },
    shim: {
        Zlib : {
            deps : [],
            exports : 'Zlib'
        }
    }
	});
} else{
	require.config({
          waitSeconds : 600,
		  paths: {
				'Cesium': '../../Build/Cesium/Cesium',
                'Zlib': '../../Build/Cesium/Workers/zlib.min'
		  },
		  shim: {
			  Cesium: {
				  exports: 'Cesium'
			  },
              Zlib : {
                  exports : 'Zlib'
              }
		  }
	});
}

if (typeof Cesium !== "undefined" && typeof Zlib !== "undefined") {
			onload(Cesium,Zlib);
		} else if (typeof require === "function") {
			require(["Cesium","Zlib"], onload);
		}

config.js

//（config.js）
var URL_CONFIG = {
    TDT_IMG : 'https://[subdomain].tianditu.com/img_w/wmts',//天地图影像
    TDT_LABEL : 'https://[subdomain].tianditu.com/cia_w/wmts',//天地图文字注记
    BINGMAP : '//dev.virtualearth.net',//bing map影像
    STK : 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',//STK 地形
    ZF_IMG : 'http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace/datas/MosaicResult_2@IMAGE_1',
    ZF_TERRAIN : 'http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace/datas/DatasetDEM_1@sichuanTer',
    ZF_IMG2 : 'http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace/datas/image',//珠峰影像SCI
    ZF_TERRAIN2 : 'http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace/datas/srtm_54_07@zhufeng',//珠峰地形SCT
    SiChuan_TERRAIN : 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/DatasetDEM', // 四川地形
    SiChuan_IMG : 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/MosaicResult', // 四川影像
    TENSE_IMG0 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0300@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG1 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0310@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG2 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0330@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG3 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0340@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG4 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0350@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG5 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0400@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG6 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0410@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG7 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0420@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG8 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0430@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG9 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0440@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    TENSE_IMG10 : 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe/rest/realspace/datas/rs0450@%E6%88%BF%E5%B1%B1',//环境监测时态影像SCI（房山）
    SUPERMAP_IMG_WGS : 'http://www.supermapol.com/realspace/services/map-World/rest/maps/World_Google',//经纬度投影地图TILE IMGERY（中国区域）
    SUPERMAP_IMG_MEC : 'http://www.supermapol.com/realspace/services/map-China400/rest/maps/China400',//墨卡托投影地图TILE IMGERY（全球）
    SCP_JINJIANG : 'http://www.supermapol.com/realspace/services/3D-jinjiang/rest/realspace/datas/jinjiang/config',// 晋江倾斜SCP
    SCENE_JINJIANG: 'http://www.supermapol.com/realspace/services/3D-jinjiang/rest/realspace', // 晋江倾斜 场景
    SCP_SUOFEIYA : 'http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace/datas/Config/config', // 索菲亚大教堂倾斜数据
    SCENE_SUOFEIYA: 'http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace', // 索菲亚大教堂倾斜数据场景
    SCP_SRSB : 'http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/srsb/config',//萨尔茨堡SCP
    SCENE_SRSB: 'http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace', // 萨尔茨堡场景
    SCP_SRSB_WATER : 'http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/%E6%B0%B4%E9%9D%A2@vector/config',//萨尔茨堡水面SCP
    SCP_NIAOCHAO : 'http://www.supermapol.com/realspace/services/3D-niaocao_water/rest/realspace/datas/%E9%B8%9F%E5%B7%A2%E4%BA%94%E6%9C%9F/config',//鸟巢SCP
    SCENE_NIAOCHAO: 'http://www.supermapol.com/realspace/services/3D-niaocao_water/rest/realspace', // 鸟巢 场景
    SCP_NIAOCHAO_WATER : 'http://www.supermapol.com/realspace/services/3D-Olympic/rest/realspace/datas/NewDataset@water-caijian/config',//鸟巢水面SCP
    SCP_CBD_TREE : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Tree@%E6%96%B0CBD/config',//CBD 树SCP
    SCP_CBD_GROUND1 : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Ground_1@%E6%96%B0CBD/config',//CBD 地面1 SCP
    SCP_CBD_GROUND2 : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Ground_2@%E6%96%B0CBD/config',//CBD 地面2 SCP
    SCP_CBD_BUILD : 'http://www.supermapol.com/realspace/services/3D-WebGLCBD/rest/realspace/datas/Building@%E6%96%B0CBD/config',//CBD 建筑物 SCP
    SCP_BIM : 'https://www.supermapol.com/realspace/services/3D-S3MData/rest/realspace/datas/T8H_NoLod/config',//BIM scp
    SCENE_BIMBUILDING: 'http://www.supermapol.com/realspace/services/3D-BIMbuilding/rest/realspace', // BIM 场景
    SCP_VECTOR_POLYGON : 'http://www.supermapol.com/realspace/services/3D-China/rest/realspace/datas/%E4%B8%93%E9%A2%98%E5%9B%BE/config',//矢量 面 SCP
    SCP_VECTOR_LINE : 'http://www.supermapol.com/realspace/services/3D-China/rest/realspace/datas/Line/config',// 矢量 线 SCP
    SCP_VECTOR_TEXT : 'http://www.supermapol.com/realspace/services/3D-China/rest/realspace/datas/text/config',//矢量 文字 SCP
    SCP_POINTCLOUD : 'http://www.supermapol.com/realspace/services/3D-cloud/rest/realspace/datas/POINTCLOUD23/config', //点云 SCP
    SCENE_POINTCLOUD: 'http://www.supermapol.com/realspace/services/3D-cloud/rest/realspace',
    SCP_SGNS : 'http://www.supermapol.com/realspace/services/3D-SGNS/rest/realspace/datas/siguniang/config',//四姑娘山 SCP
    SCENE_SGNS: 'http://www.supermapol.com/realspace/services/3D-SGNS/rest/realspace', // 四姑娘山 场景
    SCP_OLYMPIC_TREE : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Tree@OlympicGreen/config',//奥林匹克公园 树 SCP
    SCP_OLYMPIC_BUILD : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Building@OlympicGreen/config',//奥林匹克公园 建筑物 SCP
    SCP_OLYMPIC_BILLBOARD : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/BillBoard@OlympicGreen/config',//奥林匹克公园 人物 SCP
    SCP_OLYMPIC_GROUND : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Ground@OlympicGreen/config',//奥林匹克公园 地面 SCP
    SCP_OLYMPIC_WATER : 'http://www.supermapol.com/realspace/services/3D-WebGLOlympicGreen/rest/realspace/datas/Waters@OlympicGreen/config',//奥林匹克公园 水面 SCP
    SCENE_OLYMPIC: 'http://www.supermapol.com/realspace/services/3D-Olympic/rest/realspace',
    SCENE_OLYMPIC_GREEN: 'http://www.supermapol.com/realspace/services/3D-OlympicGreen/rest/realspace',
    SCP_XGPARK : 'http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace/datas/sci_park/config',// 香港科技园 SCP
    SCENE_XGPARK: 'http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace', // 香港科技园 场景
    SCP_PIPELINE : 'https://www.supermapol.com/realspace/services/3D-pipeline_s3m/rest/realspace/datas/NetWork@Pipe3D/config', //管线 SCP 失效
    SCP_HISTOGRAM1 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_3000_5000/config', //
    SCP_HISTOGRAM2 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_10000_max/config', //
    SCP_HISTOGRAM3 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_min_1000/config', //
    SCP_HISTOGRAM4 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_5000_10000/config',//
    SCP_HISTOGRAM5 : 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace/datas/Point2D_1000_3000/config', //
    SCENE_HISTOGRAM: 'http://www.supermapol.com/realspace/services/3D-Histogram/rest/realspace',
    SCENE_CBD : 'http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace', // CBD场景
    SCP_FCFH_QX: 'http://www.supermapol.com/realspace/services/3D-individualHouse/rest/realspace/datas/Config/config', //分层分户倾斜摄影图层
    SCP_FCFH_Vector: 'http://www.supermapol.com/realspace/services/3D-individualHouse/rest/realspace/datas/%E4%B8%93%E9%A2%98%E6%88%B7%E5%9E%8B%E7%BA%BF_split_1_1_%E6%88%B7%E5%9E%8B%E9%9D%A2/config', //分层分户矢量图层
    SCP_FCFH_VECTOR_EXTRUDE: 'http://www.supermapol.com/realspace/services/3D-individualHouse/rest/realspace/datas/%E4%B8%93%E9%A2%98%E6%88%B7%E5%9E%8B%E9%9D%A2_%E6%8B%89%E4%BC%B8/config', // 分层分户侧面拉伸数据
    SCP_FCFH_DATA: 'http://www.supermapol.com/realspace/services/data-individualHouse/rest/data', //分层分户数据服务
    SCP_WORLD_COUNTRY_VECTOR: 'http://www.supermapol.com/realspace/services/3D-Countries-World2/rest/realspace/datas/Countries_1@World/config', // 全球国家边界线的矢量
    SCENE_POLYLINEGROW_BUINDINGS: 'http://www.supermapol.com/realspace/services/3D-buildings1122/rest/realspace', // 光晕效果线数据,
    SCENE_TISHUJU: 'http://www.supermapol.com/realspace/services/3D-tishuju/rest/realspace', // 体数据场景
    BING_MAP_KEY: 'Av63hPkCmH18oGGn5Qg3QhLBJvknZ97xbhyw3utDLRtFv7anHjXNOUQbyWBL5fK5',
    SCENE_GTC_UINSIDE:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%86%85%E9%83%A8%E7%BB%93%E6%9E%84@%E5%AE%A4%E5%86%85/config',//u型BIM室内
	SCENE_GTC_UOUTSIDE:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%A4%96%E9%83%A8%E7%BB%93%E6%9E%84@%E5%AE%A4%E5%86%85/config',//u型BIM室外
	SCENE_GTC_UWINDOW:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/U%E5%9E%8B%E5%BB%BA%E7%AD%91%E7%AA%97@%E5%AE%A4%E5%86%85/config',//u型BIM窗
	SCENE_GTC_WALL9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E5%A2%99@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前墙
	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E7%AA%97@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前窗
	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E7%BB%93%E6%9E%84%E5%9F%BA%E7%A1%80@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前结构
	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E9%97%A8@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前门
	SCENE_GTC_WINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%89%8D%E6%A5%BC%E6%9D%BF@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼合并前楼板
	SCENE_GTC_FLOOR9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E6%A5%BC%E5%B1%82@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼楼层
	SCENE_GTC_LWINDOW9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E7%AA%97@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼拉低窗
	SCENE_GTC_LWALL9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E5%A2%99@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼拉低墙
	SCENE_GTC_LB9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E6%8B%89%E4%BD%8E%E6%A5%BC%E6%9D%BF@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//九号楼拉低楼板
	SCENE_GTC_UNIT9:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%90%88%E5%B9%B6%E5%90%8E@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//合并九号楼
	SCENE_GTC_BUILDIBG:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/building_udb@building/config',//building_udb@building
	SCENE_GTC_HILL:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%B1%B1/config',//山
	SCENE_GTC_GROUND:'http://www.supermapol.com/realspace/services/3D-data_all/rest/realspace/datas/%E5%9C%B0%E9%9D%A2/config',//地面
	SCENE_MODELUPDATE:'http://www.supermapol.com/realspace/services/3D-MoXingGengXin/rest/realspace',//建筑分析区白模数据
    SCENE_CLIP:'http://www.supermapol.com/realspace/services/3D-clip_fengbian/rest/realspace',//裁剪封边数据
    TOKEN_TIANDITU: '4a00a1dc5387b8ed8adba3374bd87e5e', // 天地图token
    SCENE_FEATUREVALUE:'http://www.supermapol.com/realspace/services/3D-featureValue_building9/rest/realspace/datas/%E4%B9%9D%E5%8F%B7@%E4%B9%9D%E5%8F%B7%E6%A5%BC/config',//带特征值的九号楼缓存
	};

二，显示div 和加载圈

<div id="cesiumContainer"></div>

<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>

加载完毕后删除

$('#loadingbar').remove();

三，加载地图

1，加载图片地图

<script>
    function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer');
        //使用本地的一张图片初始化地球，建议图片长宽比2:1
        viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
            url : 'images/worldimage.jpg'
        }));
    }
</script>

2，加载天地图

2.1，各种天地图风格（Cesium.TiandituMapsStyle）

<div style="position: absolute;left: 5px;top: 5px;">
    <select id="imageryOptions" class="selectpicker show-tick form-control">
        <!--<option disabled selected value>&#45;&#45;选择服务类型&#45;&#45;</option>-->
        <option selected value="CIA_C">全球中文注记服务（经纬度投影）</option>
        <option value="IMG_C">全球影像地图服务(经纬度)</option>
        <option value="VEC_W">全球矢量地图服务(墨卡托)</option>
        <option value="TER_W">全球地形晕渲服务(墨卡托)</option>
        <option value="IMG_W">全球影像地图服务(墨卡托)</option>
        <option value="VEC_C">全球矢量地图服务(经纬度)</option>
        <option value="TER_C">全球地形晕渲服务(经纬度)</option>
    </select>
</div>

2.2，加载js

<script>
    function onload(Cesium) {
        //初始化viewer部件
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
            credit : new Cesium.Credit('天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局'),
            token: URL_CONFIG.TOKEN_TIANDITU   //???
        }));
        var imageryLayers = viewer.imageryLayers;
        //初始化天地图全球中文注记服务，并添加至影像图层
        var labelImagery = new Cesium.TiandituImageryProvider({
            mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
            token: URL_CONFIG.TOKEN_TIANDITU
        });
        imageryLayers.addImageryProvider(labelImagery);
        $('#imageryOptions').change(function(){
            var value = $(this).val();
            var baseLayer = imageryLayers.get(1);
            //添加新的天地图服务
            imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
                mapStyle : Cesium.TiandituMapsStyle[value],
                token: URL_CONFIG.TOKEN_TIANDITU
            }),1);
            // 移除之前的图层
            imageryLayers.remove(baseLayer);
        });
    }
</script>

3，BingMap

<script>
    function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                key : URL_CONFIG.BING_MAP_KEY,//可至官网（https://www.bingmapsportal.com/）申请key
                url : URL_CONFIG.BINGMAP
        }))
        $('#loadingbar').remove();
    }
</script>

4，SKT

4.1，选项卡

<div id="toolbar" style="position: absolute;left: 5px;top: 5px;display: none;">
    <select id="fillOptions" class="selectpicker show-tick form-control">
        <option selected value="None">无颜色表</option>
        <option value="Line">等高线填充</option>
        <option value="Region">等高面填充</option>
        <option value="Line_Region">等高线面填充</option>
    </select>
</div>

4.2，js

<script>
    function onload(Cesium) {
        // 初始化viewer部件
        var viewer = new Cesium.Viewer('cesiumContainer',{
            //添加STK World Terrain地形服务
            terrainProvider : new Cesium.CesiumTerrainProvider({
                url : URL_CONFIG.STK,
                requestWaterMask : true,
                requestVertexNormals : true
            })
        });
        viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url : 'https://dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL,
            key : URL_CONFIG.BING_MAP_KEY
        }));
        var labelImagery = new Cesium.TiandituImageryProvider({
            mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
            token: URL_CONFIG.TOKEN_TIANDITU
        });
        viewer.imageryLayers.addImageryProvider(labelImagery);
        //设置相机视角
        viewer.scene.camera.setView({
            destination : new Cesium.Cartesian3.fromDegrees(103.064734,31.12816,8870.867706),  //怎么获取坐标？
            orientation : {
                heading : 0.34555839949062594,
                pitch : -0.1422794351856307,
                roll : 0.0009471063581933947
            }
        });

        //创建分层设色对象
        var hyp = new Cesium.HypsometricSetting();
        //设置分层设色的显示模式为线
        hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.LINE;
        //设置线颜色为红色
        hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
        //等高线间隔为100m
        hyp.LineInterval = 100.0;
        //设置分层设色的最大/最小可见高度
        hyp.MaxVisibleValue = 9000;
        hyp.MinVisibleValue = 0;
        //设置分层设色颜色表的最大/最小key值,表示在此高度范围内显示颜色表
        hyp.ColorTableMinKey = 2736.88110351563;
        hyp.ColorTableMaxKey = 5597.06640625;
        //新建颜色表
        var colorTable = new Cesium.ColorTable();

        colorTable.insert(5597.06640625,new Cesium.Color(0, 0, 255/255));
        colorTable.insert(5406.3873860677086,new Cesium.Color(0, 51/255, 255/255));
        colorTable.insert(5215.7083658854172,new Cesium.Color(0, 102/255, 255/255));
        colorTable.insert(5025.0293457031257,new Cesium.Color(0, 153/255, 255/255));
        colorTable.insert(4834.3503255208343,new Cesium.Color(0, 204/255, 255/255));
        colorTable.insert(4643.6713053385429,new Cesium.Color(0, 255/255, 255/255));
        colorTable.insert(4452.9922851562524,new Cesium.Color(51/255, 255/255, 204/255));
        colorTable.insert(4262.3132649739609,new Cesium.Color(102/255, 255/255, 153/255));
        colorTable.insert(4071.6342447916695,new Cesium.Color(153/255, 255/255, 102/255));
        colorTable.insert(3880.9552246093781,new Cesium.Color(204/255, 255/255, 51/255));
        colorTable.insert(3690.2762044270867,new Cesium.Color(255/255, 255/255, 0));
        colorTable.insert(3499.5971842447952,new Cesium.Color(255/255, 204/255, 0));
        colorTable.insert(3308.9181640625038,new Cesium.Color(255/255, 153/255, 0));
        colorTable.insert(3118.2391438802129,new Cesium.Color(255/255, 102/255, 0));
        colorTable.insert(2927.5601236979214,new Cesium.Color(255/255, 51/255, 0));
        colorTable.insert(2736.88110351563,new Cesium.Color(255/255, 0, 0));

        //设置分层设色的颜色表
        hyp.ColorTable = colorTable;
        //设置分层设色的透明度
        hyp.Opacity = 0.4;

        //下拉菜单变化时切换分层设色的显示模式
        $('#fillOptions').change(function(){
            var value = $(this).val();
            switch (value){
                case 'None' : viewer.scene.globe.HypsometricSetting = undefined;
                    break;
                case 'Line' : {
                    hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.LINE;
                    viewer.scene.globe.HypsometricSetting = {
                        hypsometricSetting : hyp,
                        analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
                    };
                }
                    break;
                case 'Region' : {
                    hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
                    viewer.scene.globe.HypsometricSetting = {
                        hypsometricSetting : hyp,
                        analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
                    };
                }
                    break;
                case 'Line_Region' : {
                    hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE_AND_LINE;
                    viewer.scene.globe.HypsometricSetting = {
                        hypsometricSetting : hyp,
                        analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
                    };
                }
                    break;
                default : break;
            }

        });
        $('#toolbar').show();
        $('#loadingbar').remove();
    }
</script>

四，预览

Hubery_P

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SuperMap iClient3D for WebGL（地图显示）

一般可以使用本地图片，天地图，BingMap，STK地形等来显示地图。一，引用的js和css文件：Cesium/Widgets/widgets.cssbootstrap.min.csspretty.cssjquery.min.jsrequire.min.jsbootstrap.min.jsbootstrap-select.min.jsmain.js//(m...
复制链接

扫一扫