vue3【vite】中使用cesium

原创已于 2024-04-11 15:21:57 修改 · 4.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #npm #javascript

于 2022-11-27 18:25:50 首次发布

Cesium 专栏收录该内容

29 篇文章

订阅专栏

这篇博客介绍了如何在本地和在线环境中集成Cesium库来创建3D地图。通过npm安装vite-plugin-cesium和cesium，然后在Vue项目中配置vite.config.js以启用Cesium。示例代码展示了在Vue组件中创建Cesium Viewer并设置地图提供者。另外，还提供了在线引入Cesium的HTML代码，并展示了一个简单的Cesium地图应用实例，加载了ArcGisMapServerImageryProvider作为地图图层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多Cesium示例代码：Cesium Sandcastle

本地安装cesium

安装vite-plugin-cesium：

npm i -D vite-plugin-cesium

安装cesium：

npm i -S cesium

vite.config.js中配置如下：

import cesium from 'vite-plugin-cesium';

示例：

<template>
    <div id="cesiumContainer"></div>
  </template>
  
  <script setup>
  import * as Cesium from 'cesium';
  import { onMounted } from 'vue';
  onMounted(() => {
    const viewer = new Cesium.Viewer('cesiumContainer',{
      infoBox: false, // 禁用沙箱，解决控制台报错
    });
  })
  
  </script>
  
  <style scoped>
  #cesiumContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  </style>

在线引入cesium

在index.html中引入以下js和css文件，即可使用cesium了

  <!-- 引入Cesium -->
  <script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

如果报错的话，就使用以下文件：

<link href="http://file.ljgis.com/cesium/latest/Widgets/widgets.css" rel="stylesheet">
<script src="http://file.ljgis.com/cesium/latest/Cesium.js"></script>

效果图：

示例代码：

<template>
  <div class='test'>
    <div id="map3d"></div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';

onMounted(() => {
  new Cesium.Viewer("map3d", {
    infoBox: false,
    selectionIndicator: false,
    navigation: false,
    animation: false,
    shouldAnimate: false,
    timeline: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
  });
})

</script>
<style lang="scss" scoped>
.test {
  width: 100vw;
  height: 100vh;

  #map3d {
    height: 100%;
  }
}
</style>