<template>
<div>
<div class="full-container" :style="viewStyle" id="cesiumContainer" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import * as Cesium from "cesium";
import * as turf from "@turf/turf";
var viewer = null
var saveLevel = 1; //当前视角层数
var dealArr = [] //需要处理的数组
var gridArr = []; //网格数组
const cesiumGather = reactive({
cesiumViewer: null, //初始化地图
// cesiumPointList: [], //点位集合
// cesiumPointAddList: [], //点位集合
// pointVisible: false, //控制【添|编标注】弹窗
// pointOptions: [
// ],
// pointForm: {
// title: "标注名称",
// point: null,
// image: siteIcon4,
// },
// popVisible: false,
// pointTitle: "",
// drawHandler: null, //事件
});
onMounted(() => {
const tianDiTuToken = "5571cb32eeb8596f97fa9790172addab";
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMTQxMGIzNC04N2M0LTQ0MDUtOTdlYi02ZGE0NTgyZGVjMzAiLCJpZCI6MzA5ODUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTQ2OTQ5NzN9.JbUqIgKO92noy6B8zcYMdq8QygnMKM70RIdJZqAwwdk";
// 服务负载子域
const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
// 创建图层
viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否创建动画小器件,左下角仪表
timeline: true, //是否显示时间轴
geocoder: false, //是否显示geocoder小器件,右上角查询按钮
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
homeButton: true, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
scene3DOnly: false, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
selectionIndicator: false, //是否显示选取指示器组件
navigationHelpButton: false, //是否显示右上角的帮助按钮
baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
shadows: true, //是否显示背影
/*新增的*/
shouldAnimate: true, // Enable animations
});
// 将图层挂载到window上
window.cesiumViewer = viewer;
// viewer.imageryLayers.addImageryProvider(
// new Cesium.WebMapTileServiceImageryProvider({
// //影像注记
// url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${tianDiTuToken}`,
// subdomains: subdomains,
// layer: "tdtCiaLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// maximumLevel: 18,
// })
// );
//优化项--关闭相关特效
viewer.scene.debugShowFramesPerSecond = false; //显示fps
viewer.scene.moon.show = false; //月亮
viewer.scene.fog.enabled = false; //雾
viewer.scene.sun.show = false; //太阳
viewer.scene.skyBox.show = false; //天空盒
viewer.resolutionScale = 1.0; //画面细度,默认值为1.0
//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
//隐藏时间轴
viewer.timeline.container.style.display = "none";
// 设置缩放最小比例
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 122500000;
// 禁止双击
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
// 将三维球定位到中国
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(108.09876, 37.200787, 1400000),
// duration: 1,
// });
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading: Cesium.Math.toRadians(348.4202942851978),
pitch: Cesium.Math.toRadians(-89.74026687972041),
roll: Cesium.Math.toRadians(0),
},
complete: function callback() {
// 定位完成之后的回调函数
},
});
//
const entities = viewer.entities;
var wyoming = viewer.entities.add({
name: 'Wyoming',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArra
cesium根据不同层级大小,划分当前网格
最新推荐文章于 2025-09-08 15:33:38 发布
该代码段展示了如何在Vue项目中集成Cesium库,创建地图视图,设置初始位置,处理鼠标滚轮事件以改变视角层级,并根据层级变化动态绘制不同精度的网格。此外,还涉及到Turf.js库用于地理计算,以及加载和操作地图上的多边形区域。

最低0.47元/天 解锁文章
404

被折叠的 条评论
为什么被折叠?



