vue2中引入cesium全步骤
1.npm 下载cesium建议指定版本下载，最新版本有兼容性问题
npm install cesium@1.95.02.在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(){
//设置token
Cesium.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,//瓦片图最大层级
})
});
// 去掉logo
viewer.cesiumWidget.creditContainer.style.display = "none";
// 加载分割模型3dtitles
const 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', // 图片的URL
scale: 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 Viewer
viewer.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));
}