2025-03-11 08:25:45 +00:00
|
|
|
<!--********************************************************************
|
|
|
|
|
* by jiawanlong
|
|
|
|
|
*********************************************************************-->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-03-19 03:00:22 +00:00
|
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
2025-03-11 08:25:45 +00:00
|
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
|
|
<script src="./turf.min.js"></script>
|
2025-03-19 03:00:22 +00:00
|
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
2025-03-11 08:25:45 +00:00
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
|
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
2025-08-06 00:53:05 +00:00
|
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNDljNWFmZC03MzRlLTRiMDMtYWIwMi00Yjk4YWQ4NzQwZGEiLCJpZCI6MjU5LCJpYXQiOjE3NTEzNzkyMzR9.OTqPNs3UGNnT1LYkPTavV80wN8Es_YphpJgQcpdnqWc'
|
2025-03-11 08:25:45 +00:00
|
|
|
const viewer = new Cesium.Viewer('map', {});
|
|
|
|
|
// 开启帧率
|
|
|
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
|
|
|
const maskpointArray = []
|
|
|
|
|
axios.get('./anzhouBorder.json')//读取区域json
|
|
|
|
|
.then((response) => {
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < response.data.features[0].geometry.coordinates[0].length; i++) {
|
|
|
|
|
maskpointArray.push(response.data.features[0].geometry.coordinates[0][i][0])
|
|
|
|
|
maskpointArray.push(response.data.features[0].geometry.coordinates[0][i][1])
|
|
|
|
|
}
|
|
|
|
|
var maskspoint = Cesium.Cartesian3.fromDegreesArray(maskpointArray)
|
|
|
|
|
const area = new Cesium.Entity({
|
|
|
|
|
id: 1,
|
|
|
|
|
polygon: {
|
|
|
|
|
hierarchy: {
|
|
|
|
|
positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0,]),//外部区域
|
|
|
|
|
holes: [{
|
|
|
|
|
positions: maskspoint//挖空区域
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
material: Cesium.Color.BLUE.withAlpha(0.6)//外部颜色
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const line = new Cesium.Entity({
|
|
|
|
|
id: 2,
|
|
|
|
|
polyline: {
|
|
|
|
|
positions: maskspoint,
|
|
|
|
|
width: 2,//边界线宽
|
|
|
|
|
material: Cesium.Color.fromCssColorString('#6dcdeb')//边界线颜色
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
viewer.entities.add(area)
|
|
|
|
|
viewer.entities.add(line)
|
|
|
|
|
viewer.flyTo(line, { duration: 3 })
|
|
|
|
|
}).catch((response) => {
|
|
|
|
|
console.log(response)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// -------------------------方法2----------------------
|
|
|
|
|
// axios.get('./anzhouBorder.json')//读取区域json
|
|
|
|
|
// .then((response1) => {
|
|
|
|
|
// let response = response1.data;
|
|
|
|
|
// //设置地表透明
|
|
|
|
|
// let globe = viewer.scene.globe;
|
|
|
|
|
// let scene = viewer.scene;
|
|
|
|
|
// globe.depthTestAgainstTerrain = false;
|
|
|
|
|
// viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影
|
|
|
|
|
// // screenSpaceCameraController获取用于摄像机输入处理的控制器;
|
|
|
|
|
// // enableCollisionDetectio启用或禁用摄影机与地形的碰撞检测,
|
|
|
|
|
// // 为true不会进入地下;
|
|
|
|
|
// // scene.screenSpaceCameraController.enableCollisionDetection = false;
|
|
|
|
|
// globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
|
|
|
|
|
// 400.0,
|
|
|
|
|
// 0.0,
|
|
|
|
|
// 800.0,
|
|
|
|
|
// 1.0
|
|
|
|
|
// );
|
|
|
|
|
// globe.translucency.enabled = true;
|
|
|
|
|
// globe.translucency.frontFaceAlphaByDistance.nearValue = Cesium.Math.clamp(
|
|
|
|
|
// 0.3,
|
|
|
|
|
// 0.0,
|
|
|
|
|
// 0.1
|
|
|
|
|
// );
|
|
|
|
|
// globe.translucency.frontFaceAlphaByDistance.farValue = 1.0;
|
|
|
|
|
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000;
|
|
|
|
|
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000;
|
|
|
|
|
// let bounds = [];
|
|
|
|
|
// // viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
|
|
// // let response = pinggubianjieJson;
|
|
|
|
|
// const maskpointArray = [];
|
|
|
|
|
// for (
|
|
|
|
|
// let i = 0;
|
|
|
|
|
// i < response.features[0].geometry.coordinates[0].length;
|
|
|
|
|
// i++
|
|
|
|
|
// ) {
|
|
|
|
|
// bounds.push([
|
|
|
|
|
// response.features[0].geometry.coordinates[0][i][0],
|
|
|
|
|
// response.features[0].geometry.coordinates[0][i][1],
|
|
|
|
|
// ]);
|
|
|
|
|
// maskpointArray.push(response.features[0].geometry.coordinates[0][i][0]);
|
|
|
|
|
// maskpointArray.push(response.features[0].geometry.coordinates[0][i][1]);
|
|
|
|
|
// }
|
|
|
|
|
// boundspolygon = turf.polygon([bounds]);
|
|
|
|
|
// var maskspoint = Cesium.Cartesian3.fromDegreesArray(maskpointArray);
|
|
|
|
|
// const entity1 = new Cesium.Entity({
|
|
|
|
|
// id: 1,
|
|
|
|
|
// polygon: {
|
|
|
|
|
// hierarchy: {
|
|
|
|
|
// // 绘制的区域太大容易卡顿
|
|
|
|
|
// positions: Cesium.Cartesian3.fromDegreesArray([
|
|
|
|
|
// 100, 0, 100, 89, 150, 89, 150, 0,
|
|
|
|
|
// // 113.37890625, 37.50972584293751, 121.28906250000001,
|
|
|
|
|
// // 37.50972584293751, 121.28906250000001, 42.35854391749705,
|
|
|
|
|
// // 113.37890625, 42.35854391749705, 113.37890625, 37.50972584293751,
|
|
|
|
|
// ]),
|
|
|
|
|
// // holes是图形内需要挖空的区域
|
|
|
|
|
// holes: [
|
|
|
|
|
// {
|
|
|
|
|
// positions: maskspoint,
|
|
|
|
|
// },
|
|
|
|
|
// ],
|
|
|
|
|
// },
|
|
|
|
|
// material: Cesium.Color.WHITE.withAlpha(0.5),
|
|
|
|
|
// // material: Cesium.Color.WHITE.withAlpha(1),
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// const entity3 = new Cesium.Entity({
|
|
|
|
|
// name: "动态立体墙",
|
|
|
|
|
// wall: {
|
|
|
|
|
// positions: maskspoint,
|
|
|
|
|
// maximumHeights: maskspoint.map((res) => {
|
|
|
|
|
// return 600;
|
|
|
|
|
// }),
|
|
|
|
|
// minimumHeights: maskspoint.map((res) => {
|
|
|
|
|
// return -600;
|
|
|
|
|
// }),
|
|
|
|
|
// material: Cesium.Color.fromCssColorString("#6dcdeb"),
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// viewer.entities.add(entity1);
|
|
|
|
|
// viewer.entities.add(entity3);
|
|
|
|
|
// viewer.flyTo(entity3, {
|
|
|
|
|
// duration: 3,
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
