mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
人工模型、风场
This commit is contained in:
jiawanlong
parent
cb3fd0eb4a
commit
10280545a1
54
examples/cesiumEx/2.4.7、人工模型.html
Normal file
54
examples/cesiumEx/2.4.7、人工模型.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!--********************************************************************
|
||||
* by jiawanlong
|
||||
*********************************************************************-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||||
|
||||
</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">
|
||||
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
|
||||
const viewer = new Cesium.Viewer('map', {});
|
||||
|
||||
// 开启帧率
|
||||
viewer.scene.debugShowFramesPerSecond = true;
|
||||
|
||||
// 取消默认的单击和双击事件，右上角弹窗很丑
|
||||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||||
|
||||
|
||||
var position = Cesium.Cartesian3.fromDegrees(121.507762, 31.233975, 200);
|
||||
var heading = Cesium.Math.toRadians(215);
|
||||
var pitch = Cesium.Math.toRadians(0);
|
||||
var roll = Cesium.Math.toRadians(0);
|
||||
|
||||
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||||
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||||
position,
|
||||
hpr
|
||||
);
|
||||
|
||||
var entity = viewer.entities.add({
|
||||
position: position,
|
||||
orientation: orientation,
|
||||
model: {
|
||||
uri: 'https://data.mars3d.cn/gltf/mars/shanghai/pudong/scene.gltf',
|
||||
scale: 520,
|
||||
}
|
||||
});
|
||||
|
||||
viewer.flyTo(entity)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
95
examples/cesiumEx/2.4.8、风力发电机.html
Normal file
95
examples/cesiumEx/2.4.8、风力发电机.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!--********************************************************************
|
||||
* by jiawanlong
|
||||
*********************************************************************-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||||
|
||||
</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">
|
||||
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
|
||||
const viewer = new Cesium.Viewer('map', {});
|
||||
|
||||
// 开启帧率
|
||||
viewer.scene.debugShowFramesPerSecond = true;
|
||||
|
||||
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
|
||||
url: 'http://data.mars3d.cn/terrain'
|
||||
});
|
||||
|
||||
viewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(112.245269, 39.066518, 2913),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(226),
|
||||
pitch: Cesium.Math.toRadians(-21),
|
||||
roll: 0.0
|
||||
}
|
||||
});
|
||||
|
||||
const positions = [
|
||||
{ lng: 112.227630577, lat: 39.0613382363999, alt: 1815 },
|
||||
{ lng: 112.229302206, lat: 39.0579481036999, alt: 1827 },
|
||||
{ lng: 112.226596341, lat: 39.0584773033999, alt: 1849 },
|
||||
{ lng: 112.22511174, lat: 39.0574840383999, alt: 1866 },
|
||||
{ lng: 112.225476722, lat: 39.0550566812, alt: 1866 },
|
||||
{ lng: 112.225643865, lat: 39.0532631538, alt: 1899 },
|
||||
{ lng: 112.229228645, lat: 39.0525930380999, alt: 1880 },
|
||||
{ lng: 112.224976033, lat: 39.0502488098, alt: 1926 },
|
||||
{ lng: 112.225661372999, lat: 39.0484097539999, alt: 1948 },
|
||||
{ lng: 112.229409737, lat: 39.0474211486, alt: 1910 },
|
||||
{ lng: 112.224894212, lat: 39.0464248147999, alt: 1983 },
|
||||
{ lng: 112.224022809, lat: 39.0436919592999, alt: 2036 },
|
||||
{ lng: 112.224492463, lat: 39.0413040158, alt: 2036 },
|
||||
{ lng: 112.223470676999, lat: 39.0381470684, alt: 2038 },
|
||||
{ lng: 112.220336836, lat: 39.039450506, alt: 2071 },
|
||||
{ lng: 112.221019662, lat: 39.0367113260999, alt: 2063 },
|
||||
{ lng: 112.221282611, lat: 39.045567662, alt: 2026 },
|
||||
{ lng: 112.221147308, lat: 39.0439265946, alt: 2048 },
|
||||
{ lng: 112.2216533, lat: 39.041840792, alt: 2056 },
|
||||
{ lng: 112.222813848, lat: 39.0343489941, alt: 2075 },
|
||||
{ lng: 112.225573092, lat: 39.0307660108, alt: 2015 },
|
||||
{ lng: 112.220069655, lat: 39.0323883292, alt: 2022 },
|
||||
{ lng: 112.217448043999, lat: 39.0310627231, alt: 2021 },
|
||||
{ lng: 112.230322327, lat: 39.0281575923999, alt: 1965 }
|
||||
]
|
||||
|
||||
positions.forEach(function (item, index) {
|
||||
var position = Cesium.Cartesian3.fromDegrees(item.lng, item.lat, item.alt);
|
||||
var heading = Cesium.Math.toRadians(135);
|
||||
var pitch = Cesium.Math.toRadians(0);
|
||||
var roll = Cesium.Math.toRadians(0);
|
||||
|
||||
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||||
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||||
position,
|
||||
hpr
|
||||
);
|
||||
|
||||
var entity = viewer.entities.add({
|
||||
position: position,
|
||||
orientation: orientation,
|
||||
model: {
|
||||
uri: 'https://data.mars3d.cn/gltf/mars/fengche.gltf',
|
||||
scale: 40,
|
||||
}
|
||||
});
|
||||
|
||||
entity.model.runAnimations = 1
|
||||
})
|
||||
|
||||
viewer.clock.shouldAnimate = true;
|
||||
|
||||
viewer.flyTo(entity)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
130
examples/cesiumEx/8.1.6、六边形网格.html
Normal file
130
examples/cesiumEx/8.1.6、六边形网格.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!--********************************************************************
|
||||
* by jiawanlong
|
||||
*********************************************************************-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||||
<script src="./turf.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
||||
<div id="map3" style="margin: 0 auto; width: 100%; height: 100%;float: left;"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 三维
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
|
||||
const viewer = new Cesium.Viewer('map3', {});
|
||||
|
||||
// 全局事件监听
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
|
||||
|
||||
// 移入三维
|
||||
handler.setInputAction(function (event) {
|
||||
open3d()
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
|
||||
// 关闭之前所有事件
|
||||
function closeO() {
|
||||
try {
|
||||
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
|
||||
handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
// 进入3d，监听3d事件
|
||||
function open3d() {
|
||||
closeO()
|
||||
handler.setInputAction(function (event) {
|
||||
liandong3D2D()
|
||||
}, Cesium.ScreenSpaceEventType.WHEEL)
|
||||
handler.setInputAction(function (event) {
|
||||
liandong3D2D()
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_UP)
|
||||
}
|
||||
// 3d联动2d
|
||||
function liandong3D2D() {
|
||||
var rectangle = viewer.camera.computeViewRectangle()
|
||||
var west = (rectangle.west / Math.PI) * 180
|
||||
var north = (rectangle.north / Math.PI) * 180
|
||||
var east = (rectangle.east / Math.PI) * 180
|
||||
var south = (rectangle.south / Math.PI) * 180
|
||||
|
||||
|
||||
function calculateCellSide(bbox, N, units = 'kilometers') {
|
||||
const bboxPolygon = turf.bboxPolygon(bbox);
|
||||
const areaMeters = turf.area(bboxPolygon);
|
||||
|
||||
let area;
|
||||
switch (units) {
|
||||
case 'kilometers': area = areaMeters / 1e6; break;
|
||||
case 'miles': area = areaMeters / 2589988.1103; break;
|
||||
default: area = areaMeters;
|
||||
}
|
||||
|
||||
const hexArea = area / N;
|
||||
return Math.sqrt((2 * hexArea) / (3 * Math.sqrt(3)));
|
||||
}
|
||||
|
||||
var bbox = [west , north , east , south ];
|
||||
|
||||
const desiredCount = 100; // 目标生成100个六边形
|
||||
const units = 'kilometers';
|
||||
|
||||
const cellSide = calculateCellSide(bbox, desiredCount, units);
|
||||
|
||||
const hexGrid = turf.hexGrid(bbox, cellSide, { units });
|
||||
|
||||
viewer.scene.primitives.removeAll();
|
||||
const geometryInstances = [];
|
||||
|
||||
hexGrid.features.forEach((hex) => {
|
||||
let boundary = hex.geometry.coordinates
|
||||
const positions = boundary.map(([lat, lon]) =>
|
||||
Cesium.Cartesian3.fromDegrees(lon, lat)
|
||||
);
|
||||
const height = 1;
|
||||
const polygon = new Cesium.PolygonOutlineGeometry({
|
||||
polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(boundary.flat().flat())),
|
||||
extrudedHeight: height,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
const instance = new Cesium.GeometryInstance({
|
||||
geometry: polygon,
|
||||
attributes: {
|
||||
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
||||
Cesium.Color.fromBytes(220, 20, 60, 200)
|
||||
),
|
||||
},
|
||||
});
|
||||
geometryInstances.push(instance);
|
||||
});
|
||||
|
||||
const primitive = new Cesium.Primitive({
|
||||
geometryInstances: geometryInstances,
|
||||
appearance: new Cesium.PerInstanceColorAppearance({
|
||||
flat: true,
|
||||
translucent: true,
|
||||
renderState: {
|
||||
// 禁用抗锯齿
|
||||
lineSmooth: false,
|
||||
// 直接设置线条宽度
|
||||
lineWidth: 10,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
viewer.scene.primitives.add(primitive);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,7 +11,7 @@ var exampleConfig = {
|
||||
content: {
|
||||
"maxssp": {
|
||||
name: "综合应用",
|
||||
name_en: "base",
|
||||
name_en: "ba22222se",
|
||||
content: [
|
||||
{
|
||||
name: "",
|
||||
@ -94,6 +94,30 @@ var exampleConfig = {
|
||||
// },
|
||||
]
|
||||
},
|
||||
"maxs111sp": {
|
||||
name: "常用工具",
|
||||
name_en: "常用工具",
|
||||
content: [
|
||||
{
|
||||
name: "Goejson",
|
||||
name_en: "Goejson",
|
||||
thumbnail: "Goejson.jpg",
|
||||
fileName: "https://geojson.io/"
|
||||
},
|
||||
{
|
||||
name: "mapshaper",
|
||||
name_en: "mapshaper",
|
||||
thumbnail: "mapshaper.jpg",
|
||||
fileName: "https://mapshaper.org/"
|
||||
},
|
||||
{
|
||||
name: "sketchfab",
|
||||
name_en: "sketchfab",
|
||||
thumbnail: "sketchfab.jpg",
|
||||
fileName: " https://sketchfab.com/feed"
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
"base": {
|
||||
@ -553,7 +577,18 @@ var exampleConfig = {
|
||||
thumbnail: "2.4.6、点击获取子节点.jpg",
|
||||
fileName: "2.4.6、点击获取子节点"
|
||||
},
|
||||
|
||||
{
|
||||
name: "2.4.7、人工模型",
|
||||
name_en: "2.4.7、人工模型",
|
||||
thumbnail: "2.4.7、人工模型.jpg",
|
||||
fileName: "2.4.7、人工模型"
|
||||
},
|
||||
{
|
||||
name: "2.4.8、风力发电机",
|
||||
name_en: "2.4.8、风力发电机",
|
||||
thumbnail: "2.4.8、风力发电机.jpg",
|
||||
fileName: "2.4.8、风力发电机"
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
BIN
examples/cesiumEx/img/2.4.7、人工模型.jpg
Normal file
BIN
examples/cesiumEx/img/2.4.7、人工模型.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
examples/cesiumEx/img/2.4.8、风力发电机.jpg
Normal file
BIN
examples/cesiumEx/img/2.4.8、风力发电机.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
examples/cesiumEx/img/Goejson.jpg
Normal file
BIN
examples/cesiumEx/img/Goejson.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
examples/cesiumEx/img/mapshaper.jpg
Normal file
BIN
examples/cesiumEx/img/mapshaper.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
examples/cesiumEx/img/sketchfab.jpg
Normal file
BIN
examples/cesiumEx/img/sketchfab.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
examples/cesiumEx/sd.glb
Normal file
BIN
examples/cesiumEx/sd.glb
Normal file
Binary file not shown.
11
examples/cesiumEx/tunnel_road/license.txt
Normal file
11
examples/cesiumEx/tunnel_road/license.txt
Normal file
@ -0,0 +1,11 @@
|
||||
Model Information:
|
||||
* title: Tunnel Road
|
||||
* source: https://sketchfab.com/3d-models/tunnel-road-9022ca0e48924aad96123389d5322a7d
|
||||
* author: Low poly 3d Models (https://sketchfab.com/lowpoly3dmodels)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* requirements: Author must be credited. Commercial use is allowed.
|
||||
|
||||
If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
|
||||
This work is based on "Tunnel Road" (https://sketchfab.com/3d-models/tunnel-road-9022ca0e48924aad96123389d5322a7d) by Low poly 3d Models (https://sketchfab.com/lowpoly3dmodels) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
BIN
examples/cesiumEx/tunnel_road/scene.bin
Normal file
BIN
examples/cesiumEx/tunnel_road/scene.bin
Normal file
Binary file not shown.
221
examples/cesiumEx/tunnel_road/scene.gltf
Normal file
221
examples/cesiumEx/tunnel_road/scene.gltf
Normal file
@ -0,0 +1,221 @@
|
||||
{
|
||||
"accessors": [
|
||||
{
|
||||
"bufferView": 2,
|
||||
"componentType": 5126,
|
||||
"count": 674,
|
||||
"max": [
|
||||
248.3740692138672,
|
||||
15.668434143066406,
|
||||
14.045370101928711
|
||||
],
|
||||
"min": [
|
||||
-248.3740692138672,
|
||||
2.578251361846924,
|
||||
-48.543540954589844
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 8088,
|
||||
"componentType": 5126,
|
||||
"count": 674,
|
||||
"max": [
|
||||
0.9396920204162598,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
-0.9396951198577881,
|
||||
-0.9999979138374329,
|
||||
-1.0
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 1,
|
||||
"componentType": 5126,
|
||||
"count": 674,
|
||||
"max": [
|
||||
10.767580032348633,
|
||||
0.9981496930122375
|
||||
],
|
||||
"min": [
|
||||
-9.767580032348633,
|
||||
0.0035341978073120117
|
||||
],
|
||||
"type": "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView": 0,
|
||||
"componentType": 5125,
|
||||
"count": 2064,
|
||||
"type": "SCALAR"
|
||||
}
|
||||
],
|
||||
"asset": {
|
||||
"extras": {
|
||||
"author": "Low poly 3d Models (https://sketchfab.com/lowpoly3dmodels)",
|
||||
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
|
||||
"source": "https://sketchfab.com/3d-models/tunnel-road-9022ca0e48924aad96123389d5322a7d",
|
||||
"title": "Tunnel Road"
|
||||
},
|
||||
"generator": "Sketchfab-16.10.0",
|
||||
"version": "2.0"
|
||||
},
|
||||
"bufferViews": [
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 8256,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34963
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 5392,
|
||||
"byteOffset": 8256,
|
||||
"byteStride": 8,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 16176,
|
||||
"byteOffset": 13648,
|
||||
"byteStride": 12,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
}
|
||||
],
|
||||
"buffers": [
|
||||
{
|
||||
"byteLength": 29824,
|
||||
"uri": "scene.bin"
|
||||
}
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"uri": "textures/tunnel_road_texture_baseColor.jpeg"
|
||||
}
|
||||
],
|
||||
"materials": [
|
||||
{
|
||||
"doubleSided": true,
|
||||
"name": "tunnel_road_texture",
|
||||
"pbrMetallicRoughness": {
|
||||
"baseColorTexture": {
|
||||
"index": 0
|
||||
},
|
||||
"metallicFactor": 0.0,
|
||||
"roughnessFactor": 0.6
|
||||
}
|
||||
}
|
||||
],
|
||||
"meshes": [
|
||||
{
|
||||
"name": "tunnel_2_tunnel_road_texture_0",
|
||||
"primitives": [
|
||||
{
|
||||
"attributes": {
|
||||
"NORMAL": 1,
|
||||
"POSITION": 0,
|
||||
"TEXCOORD_0": 2
|
||||
},
|
||||
"indices": 3,
|
||||
"material": 0,
|
||||
"mode": 4
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"nodes": [
|
||||
{
|
||||
"children": [
|
||||
1
|
||||
],
|
||||
"matrix": [
|
||||
1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
2.220446049250313e-16,
|
||||
-1.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0,
|
||||
2.220446049250313e-16,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "Sketchfab_model"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
2
|
||||
],
|
||||
"matrix": [
|
||||
0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
-0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "dacd20ca2e674f39a5e9eae13b016a21.fbx"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
3
|
||||
],
|
||||
"name": "RootNode"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
4
|
||||
],
|
||||
"name": "tunnel_2"
|
||||
},
|
||||
{
|
||||
"mesh": 0,
|
||||
"name": "tunnel_2_tunnel_road_texture_0"
|
||||
}
|
||||
],
|
||||
"samplers": [
|
||||
{
|
||||
"magFilter": 9729,
|
||||
"minFilter": 9987,
|
||||
"wrapS": 10497,
|
||||
"wrapT": 10497
|
||||
}
|
||||
],
|
||||
"scene": 0,
|
||||
"scenes": [
|
||||
{
|
||||
"name": "Sketchfab_Scene",
|
||||
"nodes": [
|
||||
0
|
||||
]
|
||||
}
|
||||
],
|
||||
"textures": [
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
121
examples/cesiumEx/隧道.html
Normal file
121
examples/cesiumEx/隧道.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!--********************************************************************
|
||||
* by jiawanlong
|
||||
*********************************************************************-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||||
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.127/Build/Cesium/Cesium.js"></script>
|
||||
<link href="https://cesium.com/downloads/cesiumjs/releases/1.127/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> -->
|
||||
<script src="./turf.min.js"></script>
|
||||
|
||||
<!-- 收费站、道路、高架桥、河流、隧道、车辆、高铁、飞机、高压线 -->
|
||||
</head>
|
||||
|
||||
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
||||
<div id="cesiumContainer" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
|
||||
// const viewer = new Cesium.Viewer('cesiumContainer', {});
|
||||
// viewer.scene.debugShowFramesPerSecond = true;
|
||||
// // 清除默认地形
|
||||
// viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
|
||||
|
||||
// // 加载火星地形
|
||||
// viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
|
||||
// url: 'http://data.mars3d.cn/terrain'
|
||||
// });
|
||||
// // 深度监测
|
||||
// viewer.scene.globe.depthTestAgainstTerrain = true;
|
||||
|
||||
// 经度:109.965183, 纬度:31.154943, 高程:446.5, 横坐标:37401328.2, 纵坐标:3448614.0 (CGCS2000)
|
||||
// 经度:109.567922, 纬度:31.235356, 高程:182.9, 横坐标:37398678.4, 纵坐标:3457556.3 (CGCS2000)
|
||||
|
||||
|
||||
// let start = [109.965183, 31.154943, 400];
|
||||
// let end = [109.567922, 31.235356, 400];
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
terrainProvider: Cesium.createWorldTerrain(),
|
||||
});
|
||||
|
||||
let obj = {"lat":31.152283,"lng":109.966151,"alt":763.3,"heading":341.3,"pitch":-45.2}
|
||||
viewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(obj.lng, obj.lat, obj.alt),
|
||||
orientation: {
|
||||
heading: Cesium.Math.toRadians(obj.heading),
|
||||
pitch: Cesium.Math.toRadians(obj.pitch),
|
||||
roll: 0.0
|
||||
}
|
||||
});
|
||||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||||
|
||||
|
||||
// 定义隧道参数
|
||||
const startPoint = Cesium.Cartesian3.fromDegrees(109.965183, 31.154943); // 起点
|
||||
const endPoint = Cesium.Cartesian3.fromDegrees(109.567922, 31.235356); // 终点
|
||||
const tunnelWidth = 20.0; // 隧道宽度（米）
|
||||
const tunnelHeight =446.0; // 隧道高度（米）
|
||||
|
||||
//-----------------------------------------------------------
|
||||
// **关键修正 1：计算隧道路径方向向量**
|
||||
//-----------------------------------------------------------
|
||||
const direction = Cesium.Cartesian3.subtract(endPoint, startPoint, new Cesium.Cartesian3());
|
||||
Cesium.Cartesian3.normalize(direction, direction);
|
||||
|
||||
// 计算垂直于路径的水平方向（左右方向）
|
||||
const rightDirection = Cesium.Cartesian3.cross(
|
||||
direction,
|
||||
Cesium.Cartesian3.UNIT_Z,
|
||||
new Cesium.Cartesian3()
|
||||
);
|
||||
Cesium.Cartesian3.normalize(rightDirection, rightDirection);
|
||||
|
||||
//-----------------------------------------------------------
|
||||
// **关键修正 2：正确设置裁剪平面参数**
|
||||
//-----------------------------------------------------------
|
||||
const clippingPlanes = new Cesium.ClippingPlaneCollection({
|
||||
planes: [
|
||||
// 左侧面（法线向右，偏移量为负宽度/2）
|
||||
new Cesium.ClippingPlane(
|
||||
rightDirection,
|
||||
-tunnelWidth / 2 // 平面向右移动宽度的一半
|
||||
),
|
||||
// 右侧面（法线向左，偏移量为负宽度/2）
|
||||
new Cesium.ClippingPlane(
|
||||
Cesium.Cartesian3.negate(rightDirection, new Cesium.Cartesian3()),
|
||||
-tunnelWidth / 2
|
||||
),
|
||||
// 顶部（法线向下，偏移量为负高度/2）
|
||||
new Cesium.ClippingPlane(
|
||||
Cesium.Cartesian3.UNIT_Z,
|
||||
-tunnelHeight / 2
|
||||
),
|
||||
// 底部（法线向上，偏移量为负高度/2）
|
||||
new Cesium.ClippingPlane(
|
||||
Cesium.Cartesian3.negate(Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()),
|
||||
-tunnelHeight / 2
|
||||
)
|
||||
],
|
||||
// edgeWidth: 1.0,
|
||||
// edgeColor: Cesium.Color.RED
|
||||
});
|
||||
|
||||
//-----------------------------------------------------------
|
||||
// **关键修正 3：确保裁剪平面位置正确**
|
||||
//-----------------------------------------------------------
|
||||
// 将裁剪平面集合平移到隧道路径中心
|
||||
const center = Cesium.Cartesian3.lerp(startPoint, endPoint, 0.5, new Cesium.Cartesian3());
|
||||
clippingPlanes.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
|
||||
|
||||
// 应用裁剪到地形
|
||||
viewer.scene.globe.clippingPlanes = clippingPlanes;
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -123,8 +123,8 @@ function createGalleryChart(example) {
|
||||
|
||||
var chartDiv = $("<div class='col-xlg-2 col-lg-3 col-md-4 col-sm-6 col-xs-12'></div>");
|
||||
var chart = $("<div class='chart'></div>");
|
||||
if (href == '1、优雅永不过时') {
|
||||
var link = $("<a class='chart-link' target='_blank' href='https://z2586300277.github.io/three-cesium-examples/'></a>");
|
||||
if (href.indexOf('http') >-1 ) {
|
||||
var link = $("<a class='chart-link' target='_blank' href='"+href+"'></a>");
|
||||
} else {
|
||||
var link = $("<a class='chart-link' target='_blank' href='" + target + "#" + href + "'></a>");
|
||||
}
|
||||
|
||||
@ -44,18 +44,22 @@
|
||||
<li class="navbar-menu" id="mapboxgl-menu">
|
||||
<a class="center" target="_self" href="../threeEx/examples.html">Three Examples</a>
|
||||
</li>
|
||||
<li class="navbar-menu" id="mapboxgl-menu">
|
||||
<!-- <li class="navbar-menu" id="mapboxgl-men1u">
|
||||
<a class="center" target="_self" href="../babylonEx/examples.html">Babylon</a>
|
||||
</li>
|
||||
<li class="navbar-menu" id="mapboxgl-menu">
|
||||
</li> -->
|
||||
<li class="navbar-menu" id="mapboxgl-m2enu">
|
||||
<a class="center" target="_self" href="../webglEx/examples.html">Webgl</a>
|
||||
</li>
|
||||
<li class="navbar-menu" id="mapboxgl-menu">
|
||||
<li class="navbar-menu" id="mapboxgl-me3nu">
|
||||
<a class="center" target="_self" href="../webgpuEx/examples.html">WebGPU</a>
|
||||
</li>
|
||||
<li class="navbar-menu" id="mapboxgl-menu">
|
||||
<li class="navbar-menu" id="mapboxgl-me4nu">
|
||||
<a class="center" target="_blank" href="https://cesium.com/learn/cesiumjs/ref-doc/">Cesium API</a>
|
||||
</li>
|
||||
<li class="navbar-menu" id="mapboxgl-me4nu">
|
||||
<a class="center" target="_blank" href=" https://sandcastle.cesium.com/">Cesium Demo</a>
|
||||
</li>
|
||||
|
||||
<!-- <li class="navbar-menu" id="mapboxgl-menu">
|
||||
<a class="center" target="_self" href="../cesiumGf/examples.html">Cesium GF</a>
|
||||
</li> -->
|
||||
|
||||
@ -16,7 +16,7 @@ var exampleConfig = {
|
||||
name: "优雅永不过时",
|
||||
name_en: "优雅永不过时",
|
||||
thumbnail: "1、优雅永不过时.jpg",
|
||||
fileName: "1、优雅永不过时"
|
||||
fileName: "https://z2586300277.github.io/three-cesium-examples/"
|
||||
},
|
||||
{
|
||||
name: "0、360",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user