198 lines
7.8 KiB
HTML
198 lines
7.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script> -->
|
|||
|
|
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 加载影像服务
|
|||
|
|
* 在构造Viewer实例时，可以通过配置项中的`imageryProvider`属性指定要显示在椭球表面上的影像服务，
|
|||
|
|
* 该配置想只有在`baseLayerPicker`设置为false时有效。
|
|||
|
|
* Cesium 默认使用的是微软的Bing影像图。
|
|||
|
|
* 在Viewer实例中的 `imageryLayers` 属性查看添加的影像服务图层。
|
|||
|
|
*
|
|||
|
|
* `imageryLayers` 属性是一个 `ImageryLayerCollection`集合，提供一个传递imageryProvider创建影像服务图层的方法
|
|||
|
|
* addImageryProvider(imageryProvider, index) → ImageryLayer
|
|||
|
|
* 并返回一个 ImageryLayer 图层实例，可以设置图层透明度、地图亮度等属性
|
|||
|
|
*
|
|||
|
|
* 全局方法： 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 。都是必应地图的样式
|
|||
|
|
*
|
|||
|
|
* IonImageryProvider: 创建使用Cesium ion上面的影像瓦片服务的REST API的影像提供者
|
|||
|
|
* new Cesium.IonImageryProvider({ assetId : 23489024 })
|
|||
|
|
*
|
|||
|
|
* Cesium支持的影像数据服务
|
|||
|
|
* 1.ArcGisMapServerImageryProvider
|
|||
|
|
* 2.MapboxStyleImageryProvider
|
|||
|
|
* 3.BingMapsImageryProvider
|
|||
|
|
* 4.OpenStreetMapImageryProvider
|
|||
|
|
*
|
|||
|
|
* 5.SingleTileImageryProvider 单张图片
|
|||
|
|
* 6.WebMapServiceImageryProvider WMS服务
|
|||
|
|
* 7.WebMapTileServiceImageryProvider WMTS服务
|
|||
|
|
* 8.UrlTemplateImageryProvider xyz模版URL
|
|||
|
|
* 9.TileMapServiceImageryProvider 加载瓦片（TMS，使用arcgis、gdal或maptiler切的瓦片集）
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
scene3DOnly: true,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
baseLayerPicker: false,
|
|||
|
|
// imageryProvider: esriImagery,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 在 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;
|
|||
|
|
|
|||
|
|
//清除影像图层集合中的图层
|
|||
|
|
// imageryLayers.removeAll();
|
|||
|
|
|
|||
|
|
let matrixIds = [
|
|||
|
|
"EPSG:900913:0",
|
|||
|
|
"EPSG:900913:1",
|
|||
|
|
"EPSG:900913:2",
|
|||
|
|
"EPSG:900913:3",
|
|||
|
|
"EPSG:900913:4",
|
|||
|
|
"EPSG:900913:5",
|
|||
|
|
"EPSG:900913:6",
|
|||
|
|
"EPSG:900913:7",
|
|||
|
|
"EPSG:900913:8",
|
|||
|
|
"EPSG:900913:9",
|
|||
|
|
"EPSG:900913:10",
|
|||
|
|
"EPSG:900913:11",
|
|||
|
|
"EPSG:900913:12",
|
|||
|
|
"EPSG:900913:13",
|
|||
|
|
"EPSG:900913:14",
|
|||
|
|
"EPSG:900913:15",
|
|||
|
|
"EPSG:900913:16",
|
|||
|
|
"EPSG:900913:17",
|
|||
|
|
"EPSG:900913:18",
|
|||
|
|
"EPSG:900913:19",
|
|||
|
|
"EPSG:900913:20",
|
|||
|
|
"EPSG:900913:21",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
//1.新建ImageryProvider
|
|||
|
|
let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
|
|||
|
|
url: "http://localhost:8888/geoserver/gwc/service/wmts", //服务地址，如：'http://localhost:8080/geoserver/gwc/service/wmts'
|
|||
|
|
layer: "tiger:tiger_roads", //图层名称，如：'tasmania'
|
|||
|
|
style: "",
|
|||
|
|
format: "image/png",
|
|||
|
|
tileMatrixSetID: "EPSG:900913",
|
|||
|
|
tileMatrixLabels: matrixIds,
|
|||
|
|
rectangle: new Cesium.Rectangle(
|
|||
|
|
Cesium.Math.toRadians(-74.02722),
|
|||
|
|
Cesium.Math.toRadians(40.684221),
|
|||
|
|
Cesium.Math.toRadians(-73.907005),
|
|||
|
|
Cesium.Math.toRadians(40.8781785)
|
|||
|
|
),
|
|||
|
|
// 切图策略采用地理坐标的方案，4326是没有进行投影的地理坐标系
|
|||
|
|
// tilingScheme: new Cesium.GeographicTilingScheme({
|
|||
|
|
// //此处很重要，很重要。。。
|
|||
|
|
// numberOfLevelZeroTilesX: 2,
|
|||
|
|
// numberOfLevelZeroTilesY: 1,
|
|||
|
|
// }),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//2.新建imageryLayer
|
|||
|
|
let imageryLayer = new Cesium.ImageryLayer(wmtsImageryProvider, {
|
|||
|
|
// show: visible,//是否可见
|
|||
|
|
// alpha: opacity//透明度
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//3.将imageryLayer加入到viewer中
|
|||
|
|
viewer.imageryLayers.add(imageryLayer);
|
|||
|
|
//1.新建ImageryProvider
|
|||
|
|
// let wmtsImageryProvider1 = new Cesium.WebMapTileServiceImageryProvider({
|
|||
|
|
// url: "http://localhost:8088/geoserver/gwc/service/wmts", //服务地址，如：'http://localhost:8080/geoserver/gwc/service/wmts'
|
|||
|
|
// layer: "allRegion:xiangdian", //图层名称，如：'tasmania'
|
|||
|
|
// style: "",
|
|||
|
|
// format: "image/png",
|
|||
|
|
// tileMatrixSetID: "EPSG:4326",
|
|||
|
|
// // tileMatrixLabels: matrixIds,
|
|||
|
|
// rectangle: new Cesium.Rectangle(
|
|||
|
|
// Cesium.Math.toRadians(114.78209252290912),
|
|||
|
|
// Cesium.Math.toRadians(32.298779669312566),
|
|||
|
|
// Cesium.Math.toRadians(114.95919747095452),
|
|||
|
|
// Cesium.Math.toRadians(32.43287604075963)
|
|||
|
|
// ),
|
|||
|
|
// // 切图策略采用地理坐标的方案，4326是没有进行投影的地理坐标系
|
|||
|
|
// tilingScheme: new Cesium.GeographicTilingScheme({
|
|||
|
|
// //此处很重要，很重要。。。
|
|||
|
|
// numberOfLevelZeroTilesX: 2,
|
|||
|
|
// numberOfLevelZeroTilesY: 1,
|
|||
|
|
// }),
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// //2.新建imageryLayer
|
|||
|
|
// let imageryLayer1 = new Cesium.ImageryLayer(wmtsImageryProvider1, {
|
|||
|
|
// // show: visible,//是否可见
|
|||
|
|
// // alpha: opacity//透明度
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
//3.将imageryLayer加入到viewer中
|
|||
|
|
// viewer.imageryLayers.add(imageryLayer1);
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
destination: Cesium.Cartesian3.fromDegrees(
|
|||
|
|
-74.02722,
|
|||
|
|
40.684221,
|
|||
|
|
15000.0
|
|||
|
|
),
|
|||
|
|
});
|
|||
|
|
// viewer.camera.setView({
|
|||
|
|
// destination: new Cesium.Cartesian3(
|
|||
|
|
// -17496366.690809526,
|
|||
|
|
// 24190921.159874767,
|
|||
|
|
// 15328247.514523579
|
|||
|
|
// ),
|
|||
|
|
// orientation: {
|
|||
|
|
// heading: 6.221014343645461,
|
|||
|
|
// pitch: -1.5703113877434678,
|
|||
|
|
// roll: 0,
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|