vue cli cesium环境搭建

cesium简介

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

1. 引入cesium包

npm install cesium --save

安装完成会在node_modules中生成cesium资源

2.将cesium复制一份到public静态资源中

cesium为开源代码，所以我们只需引入cesium文件下Build压缩好的就可以。直接从node_modules中复制即可。

3.全局引入cesium

第一种 引入cdn引入 在public/index.html中

// css
<link rel="stylesheet" href="cesium/Build/Cesium/Widgets/widgets.css">
// js
<script src="cesium/Build/Cesium/Cesium.js"></script>

第二种 引入 在main.js中

import Cesium from 'cesium/Cesium'
import widget from 'cesium/Widgets/widgets.css'

4.编写页面

html 部分

<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>

js部分
token注册地址 https://cesium.com/ion/signin/tokens

Cesium.Ion.defaultAccessToken = 你的token // 注册地址https://cesium.com/ion/signin/tokens
// new Cesium.Viewer(id, options)
      var viewer = new Cesium.Viewer('cesiumContainer');

到这里页面中会出现地球

5.cesium相关配置

官方文档viewer相关配置

var viewer = new Cesium.Viewer('cesiumContainer',{
        animation: false, // 控制场景动画的播放速度控件
        baseLayerPicker: true, // 底图切换控件
        baselLayerPicker:false,// 将图层选择的控件关掉，才能添加其他影像数据
        fullscreenButton: false, // 全屏控件
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        infoBox: false, //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
        sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
        navigationHelpButton: false, // 默认的相机控制提示控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        navigationInstructionsInitiallyVisible: false,
        showRenderLoopErrors: false, //是否显示渲染错误
        orderIndependentTranslucency:false,//设置背景透明
        //加载地形
        terrainProvider : Cesium.createWorldTerrain({
                requestWaterMask : true,
                requestVertexNormals : true
        }),
        //加载谷歌卫星影像
        // imageryProvider: guge,
        // 设置底图加载高德镜像地图
        // imageryProvider: new Cesium.UrlTemplateImageryProvider({
        //     url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        //     style: 'default',
        //     format: 'image/png'
        // })
        
      });
		// 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = "none";

6.我的配置

package.json

"dependencies": {
    "cesium": "^1.79.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }