急用前端代码的靓仔直接抄这个h5文件
后端geoserver wmts服务搭建参考链接 快速搭建一个geoserver 和 wmts服务-CSDN博客
'<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium WMTS Example</title>
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Widgets/widgets.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Cesium.js"></script>
<style>
#cesiumContainer {
width: 100%;
height: 100vh;
display: block;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
window.onload = function () {
//边界
const maxX = 114.53822135925296;
const maxY = 35.492682492339824;
const minX = 114.58851814270022;
const minY = 35.511059477216364;
//边界
const border = new Cesium.Rectangle(
Cesium.Math.toRadians(maxX),
Cesium.Math.toRadians(maxY),
Cesium.Math.toRadians(minX),
Cesium.Math.toRadians(minY)
);
// todo 写入配置文件
// 设置初始视图,缩放到层级16,并将中心定位到指定坐标
const centerLongitude = (maxX + minX) / 2.0;
const centerLatitude = (maxY + minY) / 2.0;
const height_16 = 1200; //初始化层级高度(16)
//设置wmts服务参数
const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
layer: 'casco:huaxian_station2',//图层名称
style: '',
format: 'image/png',//图片格式
tileMatrixSetID: 'EPSG:4326',//网格集
tilingScheme: new Cesium.GeographicTilingScheme(),//
ellipsoid: Cesium.Ellipsoid.WGS84,//椭球 参考坐标系
});
/**
* 参考链接 : https://cloud.tencent.com/developer/article/2340502
*/
//获取视图(提供标签id)
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,//动画部件
imageryProvider: false,//使用自定义地图服务
baseLayerPicker: false,//地图图层组件
timeline: false,//时间线
navigationHelpButton:false,//帮助按钮
infoBox: true,// 信息框
fullscreenButton: false,//全屏按钮
geocoder: false,//地理编码搜索组件
});
/**
* 参考链接 https://juejin.cn/post/7057776364010602526
*/
//去掉版权
viewer._cesiumWidget._creditContainer.style.display="none";
viewer.scene.debugShowFramesPerSecond = true;// 显示帧数
viewer.scene.globe.depthTestAgainstTerrain = true;// 禁止相机进入地下
/* 关闭鼠标操作惯性 */
let CesiumViewerSceneController = viewer.scene.screenSpaceCameraController;
CesiumViewerSceneController.inertiaSpin = 0;//旋转
CesiumViewerSceneController.inertiaTranslate = 0;//平移
CesiumViewerSceneController.inertiaZoom = 0;//变焦
//设置归位键
var homeCameraView = {
destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16), // 设置经纬度和高度
orientation: { //3d参数
heading: Cesium.Math.toRadians(0.0), // 方向(以弧度为单位),0 表示正北
pitch: Cesium.Math.toRadians(-90.0), // 倾斜度(以弧度为单位),-90 表示向下看
roll: 0.0 // 滚动度(以弧度为单位)
}
};
viewer.homeButton.viewModel.command.cameraView = homeCameraView;
viewer.homeButton.viewModel.scene = viewer.scene; 4
//设置地图源
viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16)
});
//设置最低 和 最高缩放
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;//(m)
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000;//(m)
};
</script>
</body>
</html>'
下面是对代码的解析
<!--地图容器 使用id定位-->
<div id="cesiumContainer"></div>
核心方法在这里
//设置wmts服务参数
const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
layer: 'casco:huaxian_station2',//图层名称
style: '',
format: 'image/png',//图片格式
tileMatrixSetID: 'EPSG:4326',//网格集
tilingScheme: new Cesium.GeographicTilingScheme(),//
ellipsoid: Cesium.Ellipsoid.WGS84,//椭球 参考坐标系
});
url是geoserver wmts服务的调用地址,可以在geoserver 的文档中找到
http://127.0.0.1:8080/geoserver/web(先进入你的geoerver服务首页)
在文档中直接ctrl + f 硬着头皮搜 你的图层名称
把这个url直接丢到代码里就行
下面的其他参数也有对应的注释
墨卡托: new Cesium.WebMercatorTilingScheme
后面是对地图页面的一些微调
1.Cesium组件隐藏
这里的viewer代表是整个地图对象,可以对其修改,实现多种配置
参考链接 : https://cloud.tencent.com/developer/article/2340502
//获取视图(提供标签id)
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,//动画部件
imageryProvider: false,//使用自定义地图服务
baseLayerPicker: false,//地图图层组件
timeline: false,//时间线
navigationHelpButton:false,//帮助按钮
infoBox: true,// 信息框
fullscreenButton: false,//全屏按钮
geocoder: false,//地理编码搜索组件
});
2.界面优化
参考链接 https://juejin.cn/post/7057776364010602526
viewer._cesiumWidget._creditContainer.style.display="none"; //去掉版权
viewer.scene.debugShowFramesPerSecond = true;// 显示帧数
viewer.scene.globe.depthTestAgainstTerrain = true;// 禁止相机进入地下
/* 关闭鼠标操作惯性 加速缩放 */
let CesiumViewerSceneController = viewer.scene.screenSpaceCameraController;
CesiumViewerSceneController.inertiaSpin = 0;//旋转
CesiumViewerSceneController.inertiaTranslate = 0;//平移
CesiumViewerSceneController.inertiaZoom = 0;//变焦
//设置归位键(好像没啥用,还在调试)
var homeCameraView = {
destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16), // 设置经纬度和高度
orientation: { //3d参数
heading: Cesium.Math.toRadians(0.0), // 方向(以弧度为单位),0 表示正北
pitch: Cesium.Math.toRadians(-90.0), // 倾斜度(以弧度为单位),-90 表示向下看
roll: 0.0 // 滚动度(以弧度为单位)
}
};
viewer.homeButton.viewModel.command.cameraView = homeCameraView;
viewer.homeButton.viewModel.scene = viewer.scene;
3.绑定地图服务
//设置地图源
viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
4.初始化位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16)
});
5.限制缩放高度
//设置最低 和 最高缩放
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;//(m)
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000;//(m)
最后结果(vue版本)
<template>
<div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
// 边界坐标
const maxX = 114.53822135925296
const maxY = 35.492682492339824
const minX = 114.58851814270022
const minY = 35.511059477216364
const border = new Cesium.Rectangle(
Cesium.Math.toRadians(maxX),
Cesium.Math.toRadians(maxY),
Cesium.Math.toRadians(minX),
Cesium.Math.toRadians(minY)
)
// 定位中心和高度设置
const centerLongitude = (maxX + minX) / 2.0
const centerLatitude = (maxY + minY) / 2.0
const height_16 = 1200 // 初始化层级高度
// WMTS 服务参数
const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
layer: 'casco:huaxian_station2', // 图层名称
style: '',
format: 'image/png', // 图片格式
tileMatrixSetID: 'EPSG:4326', // 网格集
tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案
ellipsoid: Cesium.Ellipsoid.WGS84, // 球 参考坐标系
})
// 视图配置
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 动画部件
imageryProvider: false, // 使用自定义地图服务
baseLayerPicker: false, // 地图图层组件
timeline: false, // 时间线
navigationHelpButton: false, // 帮助按钮
infoBox: true, // 信息框
fullscreenButton: false, // 全屏按钮
geocoder: true, // 地理编码搜索组件
})
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏版权信息
viewer.scene.debugShowFramesPerSecond = true // 显示帧数
viewer.scene.globe.depthTestAgainstTerrain = true // 禁止相机进入地下
/* 关闭鼠标操作惯性 */
const CesiumViewerSceneController = viewer.scene.screenSpaceCameraController
CesiumViewerSceneController.inertiaSpin = 0 // 旋转
CesiumViewerSceneController.inertiaTranslate = 0 // 平移
CesiumViewerSceneController.inertiaZoom = 0 // 变焦
// 设置归位键
const homeCameraView = {
destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16), // 设置经纬度和高度
orientation: { // 3d参数
heading: Cesium.Math.toRadians(0.0), // 方向(以弧度为单位),0 表示正北
pitch: Cesium.Math.toRadians(-90.0), // 倾斜度(以弧度为单位),-90 表示向下看
roll: 0.0 // 滚动度(以弧度为单位)
},
}
viewer.homeButton.viewModel.command.cameraView = homeCameraView
// 设置地图源和初始视图
viewer.imageryLayers.addImageryProvider(wmtsImageryProvider)
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16),
})
// 设置缩放限制
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100 // (m)
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000 // (m)
})
</script>
<style lang="scss" scoped>
#cesiumContainer {
width: 100%;
height: 100vh;
display: block;
}
</style>
备注:
使用html文件第一次加载,要卡一哈子,下载Cesium.js(要有网才得行哦,老表)。
标签:const,viewer,离线,scene,wmts,geoserver,Cesium,false,Math From: https://blog.csdn.net/jingjiaohuan/article/details/143411982