keep-globe
v0.7.2
Published
基于cesium 三维vue组件封装
Downloads
48
Readme
keep-globe
基于cesium 三维vue组件封装
安装
npm install keep-globe --save
npm install echarts @turf/turf cesium --save
npm install leaflet --save配置
因为模型文件较大，未打包到代码 如需使用漫游功能需要进行如下配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require("path");
module.exports = {
productionSourceMap: false,
configureWebpack: config => {
// 拷贝模型文件到项目目录
config.plugins.push(new CopyWebpackPlugin([{ from: path.join('./node_modules/keep-globe/dist', 'models'), to: 'models' }]))
}
};使用
组件库中不包括Cesium，需单独安装
import Cesium from 'cesium';
import keepGlobe from 'keep-globe';
import 'keep-globe/dist/keep-globe.css';
Vue.use(keepGlobe);示例
<template>
<div style="width: 100%; height: 600px;">
<gui-globe ref="globe"></gui-globe>
<div>
<button @click="flyTo">飞行至</button>
<button @click="setView">设置视角</button>
</div>
</div>
</template>
<script>
export default {
mounted () {
const options = {
viewer: {
basemap: { type: 'TDTIMAGE' },
initView: {
destination: [114.312079, 30.358405, 50000],
orientation: {
heading: 0,
pitch: -60,
roll: 0.0
}
}
},
controls: {
mapMeasure: {
show: true
},
dimensionSwitch: {
show: true
}
}
}
this.$refs.globe.init(options)
},
methods: {
flyTo(){
const options = {
destination: [113.312079, 30.358405, 50000],
orientation: {
heading: 0,
pitch: -90,
roll: 0.0
}
}
this.$refs.globe.cameraFlyTo(options)
},
setView(){
const options = {
destination: [113.312079, 33.358405, 1000000],
orientation: {
heading: 0,
pitch: -45,
roll: 0.0
}
}
this.$refs.globe.setCameraView(options)
}
}
}
</script>
附Cesium 引入方法
1.npm 引入 （有资源文件以及三方worker ）
安装
npm install cesium --save配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin(
[
{ from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' },
{ from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' },
{ from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' },
{ from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }
]
)
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('')
})
]
}
}
引入
import * as Cesium from 'cesium'2.CDN 引入
<!DOCTYPE html>
<head>
...
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/Build/Cesium/Widgets/widgets.css">
...
</head>
<body>
...
<script src="https://unpkg.com/[email protected]/Build/Cesium/Cesium.js"></script>
...
</body>
</html>