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>
|