vue3.x+element-plus+cesium整合

最新推荐文章于 2025-10-18 19:19:20 发布

原创

最新推荐文章于 2025-10-18 19:19:20 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何使用Vue CLI创建项目并集成Cesium库，展示如何创建Cesium三维场景组件，实现实时坐标信息在状态栏显示，并解决标绘功能的Bug。通过npm包管理，逐步构建了一个包含ArcGIS地图和屏幕空间事件处理的交互式应用。

标绘功能还有一些Bug没有解决，以后有时间慢慢完善吧，代码先不放了。
效果图
一、npm包下载安装
1、安装最新版vue-cli
npm i @vue/cli -g
2、安装element-plus
npm i element-plus --save
3、安装Cesium
npm i cesium
二、创建项目
1、初始化Vue项目
vue create cesiumapp
2、创建Cesium三维场景组件

<template>
  <div id="cesiumContainer">
    <div id="slider"></div>
  </div>
</template>
<script>
export default {
   
   
  name: "CesiumContainer",
  mounted: function () {
   
   
    let viewer = new this.$Cesium.Viewer("cesiumContainer", {
   
   
      imageryProvider: new this.$Cesium.ArcGisMapServerImageryProvider({
   
   
        url:
          "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
      }),
      baseLayerPicker: false, 
      animation: false, 
      homeButton: false,
      timeline: false,
    });
    //提供viewer对象给其他地方使用
    window.viewer = viewer;
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to