网站建设 ui 企业网站贵州快速整站优化

1.npm 下载cesium建议指定版本下载，最新版本有兼容性问题

npm install cesium@1.95.0

2.在node_models中找到cesium将此文件下的Cesium文件复制出来放在项目的静态资源public中或者static中，获取去github上去下载zip包放在本地也可以

3.在index.html中引入js和css

<script src="./static/Cesium/Cesium.js"></script><link rel="stylesheet" href="./static/Cesium/Widgets/widgets.css">

4.现在就可以在页面中打压cesium对象了如果有输出说明引入成功可以直接使用

<div id="my-map"></div><div id="myModal" class="modal"><div id="modal-body"><div id="modelContent">.....自定义样式
<div>
</div>
</div>

mounted(){//设置tokenCesium.Ion.defaultAccessToken = "cesium的token自己去官网申请";var lagObj = [6378137.0, 6378137.0, 6356752.3142451793];//定义地球形状Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(lagObj[0], lagObj[1], lagObj[2]));const viewer = new Cesium.Viewer('my-map', {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: false, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存navigationHelpButton: false, // 是否显示帮助信息控件imageryProvider: new Cesium.UrlTemplateImageryProvider({url: '',//地图背景链接maximumLevel: 17,//瓦片图最大层级})});// 去掉logoviewer.cesiumWidget.creditContainer.style.display = "none";// 加载分割模型3dtitlesconst tileset = new Cesium.Cesium3DTileset({// 3DTiles文件夹的路径url: "/xxxxx/tileset.json",});// 创建一个Entity对象，表示标注点（多个标注点继续写就行会自动增加到 viewer.entities对象）viewer.entities.add({// 设置实体的位置 标注点显示在3D Tiles模型上方(8.0)position: Cesium.Cartesian3.fromDegrees(108.22690195918085, 36.01883508577498, 8.0), // 纬度, 经度// 标记图片billboard: {image: '/static/model/address.png', // 图片的URLscale: 0.1//图片缩放大小},description: '这里是北京市人民大会堂' // 鼠标悬浮时显示的描述});
// 创建一个屏幕空间事件处理器（增加标注点的点击弹框自定义样式）var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);// 用于存储点击位置var lastClickPosition = null;var lon = null;var lat = null;handler.setInputAction(function (click) {const pickedObject = viewer.scene.pick(click.position);const { ellipsoid } = viewer.scene.globe;console.log(viewer.entities, 'viewer.entities++++')const cartesian = viewer.camera.pickEllipsoid(click.position, ellipsoid);const cartographic = ellipsoid.cartesianToCartographic(cartesian);if (Cesium.defined(pickedObject)) {lon = Cesium.Math.toDegrees(cartographic.longitude);lat = Cesium.Math.toDegrees(cartographic.latitude);lastClickPosition = click.position;// 显示模态框showPopup(lastClickPosition);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);var modal = document.getElementById('myModal');var contentDiv = document.getElementById('modelContent');function showPopup(position) {// 清空模态框内容document.getElementById('modal-body').innerHTML = '';// 复制内容到模态框var cloneContent = contentDiv.cloneNode(true);document.getElementById('modal-body').appendChild(cloneContent);modal.style.display = "block";// 设置模态框的位置updatePopupPosition(position);// 添加关闭按钮事件监听document.querySelector('.close').addEventListener('click', function () {modal.style.display = "none";});}// 更新弹窗位置function updatePopupPosition(position) {if (!position || !lastClickPosition) return;// 获取当前视图的屏幕边界var clientPosition = viewer.canvas.getBoundingClientRect();// 计算点击位置相对于浏览器窗口的位置var x = position.x - clientPosition.left;var y = position.y - clientPosition.top;// 设置模态框的位置modal.style.left = x + 'px';modal.style.top = y + 'px';}// 监听视图变化事件viewer.scene.postRender.addEventListener(function () {if (lastClickPosition) {const Cartesian3Result = Cesium.Cartesian3.fromDegrees(lon, lat);const Cartesian2Result222 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Cartesian3Result,);updatePopupPosition(Cartesian2Result222);}});window.addEventListener('unload', function () {handler.destroy();viewer.destroy();});// 将3DTiles集添加到Cesium Viewerviewer.scene.primitives.add(tileset);// // 控制视角到模型位置  自适应大小添加new Cesium.HeadingPitchRange(0.0, -0.5, 0) 到viewer.zoomTo中viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, 0));
}