记vue中引入cesium

本文档介绍了在Vue项目中引入Cesium的详细步骤,包括使用vue-cli初始化项目,安装Cesium库,修改webpack配置以正确加载Cesium资源,以及在Vue组件中引入和使用Cesium。
摘要由CSDN通过智能技术生成

因为个人原因,已经很久很久没有写过博客了,但是学过的东西终归还是要记录滴,以下是在vue中引入cesium,具体步骤如下

一、首先安装vue-cli,因为之前接触vue的时候都是自己手动配置webpack,感觉每一步都知道所以然,但是现在直接使用vue-cli后确实是方便了很多,但是里面好多的配置都是不知所以然,就按照官方的配置进行了配置,运行结果出来了,也没有问题,

需要使用到node环境,这里就不多说了,没有就安装一个吧!

1、安装vue-cli,执行命令npm install -g vue-cli,这里是全局安装,如果没有-g安装完成之后执行是有问题的。

2、初始化项目,这个可以自定义,使用vue init webpack cesium-demo,其中webpack是模板名称,cesium-demo是初始化的项目名称,之后会出现一连串的确认,例如作者,版本等等,一路回车,等所有结束之后会在当前文件夹下出现一个package.json文件。

二、安装cesium

1、进入cesium-demo文件夹,命令为cd cesium-demo

2、执行npm install cesium,等待安装完成

3、执行npm run dev,如果出现vue的界面,则证明上述过程无误,继续向下

三、修改webpack配置

1、在build文件夹下的webpack.base.conf.js中设置cesium源码的路径

增加一行  const cesiumSource='../node_modules/cesium/Source',之后再resolve中增加一行cesium的路径

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Vue项目引入Cesium实现地图功能,需要以下步骤: 1. 安装cesium 使用npm安装cesium: ```bash npm install cesium ``` 2. 引入cesiumVue组件引入cesium: ```javascript import Cesium from 'cesium/Cesium'; import 'cesium/Widgets/widgets.css'; ``` 3. 创建Cesium Viewer 在Vue组件创建Cesium Viewer: ```javascript mounted() { this.viewer = new Cesium.Viewer(this.$refs.map, { animation: false, timeline: false, fullscreenButton: false }); } ``` 其,`this.$refs.map`是一个DOM节点,用于容纳Cesium Viewer。 4. 添加地球影像图层 添加Cesium的默认地球影像图层: ```javascript this.viewer.imageryLayers.addImageryProvider(new Cesium.createWorldImagery()); ``` 5. 添加其他图层 可以添加其他图层,如GeoJSON数据: ```javascript const dataSource = new Cesium.GeoJsonDataSource(); dataSource.load('./path/to/data.geojson').then(() => { this.viewer.dataSources.add(dataSource); }); ``` 6. 销毁Cesium Viewer 在Vue组件销毁前,需要销毁Cesium Viewer: ```javascript beforeDestroy() { if (this.viewer) { this.viewer.destroy(); } } ``` 完整实现: ```vue <template> <div ref="map"></div> </template> <script> import Cesium from 'cesium/Cesium'; import 'cesium/Widgets/widgets.css'; export default { name: 'CesiumMap', data() { return { viewer: null }; }, mounted() { this.viewer = new Cesium.Viewer(this.$refs.map, { animation: false, timeline: false, fullscreenButton: false }); this.viewer.imageryLayers.addImageryProvider(new Cesium.createWorldImagery()); const dataSource = new Cesium.GeoJsonDataSource(); dataSource.load('./path/to/data.geojson').then(() => { this.viewer.dataSources.add(dataSource); }); }, beforeDestroy() { if (this.viewer) { this.viewer.destroy(); } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值