qiusj
/
learning_cesium
0
0
Fork 0
Code Issues Issues Pull Requests Releases Wiki Wiki Activity
learning_cesium/加载影像数据.html

363 lines
15 KiB
HTML
Raw Normal View History

init project
2024-03-19 18:06:25 +08:00
<!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();
// 添加 ArcGIS 影像地图服务
const esriImagery = new Cesium.ArcGisMapServerImageryProvider({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
// url: "http://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
});
imageryLayers.addImageryProvider(esriImagery);
// 添加 Mapbox tile provider
const mapboxAccess =
"pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";
// 样式id查看：https://docs.mapbox.com/api/maps/styles/
// URL格式的 mapbox://styles/:owner/:style， 其中 :owner 是您的 Mapbox 账户名 :style 是样式 ID 。
// 可选值：streets-v10、outdoors-v10 、light-v9、dark-v9、satellite-v9、satellite-streets-v10
// const mapboxStyleImagery = new Cesium.MapboxStyleImageryProvider({
// styleId: "satellite-streets-v10",
// accessToken: mapboxAccess,
// });
// imageryLayers.addImageryProvider(mapboxStyleImagery);
// 加载mapbox中自定义的服务
// https://studio.mapbox.com/tilesets/mapbox.satellite
// mapbox://styles/qiushijie/ckayrgiu2160x1iooym5xshpb
// var customMapboxIamgery = new Cesium.MapboxStyleImageryProvider({
// // url: "https://api.mapbox.com/styles/v1",
// username: "qiushijie",
// styleId: "ckayrgiu2160x1iooym5xshpb",
// accessToken: mapboxAccess,
// scaleFactor: true,
// });
// imageryLayers.addImageryProvider(customMapboxIamgery);
// 加载单张全球图片作为地图地图
// SingleTileImageryProvider
// const singleTileLayer = new Cesium.SingleTileImageryProvider({
// url: "./SampleData/images/BMNG_world.topo.bathy.200405.3.2048x1024.jpg",
// rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
// });
// imageryLayers.addImageryProvider(singleTileLayer);
//加载OpenStreetMap
// const osm = new Cesium.OpenStreetMapImageryProvider({
// url: "https://a.tile.openstreetmap.org/",
// });
// imageryLayers.addImageryProvider(osm);
// 加载WMS服务
// WebMapServiceImageryProvider;
// const wmsProvider = new Cesium.WebMapServiceImageryProvider({
// // url: "http://localhost:8088/geoserver/nurc/wms",
// url: "http://localhost:8888/proxy/http://localhost:8088/geoserver/nurc/wms",
// layers: "nurc:Img_Sample",
// parameters: {
// TRANSPARENT: true,
// FORMAT: "image/png",
// },
// crs: "4326",
// rectangle: new Cesium.Rectangle(
// Cesium.Math.toRadians(-130.85168),
// Cesium.Math.toRadians(20.7052),
// Cesium.Math.toRadians(-62.0054),
// Cesium.Math.toRadians(54.1141)
// ),
// // proxy: new Cesium.DefaultProxy("http://localhost:8888/proxy/"),
// });
// viewer.imageryLayers.addImageryProvider(wmsProvider);
// 加载TMS
// TileMapServiceImageryProvider
// An imagery provider that provides tiled imagery as generated by MapTiler, GDAL2Tiles, etc.
// const tms = new Cesium.TileMapServiceImageryProvider({
// url: "./SampleData/images/cesium_maptiler/Cesium_Logo_Color",
// fileExtension: "png",
// maximumLevel: 4,
// rectangle: new Cesium.Rectangle(
// Cesium.Math.toRadians(-120.0),
// Cesium.Math.toRadians(20.0),
// Cesium.Math.toRadians(-60.0),
// Cesium.Math.toRadians(40.0)
// ),
// });
// viewer.imageryLayers.addImageryProvider(tms);
// 加载WMTS服务
// WebMapTileServiceImageryProvider
// Example 1. USGS shaded relief tiles (KVP)
// const shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
// url: "http://localhost:8888/proxy/http://localhost:8088/geoserver/gwc/service/wmts",
// layer: "nurc:Arc_Sample",
// style: "",
// format: "image/png",
// tileMatrixSetID: "EPSG:4326",
// tileMatrixLabels: [
// "EPSG:4326:0",
// "EPSG:4326:1",
// "EPSG:4326:2",
// "EPSG:4326:3",
// "EPSG:4326:4",
// "EPSG:4326:5",
// "EPSG:4326:6",
// "EPSG:4326:7",
// "EPSG:4326:8",
// "EPSG:4326:9",
// ],
// maximumLevel: 19,
// credit: new Cesium.Credit("U. S. Geological Survey"),
// // proxy: new Cesium.DefaultProxy("http://localhost:8888/proxy/"),
// });
// viewer.imageryLayers.addImageryProvider(shadedRelief1);
// const positron = new Cesium.UrlTemplateImageryProvider({
// url: new Cesium.Resource({
// // proxy: new Cesium.DefaultProxy("http://localhost:8888/proxy/"),
// url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
// }),
// credit:
// "Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
// });
// viewer.imageryLayers.addImageryProvider(positron);
// const shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
// url: "http://localhost:8088/geoserver/gwc/service/wmts",
// layer: "allRegion:linhe",
// style: "",
// format: "image/png",
// tileMatrixSetID: "EPSG:4326",
// tileMatrixLabels: [
// "EPSG:4326:0",
// "EPSG:4326:1",
// "EPSG:4326:2",
// "EPSG:4326:3",
// "EPSG:4326:4",
// "EPSG:4326:5",
// "EPSG:4326:6",
// "EPSG:4326:7",
// "EPSG:4326:8",
// "EPSG:4326:9",
// "EPSG:4326:10",
// "EPSG:4326:11",
// "EPSG:4326:12",
// "EPSG:4326:13",
// "EPSG:4326:14",
// "EPSG:4326:15",
// "EPSG:4326:16",
// "EPSG:4326:17",
// "EPSG:4326:18",
// "EPSG:4326:19",
// "EPSG:4326:20",
// ],
// maximumLevel: 20,
// });
// viewer.imageryLayers.addImageryProvider(shadedRelief1);
// const shadedRelief2 = new Cesium.WebMapTileServiceImageryProvider({
// // url: "http://localhost:8088/geoserver/gwc/service/wmts?layer=allRegion%3Alinhe&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG:4326:{TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
// url: "http://localhost:8088/geoserver/gwc/service/wmts/rest/allRegion:linhe/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
// layer: "allRegion:linhe",
// style: "raster",
// format: "image/png",
// tileMatrixSetID: "EPSG:4326",
// maximumLevel: 20,
// // credit : new Cesium.Credit('U. S. Geological Survey')
// });
// viewer.imageryLayers.addImageryProvider(shadedRelief2);
let matrixIds = [
"EPSG:4326:0",
"EPSG:4326:1",
"EPSG:4326:2",
"EPSG:4326:3",
"EPSG:4326:4",
"EPSG:4326:5",
"EPSG:4326:6",
"EPSG:4326:7",
"EPSG:4326:8",
"EPSG:4326:9",
"EPSG:4326:10",
"EPSG:4326:11",
"EPSG:4326:12",
"EPSG:4326:13",
"EPSG:4326:14",
"EPSG:4326:15",
"EPSG:4326:16",
"EPSG:4326:17",
"EPSG:4326:18",
"EPSG:4326:19",
"EPSG:4326:20",
"EPSG:4326:21",
];
//1.新建ImageryProvider
let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: "http://localhost:8088/geoserver/gwc/service/wmts", //服务地址，如：'http://localhost:8080/geoserver/gwc/service/wmts'
layer: "allRegion:linhe", //图层名称，如：'tasmania'
style: "",
format: "image/png",
tileMatrixSetID: "EPSG:4326",
tileMatrixLabels: matrixIds,
rectangle: new Cesium.Rectangle(
Cesium.Math.toRadians(114.86757474609561),
Cesium.Math.toRadians(32.26997597057521),
Cesium.Math.toRadians(115.03968241643446),
Cesium.Math.toRadians(32.37490502382765)
),
// 切图策略采用地理坐标的方案，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(
114.86757474609561,
32.26997597057521,
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>