|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Cesium地图展示</title>
|
|
|
|
|
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script>
|
|
|
|
|
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
#cesiumContainer {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="cesiumContainer"></div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 初始化Cesium查看器
|
|
|
|
|
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
|
|
|
|
|
terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 使用椭球体地形
|
|
|
|
|
|
animation: false,
|
|
|
|
|
|
baseLayerPicker: true, // 启用底图选择器
|
|
|
|
|
|
fullscreenButton: true, // 启用全屏按钮
|
|
|
|
|
|
geocoder: true, // 启用地理编码器
|
|
|
|
|
|
homeButton: true, // 启用主页按钮
|
|
|
|
|
|
infoBox: true, // 启用信息框
|
|
|
|
|
|
sceneModePicker: true, // 启用场景模式选择器
|
|
|
|
|
|
selectionIndicator: true,
|
|
|
|
|
|
timeline: false,
|
|
|
|
|
|
navigationHelpButton: true
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 移除默认的影像图层
|
|
|
|
|
|
viewer.imageryLayers.removeAll();
|
|
|
|
|
|
|
|
|
|
|
|
// 添加Google卫星图层
|
|
|
|
|
|
viewer.imageryLayers.addImageryProvider(
|
|
|
|
|
|
new Cesium.UrlTemplateImageryProvider({
|
|
|
|
|
|
url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
|
|
|
|
|
|
minimumLevel: 1,
|
|
|
|
|
|
maximumLevel: 20,
|
|
|
|
|
|
credit: new Cesium.Credit('Google Maps')
|
|
|
|
|
|
})
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// 添加自定义瓦片图层
|
|
|
|
|
|
const customTiles = viewer.imageryLayers.addImageryProvider(
|
|
|
|
|
|
new Cesium.UrlTemplateImageryProvider({
|
|
|
|
|
|
url: '/tiles/{z}/{x}_{y}.png', // 修改为X_Y.png格式
|
|
|
|
|
|
|
|
|
|
|
|
credit: new Cesium.Credit('Custom Tiles'),
|
|
|
|
|
|
// 添加错误处理
|
|
|
|
|
|
errorCallback: function (error) {
|
|
|
|
|
|
console.error('瓦片加载错误:', error);
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 添加瓦片请求处理
|
|
|
|
|
|
requestVertexNormals: true,
|
|
|
|
|
|
requestWaterMask: true,
|
|
|
|
|
|
// 添加瓦片加载重试
|
|
|
|
|
|
maximumRetries: 3,
|
|
|
|
|
|
// 添加瓦片加载超时
|
|
|
|
|
|
timeout: 10000,
|
|
|
|
|
|
// 添加瓦片加载策略
|
|
|
|
|
|
tileCacheSize: 1000, // 增加缓存大小
|
|
|
|
|
|
enablePickFeatures: false, // 禁用要素拾取以提高性能
|
|
|
|
|
|
// 添加瓦片加载策略
|
|
|
|
|
|
tileDiscardPolicy: new Cesium.DiscardMissingTileImagePolicy({
|
|
|
|
|
|
missingImageUrl: '/tiles/empty.png', // 可选：设置缺失瓦片的替代图片
|
|
|
|
|
|
pixelsToCheck: [0, 0, 1, 1], // 检查瓦片的像素点
|
|
|
|
|
|
disableCheckIfAllPixelsAreTransparent: true // 如果所有像素都是透明的，则禁用检查
|
|
|
|
|
|
}),
|
|
|
|
|
|
// 添加瓦片加载优先级
|
|
|
|
|
|
tileLoadPriority: 1, // 设置高优先级
|
|
|
|
|
|
// 添加瓦片加载策略
|
|
|
|
|
|
tileLoadProgressEvent: new Cesium.Event(), // 添加瓦片加载进度事件
|
|
|
|
|
|
// 添加瓦片加载策略
|
|
|
|
|
|
tileLoadErrorEvent: new Cesium.Event() // 添加瓦片加载错误事件
|
|
|
|
|
|
})
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// 设置瓦片图层的透明度
|
|
|
|
|
|
customTiles.alpha = 0.7;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置相机位置到瓦片区域
|
|
|
|
|
|
viewer.camera.setView({
|
|
|
|
|
|
destination: Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
114.450165, // west
|
|
|
|
|
|
30.248171, // south
|
|
|
|
|
|
114.454021, // east
|
|
|
|
|
|
30.250863 // north
|
|
|
|
|
|
),
|
|
|
|
|
|
orientation: {
|
|
|
|
|
|
heading: 0,
|
|
|
|
|
|
pitch: -Math.PI / 4,
|
|
|
|
|
|
roll: 0
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 添加一些调试信息
|
|
|
|
|
|
console.log('Cesium版本:', Cesium.VERSION);
|
|
|
|
|
|
console.log('查看器已初始化');
|
|
|
|
|
|
|
|
|
|
|
|
// KML加载功能封装
|
|
|
|
|
|
function loadKMLFiles(enable = true) {
|
|
|
|
|
|
if (!enable) {
|
|
|
|
|
|
// 如果禁用，清除所有KML数据源
|
|
|
|
|
|
viewer.dataSources.removeAll();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 获取所有KML文件列表
|
|
|
|
|
|
fetch('/kml_files')
|
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(kmlFiles => {
|
|
|
|
|
|
console.log('找到的KML文件:', kmlFiles);
|
|
|
|
|
|
// 创建一个数组来存储所有的数据源
|
|
|
|
|
|
const dataSources = [];
|
|
|
|
|
|
|
|
|
|
|
|
// 加载所有KML文件
|
|
|
|
|
|
Promise.all(kmlFiles.map(kmlFile => {
|
|
|
|
|
|
const kmlDataSource = new Cesium.KmlDataSource();
|
|
|
|
|
|
return kmlDataSource.load(`/kml/${kmlFile}`, {
|
|
|
|
|
|
camera: viewer.scene.camera,
|
|
|
|
|
|
canvas: viewer.scene.canvas
|
|
|
|
|
|
}).then(function (dataSource) {
|
|
|
|
|
|
console.log(`成功加载KML文件: ${kmlFile}`);
|
|
|
|
|
|
viewer.dataSources.add(dataSource);
|
|
|
|
|
|
dataSources.push(dataSource);
|
|
|
|
|
|
return dataSource;
|
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
|
console.error(`加载KML文件 ${kmlFile} 失败:`, error);
|
|
|
|
|
|
});
|
|
|
|
|
|
})).then(function () {
|
|
|
|
|
|
// 当所有KML文件都加载完成后，定位到最后一个KML文件
|
|
|
|
|
|
if (dataSources.length > 0) {
|
|
|
|
|
|
const lastDataSource = dataSources[dataSources.length - 1];
|
|
|
|
|
|
// 使用最后一个KML文件的经纬度范围
|
|
|
|
|
|
const rectangle = Cesium.Rectangle.fromDegrees(
|
|
|
|
|
|
114.450165, // west
|
|
|
|
|
|
30.248171, // south
|
|
|
|
|
|
114.454021, // east
|
|
|
|
|
|
30.250863 // north
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// 设置相机位置
|
|
|
|
|
|
viewer.camera.setView({
|
|
|
|
|
|
destination: rectangle,
|
|
|
|
|
|
orientation: {
|
|
|
|
|
|
heading: 0,
|
|
|
|
|
|
pitch: -Math.PI / 4,
|
|
|
|
|
|
roll: 0
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('获取KML文件列表失败:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 添加标记功能
|
|
|
|
|
|
function addMarker(longitude, latitude, name, description) {
|
|
|
|
|
|
const entity = viewer.entities.add({
|
|
|
|
|
|
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
|
|
|
name: name,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
text: name,
|
|
|
|
|
|
font: '14pt sans-serif',
|
|
|
|
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
|
|
|
outlineWidth: 2,
|
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
|
pixelOffset: new Cesium.Cartesian2(0, -10)
|
|
|
|
|
|
},
|
|
|
|
|
|
description: description,
|
|
|
|
|
|
billboard: {
|
|
|
|
|
|
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Map_marker.svg/128px-Map_marker.svg.png',
|
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
|
scale: 0.5
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 添加点击事件
|
|
|
|
|
|
viewer.screenSpaceEventHandler.setInputAction(function (movement) {
|
|
|
|
|
|
const pickedObject = viewer.scene.pick(movement.position);
|
|
|
|
|
|
if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
|
|
|
|
|
|
// 显示信息窗口
|
|
|
|
|
|
viewer.selectedEntity = entity;
|
|
|
|
|
|
}
|
|
|
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 示例：添加一个标记
|
|
|
|
|
|
addMarker(114.452093, 30.249517, '测试标记', '这是一个测试标记点<br>点击查看详细信息');
|
|
|
|
|
|
|
|
|
|
|
|
// 初始加载KML文件（设置为false可以禁用KML加载）
|
|
|
|
|
|
loadKMLFiles(false);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
