在项目中使用步骤

1. npm install cesium --save

2. 接入项目 cesium

node_modules中找到cesium,复制build文件夹下Cesium文件夹到public文件夹下。复制完后就是下图

在这里插入图片描述
3. index.html中引入cesium
注意!!!一定要引入绝对路径不然刷新会报错

<head>
	  <link rel="stylesheet" href="/Cesium/Widgets/widgets.css">
</head>
<body>
	<script type="text/javascript" src="/Cesium/Cesium.js"></script>
</body>

4.完成后重启项目

<template>
    <div id="my-map"></div>
</template>

<script>
let viewer = null,
    handler = null,
    positionList = []

export default {
    data() {
        return {
            viewer: null,
        }
    },
    methods: {
        init() {
            Cesium.Ion.defaultAccessToken = '这里是自己的地图token，可以暂时用自己生成的临时的'
             // 设置静态资源访问地址
            Cesium.buildModuleUrl.setBaseUrl('/Cesium/')
            // 默认显示范围是中国
            Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(73.5, 4, 135, 53.5)
            viewer = new Cesium.Viewer("my-map", {
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                    maximumLevel: 18, // 瓦片可放大的最大值
                    subdomains: "1234"
                }),
                shouldAnimate: true,
                baseLayerPicker: false, // 是否显示图层选择器
                geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
                animation: false, // 是否创建动画小器件，左下角仪表
                fullscreenButton: false, // 是否显示全屏控件，右下角
                homeButton: false, // 是否显示Home按钮
                infoBox: false, // 是否显示信息框
                sceneModePicker: false, // 是否显示3D/2D选择器
                sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
                selectionIndicator: false, // 不会创建SelectionIndicator小部件
                timeline: false, // 不会创建时间线小部件
                navigationHelpButton: false, // 不会创建导航帮助按钮
                navigationInstructionsInitiallyVisible: false, // 是否显示帮助导航
            })
            // 调整画板大小
            viewer.canvas.style.width = '100vw'
            viewer.canvas.style.height = '100vh'
            // 开启地形深度检测
            viewer.scene.globe.depthTestAgainstTerrain = true;
            // 去logo水印
            viewer.cesiumWidget.creditContainer.style.display = 'none'


        },
    },
    mounted() {
      
        this.init();
    },
};
</script>

<style scoped>
#my-map {
    width: 100%;
    height: 100%;
    background-color: black;
}
</style>
# 前端 # javascript # uni-app
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局