怎么在网站上添加广告代码,网站建设 资产,厦门市网站建设,seo招聘要求1.npm 下载cesium建议指定版本下载#xff0c;最新版本有兼容性问题
npm install cesium1.95.0
2.在node_models中找到cesium将此文件下的Cesium文件复制出来放在项目的静态资源public中或者static中#xff0c;获取去github上去下载zip包放在本地也可以 3.在index.html中引…1.npm 下载cesium建议指定版本下载最新版本有兼容性问题
npm install cesium1.95.0
2.在node_models中找到cesium将此文件下的Cesium文件复制出来放在项目的静态资源public中或者static中获取去github上去下载zip包放在本地也可以 3.在index.html中引入js和css
script src./static/Cesium/Cesium.js/scriptlink relstylesheet href./static/Cesium/Widgets/widgets.css
4.现在就可以在页面中打压cesium对象了如果有输出说明引入成功可以直接使用
div idmy-map/divdiv idmyModal classmodaldiv idmodal-bodydiv idmodelContent.....自定义样式
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));
}
