Keep-globe NPM

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/cesium@1.73.0/Build/Cesium/Widgets/widgets.css">
  ...
</head>

<body>
  ...
  <script src="https://unpkg.com/cesium@1.73.0/Build/Cesium/Cesium.js"></script>
  ...
</body>

</html>