Vue2整合Cesium
前提
-
基本了解命令行,Javascript和vue Web开发。
-
支持WebGL的浏览器
-
IDE或代码编辑器。如: Visual Studio Code
-
node 6.9.0或更高版本,以及NPM 3或更高版本
创建Vue项目
vue create vue-cesium
# 注意这里是选择的vue2 进行操作
在vue中配置添加Cesium
-
安装cesium
yarn add cesium
-
添加babel动态导入插件
yarn add babel-plugin-dynamic-import-node --dev
-
配置vue.config.js 修改配置cesium 1 – 4
"use strict"; const path = require("path"); const webpack = require("webpack"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const cesiumSource = "node_modules/cesium/Source"; const cesiumWorkers = "../Build/Cesium/Workers"; function resolve(dir) { return path.join(__dirname, dir); } const name = "vue-cesium-demo"; // page title // All configuration item explanations can be find in https://cli.vuejs.org/config/ module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, * then publicPath should be set to "/bar/". * In most cases please use '/' !!! * Detail: https://cli.vuejs.org/config/#publicpath */ configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { "@": resolve("src"), // cesium 1 cesium: path.resolve(__dirname, cesiumSource) } }, amd: { // cesium 2 toUrlUndefined: true }, module: { // cesium 3 不加这个配置会报require引入警告 unknownContextCritical: false }, plugins: [ // cesium 4 new webpack.DefinePlugin({ // Define relative base path in cesium for loading assets CESIUM_BASE_URL: JSON.stringify("") }), // 对build生效,拷贝到dist目录下。如:dist/Assets 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"), to: "ThirdParty" } ]), // new webpack.ProvidePlugin({ // Cesium: ['cesium/Cesium'] // Cesium对象实例可在每个js中使用而无须import // }) ] } };
-
在main.js中导入 cesium样式
import Vue from 'vue' import App from './App.vue' import 'cesium/Widgets/widgets.css' //样式 let Cesium = require('cesium/Cesium') // Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/'); Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YTY1NDYzYS01YzgxLT' + 'Q2MGUtODBiYy0zODRmY2MwOGY4MDIiLCJpZCI6MjA1LCJpYXQiOjE1MDQ3MjQ1Njh9.rKgXUKAfFiiSAm_b9T8bpsDVdj0YyZeqGxNpzLlhxpk'; new Vue({ render: h => h(App), }).$mount('#app')
-
修改 app.vue
<template> <HelloWorld/> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 0; } </style>
-
修改helloWorld.vue
<template> <div ref='mapcontainer' class="map"> </div> </template> <script> import {Viewer,UrlTemplateImageryProvider ,Cartesian3} from '@/../node_modules/cesium/Source/Cesium.js'; export default { name: 'HelloWorld', mounted(){ const viewer = new Viewer(this.$refs.mapcontainer, { // infoBox: false, // selectionIndicator: false, shadows: false, shouldAnimate: true, imageryProvider: new UrlTemplateImageryProvider({ url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8' // url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}' }), // terrainProvider: this.terrainProvider, maximumRenderTimeChange: 1, infoBox: false, baseLayerPicker: 1, scene3DOnly: true, sceneModePicker: false, selectionIndicator: false }) viewer.scene.globe.enableLighting = true viewer.scene.skyAtmosphere.show = false viewer.geocoder.container.style.display = 'none' viewer.cesiumWidget.creditContainer.style.display = 'none' viewer.homeButton.container.style.display = 'none' viewer.clock.onTick.addEventListener(function() { if (viewer.camera.pitch > -0.5) { viewer.scene.screenSpaceCameraController.enableTilt = false } }) viewer.camera.flyTo({ destination: new Cartesian3( -2284843.6893539904, 5030084.459916646, 3197419.22233534 ), orientation: { heading: 5.9824121245820825, pitch: -0.65321351463230544, roll: 6.282263350033762 } }) } } </script> <style lang="css"> .map{ width: 100% ; height: 100% ; margin: 0 ; padding: 0 ; overflow: hidden; } </style>
-
启动查看
yarn serve
访问 本地 localhost:8080