cesium配置

基本配置

在main.js中引入cesium

安装完搭建cesium的插件后main.js中默认会引入他的全局样式(不用管)

...
const cesium = require("cesium/Cesium.js");
Vue.prototype.cesium = cesium
...

此时我们就可以在任意组件this出cesium的实例了

配置token

在官网中注册一个token官网 (opens new window)

然后在我们的components/CesiumExample/No01-init中配置我们token（这个组件就是安装vue add vue-cli-plugin-cesium自己创建出来的）

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>
export default {
  ...
  mounted () {
    this.init()
  },
  // Vue方法定义
  methods: {
    // 地图初始化
    init() {
       const Cesium = this.cesium
       Cesium.Ion.defaultAccessToken = 'your token'
       this.viewer = new Cesium.Viewer('cesiumContainer')
    }
  }
}
</script>

Cesium地图展示简单配置

可参考API (opens new window)进行个性化配置

  this.viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
    geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
    navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
    homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
    sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
    animation: false, // 如果设置为false，将不会创建左下角动画小部件。
    timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件。
    fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
    scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
    shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
    // ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
    infoBox: false, // 是否显示点击要素之后显示的信息
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
    fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
    selectionIndicator: false, // Cesium 关闭点击绿色框
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      //高德镜像地形地图
      url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    }),
  })
  this.viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏版权
  // 再加上高德影像注记地图
  this.viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
    })
  )

初始位置

  // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
  const boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(120.55538, 31.87532,100),15000)//地图坐标信息等....   球有多大

  // 定位到初始位置
  this.viewer.camera.flyToBoundingSphere(boundingSphere, {
    // 定位到初始位置的过渡时间，设置成0，就没有过渡，类似一个过场的动画时长
    duration: 1,
  })