[JavaScript知识库]Cesium中添加entitie模型，实现贴地。

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;

完整代码

<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&ltype=4",
    // url: 'https://wprd03.is.autonavi.com/appmaptile?&x=6666&y=3430&z=13&lang=zh_cn&size=2&scl=1&style=8&ltype=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>