1.Cesium中添加entitie模型，实现贴地。
2. 添加模型
const createModel = (url) => {
const entity = viewer.entities.add({
name: '这是一个模型',
position: Cesium.Cartesian3.fromDegrees({ -123.0744619, 44.0503706, 100 }),
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 2000,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
})
};
这里的url(模型的链接)，我是用node.js。express框架实现的静态资源
node.js
const express = require('express')
const app = express()
const port = 5555
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.use((req, res, next) => {
//设置请求头
res.set({
'Access-Control-Allow-Credentials': true,
'Access-Control-Max-Age': 1728000,
'Access-Control-Allow-Origin': req.headers.origin || '*',
'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
'Content-Type': 'application/json; charset=utf-8'
})
req.method === 'OPTIONS' ? res.status(204).end() : next()
})
app.use(express.static('./static'))
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
2.实现贴地
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
const entity = viewer.entities.add({
name: '这是一个模型',
position: Cesium.Cartesian3.fromDegrees({ -123.0744619, 44.0503706, 100 }),
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 2000,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
})
viewer.trackedEntity = entity;
```
完整代码
```vue
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from "vue";
import { Viewer, ArcGisMapServerImageryProvider, HeightReference, Cartographic, Transforms, Color,PointGraphics, HeadingPitchRoll, ScreenSpaceEventType, Math, UrlTemplateImageryProvider, createWorldTerrain, Cartesian3, ScreenSpaceEventHandler } from 'cesium';
// import ScreenSpaceEventHandler from "cesium/Source/Core/ScreenSpaceEventHandler";
const geogle = new ArcGisMapServerImageryProvider({
url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
// console.log(, 'createWorldTerrain');
onMounted(() => {
const viewer = new Viewer('cesiumContainer', {
imageryProvider: geogle,
selectionIndicator: false,
shadows: true,
shouldAnimate: true,
animation: true, // 是否显示动画组件
homeButton: false, // 是否显示Home按钮
fullscreenButton: false, // 是否显示全屏
baseLayerPicker: false, // 是否显示图层选择控件
geocoder: false, // 是否显示地名查找控件
sceneModePicker: false, // 是否显示投影方式选择
navigationHelpButton: false, // 是否显示帮助按钮
infoBox: true, // 是否显示点击要素之后显示信息
requestRenderMode: true, // 启用请求渲染模式
sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处//去除版权信息
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
shouldAnimate: true,
terrainProvider: new createWorldTerrain({
requestVertexNormals: true,
requestWaterMask: true
})
});
viewer.cesiumWidget.creditContainer.style.display = "none";
viewer.imageryLayers.addImageryProvider(new UrlTemplateImageryProvider({
url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8<ype=4",
// url: 'https://wprd03.is.autonavi.com/appmaptile?&x=6666&y=3430&z=13&lang=zh_cn&size=2&scl=1&style=8<ype=4',
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}));
viewer.scene.globe.depthTestAgainstTerrain = true
// viewer.scene.globe.enableLighting = true;
const createModel = (height, url) => {
// console.log(height, 'height')
// console.log(, '士大夫')
viewer.entities.removeAll(); // 清空所以的entitie
const position = Cartesian3.fromDegrees(
// -123.0744619,
// 44.0503706,
98.644266,28.899404,
100
);
const heading = Math.toRadians(135); // 朝向
const pitch = 0; // 高度
const roll = 0; // 滚动
const hpr = new HeadingPitchRoll(heading, pitch, roll);
const orientation = Transforms.headingPitchRollQuaternion(
position,
hpr
); // 取向
const d = Cartesian3.fromDegrees(-123.0744619,44.0503706);
// 初始化实例
const entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000,
// disableDepthTestDistance:99000000
heightReference: HeightReference.CLAMP_TO_GROUND
},
point: new PointGraphics({
show: true,
pixelSize: 10,
heightReference: HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: 99000000,
}),
label: {
text: '是的',
heightReference: HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: 99000000
}
// box: {
// dimensions: new Cartesian3(5.0, 2.0, 0),
// fill: false,
// outline: true,
// outlineColor: Color.YELLOW
// }
});
// console.log(entity._position._value, 'entityentity')
const positions = [
new Cartographic(-1.31968, 0.69887),
new Cartographic(-1.10489, 0.83923)
];
viewer.trackedEntity = entity;
const scene = viewer.scene;
// const promise = scene.sampleHeightMostDetailed(entity._position._value);
// console.log(promise, 'promise')
// promise.then(res => {
// console.log(res, 'ds');
// }, rej => {
// console.log(rej, 'rej')
// })
}
// const getModelHeight = () => {
// const handler = ScreenSpaceEventHandler(viewer.canvas);
// handler.setInputAction((evt) => {
// const scene = viewer.scene;
// console.log(scene, 'scene');
// }, ScreenSpaceEventType.LEFT_CLICK)
// }
createModel(10, 'http://localhost:5555/CesiumMilkTruck.glb');
// getModelHeight();
})
</script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>