Vue-cli3 + Cesium1.7 开发环境配置(一)
环境配置
·
**
请看最新的这篇
**
1. Vue3创建项目
vue create tdmap
2. npm引入Cesium包
cnpm install cesium --save
3. 新增配置文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
//定义cesium源码路径
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
publicPath: '',
devServer: {
port: 8090 //修改服务端口号
},
outputDir: 'docs', //设置 build 输出目录
configureWebpack: {
output: {
sourcePrefix: ' ' //让webpack正确处理多行字符串
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
//在resolve中设置cesium别名,
//这样在引入的时候就可以根据别名找到Cesium的包
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [
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 CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
new webpack.DefinePlugin({
//定义 Cesium 从哪里加载资源,如果使用默认的'',
//却变成了绝对路径了,所以这里使用'./',使用相对路径
CESIUM_BASE_URL: JSON.stringify('./')
})
],
module: {
unknownContextCritical: /^.\/.*$/,
unknownContextCritical: false
}
}
}
4. 修改main.js
var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets
或者在组件中引入
import * as Cesium from "@/../node_modules/cesium/Source/Cesium.js"
//也可以用按需引入的方式,具体路径需要自己调整
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
5. 注意
但配置完后使用 import Cesium from ‘cesium/Cesium’ 导入模块时总会报错:"export ‘default’ (imported as ‘Cesium’) was not found in ‘cesium/Cesium’,因为Cesium 1.63 版本之前是用的AMD的方式进行编译的,而在1.63版时使用ES6进行了重构。
https://segmentfault.com/a/1190000022714154
新版本不支持整体import,可以按需引入。https://blog.csdn.net/weizhixiang/article/details/104473856
6. 测试
新建地图组件Map.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script>
export default {
name: 'Map',
data () {
return {}
},
mounted(){
var Cesium = this.Cesium;
var cesiumContainer = document.getElementById("cesiumContainer");
var viewer = new Cesium.Viewer("cesiumContainer",{
imageryProvider: new 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&format=tiles&tk=ebf64362215c081f8317203220f133eb",
layer: "tdtBasicLayer",
style: "default",
format: "tiles",
tileMatrixSetID: "GoogleMapsCompatible",
show: true,
maximumLevel: 18
})
});
}
</script>
<style scoped>
#cesiumContainer{
width: 100%;
height: 60%;
}
</style>
7. 结果
8. 问题
截完图发现右上角图标缺了一个
更多推荐
已为社区贡献4条内容
所有评论(0)