123 lines
5.3 KiB
HTML
123 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Use correct character set. -->
|
||
<meta charset="utf-8">
|
||
<!-- Tell IE to use the latest, best version. -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||
<title>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
|
||
html,
|
||
body,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
||
|
||
var viewer = new Cesium.Viewer('cesiumContainer', {
|
||
geocoder: false, //位置查找
|
||
homeButton: false, //视图返回初始位置
|
||
sceneModePicker: false, //视角选择器
|
||
baseLayerPicker: false, //底图选择器
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
animation: false, //动画控制器
|
||
// creditContainer:"credit",//版权显示
|
||
timeline: false, //时间线
|
||
fullscreenButton: false, //全屏控件
|
||
vrButton: false,
|
||
// createWorldImagery()->IonImageryProvider Creates an IonImageryProvider instance for ion's default global base imagery layer, currently Bing Maps.
|
||
// 全局方法，创建一个IonImageryProvider实例（ion上面的全球影像底图），默认是Bing地图。
|
||
// 可以通过style参数指定底图类型，可选值为： AERIAL, AERIAL_WITH_LABELS, ROAD 。都是必应地图的样式
|
||
imageryProvider: Cesium.createWorldImagery({
|
||
style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
|
||
}),
|
||
baseLayerPicker: false,
|
||
infoBox: false,
|
||
});
|
||
|
||
/**
|
||
* 在 scene 场景中 imageryLayers 属性是一个 ImageryLayerCollection 影像集合实例
|
||
* viewer.imageryLayers 属性跟 viewer.scene.imageryLayers 获取的是同一个影像集合
|
||
* 常用方法：
|
||
* add(layer, index) ：添加一个 ImageryLayer 到集合中并指定图层的 z-index,若 index 省略则图层将在最上层
|
||
* addImageryProvider(imageryProvider, index) → ImageryLayer ：通过 imageryProvider 创建新的图层并添加到影像集合中，返回创建的新图层
|
||
* contains(layer) → Boolean
|
||
* get(index) → ImageryLayer
|
||
* indexOf(layer) → Number
|
||
*
|
||
* lower(layer)：将 layer 的 index 向下移动一个位置
|
||
* lowerToBottom(layer)
|
||
*
|
||
* raise(layer)：将 layer 的 index 向上移动一个位置
|
||
* raiseToTop(layer)
|
||
*
|
||
* remove(layer, destroy) → Boolean
|
||
* removeAll(destroy)
|
||
*/
|
||
var imageryLayers = viewer.scene.imageryLayers;
|
||
//后添加的图层在顶部,addImageryProvider 方法
|
||
var blackMarble = imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
|
||
//将 blackMarble 图层向下移动一个位置
|
||
// imageryLayers.lower(blackMarble);
|
||
|
||
//通过设置顶部图层的透明度,可以显示顶部图层和第二图层,达到同时显示两个图层的效果
|
||
// blackMarble.alpha = 0.5;
|
||
// blackMarble.brightness = 2.0;
|
||
|
||
//添加单个图片，在特定的范围内
|
||
// imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
|
||
// // url : 'SampleData/images/Cesium_Logo_overlay.png',
|
||
// url:"data/Custom/202208170145.png",
|
||
// rectangle : Cesium.Rectangle.fromDegrees(70, 4, 140, 55)
|
||
// }));
|
||
|
||
// /**
|
||
// * Imagery providers 与 layers 的关系
|
||
// * Imagery providers 是使用特定的服务请求瓦片资源，而 layer 代表的是从Imagery providers中请求得到的并显示的瓦片块
|
||
// * 即使用 Imagery provider 创建 layer
|
||
// *
|
||
// * var layer = imageryLayers.addImageryProvider(imageryProvider);
|
||
// * 是下面代码的缩写：
|
||
// * var layer = new ImageryLayer(imageryProvider);
|
||
// * imageryLayers.add(layer);
|
||
// */
|
||
|
||
// /**
|
||
// * ArcGisMapServerImageryProvider 使用 Esri ArcGIS Server REST API 去访问 ArcGIS MapServer 服务类型的瓦片
|
||
// */
|
||
// imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
|
||
// url : 'https://nationalmap.gov.au/proxy/http://services.ga.gov.au/site_3/rest/services/Electricity_Infrastructure/MapServer'
|
||
// }));
|
||
|
||
// Start off looking at Australia.
|
||
viewer.camera.setView({
|
||
// Cesium.Rectangle.fromDegrees(west, south, east, north, result) → Rectangle
|
||
destination: Cesium.Rectangle.fromDegrees(70, 4, 140, 55)
|
||
});
|
||
var PRODUCTION_CODE = "FY3D_MERSI_L2_PAD_MLT_GLL_YYYYMMDD_POAD_0250M_MS.HDF"
|
||
var service_url = "https://satellite.nsmc.org.cn"; //"https://satellite.nsmc.org.cn"; // "http://10.0.66.119";
|
||
var wmx_Layer = new Cesium.WebMapServiceImageryProvider({
|
||
url: service_url + "/mongoTile_DSS/FY/getLatestTile.php?layer=PRODUCT&PRODUCT=" + PRODUCTION_CODE,
|
||
layers: "FY3D_MERSI",// Here just give layer name
|
||
version: "1.1.0",
|
||
});
|
||
imageryLayers.addImageryProvider(wmx_Layer)
|
||
</script>
|
||
</body>
|
||
</html>
|