vue 使用cesium简单介绍

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。相关网址如下：

Cesium 官网：Cesium: The Platform for 3D Geospatial
Cesium 官网 API：Index - Cesium Documentation
Cesium 中文API： Cesium中文api文档 | Index - Cesium Documentation
Cesium 官方案例：Cesium Sandcastle
Cesium 技能树：Cesium 简介 - Cesium 中文文档 - 开发文档 - 文江博客
Cesium 中文社区：cesium中文网 | 学习cesiumjs 的好地方--伐罗密
3D 模型下载网站：Log in to your Sketchfab account - Sketchfab

采用Vue如何使用cesium 加载地球呢？步骤如下：

1）安装cesium

npm i cesium --save

2) 加载cesium

从node_modules 依赖包里面，找到我们刚刚安装的 cesium ，在文件夹里面有一个 Build 文件夹，里面有一个 Cesium 文件夹，把这个 Cesium 文件夹复制一份，放到vue工程的public目录下。

在public/index.html文件中，加载样式文件，以及cesium.js文件，如下所示：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
    <style>
      *{
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <script type="text/javascript" src="./Cesium/Cesium.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4）创建地图实例

<template>
  <div id="app">
    <div id="mapId"></div>
  </div>
</template>

<script>


export default {
  name: 'App',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      
      this.viewer = new Cesium.Viewer('mapId', {
        homeButton: true,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });

      
    }
  }
}
</script>

<style></style>

这时重新编译vue项目会报错，Cesium is not defined Cesium全局变量找不到，这时只需在package.json的eslintConfig字段加上如下代码即可：

    "globals": {
      "Cesium": true
    },

重新编译项目就能看到地球了。

4）加入cesium ion token

使用cesium需要申请一个token值，这个地方就和百度地图或者是高德地图一样，需要一个 token 秘钥来进行操作，确保在使用 cesium 的过程中不会出现 token 过期造成地图加载不出来的问题

去这个网址：Cesium ion 申请个token就可以了。在创建cesium实例之前把token加上：

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpX'
      this.viewer = new Cesium.Viewer('mapId', {
        homeButton: true,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });

5）调整视角到中国南海

项目启动后相机会有一个默认视角俯瞰地球，我们调整一下视角，让相机俯瞰南海，完整代码如下所示：

<template>
  <div id="app">
    <div id="mapId"></div>
  </div>
</template>

<script>


export default {
  name: 'App',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYTNiMDIxZS02NjMyLTQ0MTgtYTY0NS1kYzMwYjZkZDllZTIiLCJpZCI6MTIyNjgwLCJpYXQiOjE2NzUwNDU3NjR9.YAIh-_IFBWrprAoLkJHZGh8oLjJHDemH62_enMlVu1E'
      this.viewer = new Cesium.Viewer('mapId', {
        homeButton: true,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });
      
      setTimeout(() => {
        console.log("go to china")
        this.viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(113, 16, 2500000),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-90),
            roll: 0
          }
        })
      }, 500);
    }
  }
}
</script>

<style></style>

vue 使用cesium简单介绍

猜你喜欢