vue +cesium 加载天地图

最新推荐文章于 2025-06-06 15:11:25 发布

原创最新推荐文章于 2025-06-06 15:11:25 发布 · 2.8k 阅读

8 ·

CC 4.0 BY-SA版权

cesium 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在项目中集成Cesium WebGL地图，包括配置npm、Webpack，以及在Vue组件中初始化Cesium Viewer。通过具体代码示例，展示了如何加载天地图瓦片服务，设置地图属性，以及隐藏版权信息。

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

npm install cesium --save

webpack.base.conf.js文件

const cesiumSource = '../node_modules/cesium/Source'

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath,
    // cesium
    sourcePrefix: ' '
  },
 // cesium
  amd: {
    toUrlUndefined: true
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // cesium
      'cesium': path.resolve(__dirname, cesiumSource)
    },
  },

unknownContextCritical: false,

webpack.dev.conf.js 文件

// cesium
//定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有 …/ ），
const cesiumSource = 'node_modules/cesium/Source'
//定义 Cesium Workers 路径：
const cesiumWorkers = '../Build/Cesium/Workers';

plugins: [
    //cesium
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, cesiumWorkers),
      to: 'Workers'
    }]),
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'),
      to: 'Assets'
    }]),
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'),
      to: 'Widgets'
    }]),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('')
    })
  ]

webpack.prod.conf.js 文件

// cesium
//定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有…/）
const cesiumSource = '../node_modules/cesium/Source'
//定义 Cesium Workers 路径
const cesiumWorkers = '../Build/Cesium/Workers'


plugins: [
    // cesium
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, cesiumWorkers),
      to: 'Workers'
    }]),
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'),
      to: 'Assets'
    }]),
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'),
      to: 'Widgets'
    }]),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('. /')
    })
  ]

config/index.js文件

cesiumViewer.vue

<template>
  <div id="cesiumViewer" style="height:100%;width:100%;position:relative;"></div>
</template>
<script>
export default {
  name: "Map",
  components: {},
  data() {
    return {};
  },
  methods: {
    initcesiumViewer() {
      // var earth = new Cesium.UrlTemplateImageryProvider({
      //   url: "images/taile_blue/{z}/{x}/{y}.jpg",
      //   fileExtension: "jpg"
      // });
      this.Cesium.Ion.defaultAccessToken =
        "官网注册token";
      var CesiumViewer = new this.Cesium.Viewer("cesiumViewer", {
        // imageryProvider: earth, //地图数据
        animation: false, //是否显示动画控件，左下角仪表
        baseLayerPicker: false, //是否显示图层选择控件,是否显示geocoder小器件，右上角查询按钮
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件,//是否显示3D/2D选择器
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        fullscreenButton: true, //是否显示全屏按钮
        selectionIndicator: false, //是否显示选中指示框
        // imageryProviderViewModels: [img_arcgis_yxdt, img_arcgis_jcdt, img_tdt_sl, img_tdt_yx],//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        // selectedImageryProviderViewModel: img_arcgis_jcdt,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义
        // scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        // homeButton: false, //是否显示Home按钮
        // showRenderLoopErrors: false //如果设为true，将在一个HTML面板中显示错误信息
      });
      //矢量底图
      CesiumViewer.imageryLayers.addImageryProvider(
        new this.Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=d6a72a78a43a2c17294b72ab26354cd6",
          layer: "tdtImgBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: false
          // maximumLevel: 18
        })
      );
      //中文地名注记
      CesiumViewer.imageryLayers.addImageryProvider(
        new this.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=d6a72a78a43a2c17294b72ab26354cd6",
          layer: "tdtAnnoLayer",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: true
        })
      );
      //去除版权信息
      CesiumViewer._cesiumWidget._creditContainer.style.display = "none";
    }
  },
  mounted() {
    this.initcesiumViewer();
  }
};
</script>
<style scoped>
#cesiumViewer {
  height: 100%;
  width: 100%;
}
</style>