0.主要功能

地球显示、图层遮罩、文字标注、点位添加

1.vue引入cesium

 npm install cesium

去cesium注册账号和token
注册账号：
https://cesium.com/ion/signup/
注册token：
https://cesium.com/ion/tokens

安装拷贝插件，因为vue3.0版本太高所以需要降低部分插件版本
npm uninstall less-loader
npm install less-loader@6.0.0
npm uninstall copy-webpack-plugin
npm install copy-webpack-plugin@6.0.3
npm uninstall style-loader
npm install style-loader@1.0.0

2.安装环境

cesium集成进入vue修改配置
vue.config.js
主要是按照cesium要求将工具包导出到dist指定的目录

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  runtimeCompiler: true,
  configureWebpack: {
    plugins: [
      // Copy Cesium Assets, Widgets, and Workers to a static directory
      new CopyWebpackPlugin({
        patterns: [
          { from: 'node_modules/cesium/Build/Cesium/Workers', to: 'cesium/Workers' },
          { from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'cesium/ThirdParty' },
          { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'cesium/Assets' },
          { from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'cesium/Widgets' }
        ],
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ]
  }
}

3.组件例子

因为使用了天地图，所以还需要在天地图中创建一个key
注册界面：https://sso.tianditu.gov.cn/login?service=https%3A%2F%2Fconsole.tianditu.gov.cn%2F

注册帐号之后创建一个应用

<template>
  <div style="height:100%">
    <div id="cesiumContainer"
         style="height:100%"></div>
  </div>
</template>

<script>
import * as Cesium from 'cesium'
import { point } from './beijingMap'

export default {
  name: 'cesium',
  data () {
    return {
      viewer: null,
      tToken: 'yourtoken',
      tUrl: 'https://t{s}.tianditu.gov.cn/',
      tSubdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      cesiumToken: 'yourtoken'
    }
  },
  mounted () {
    // 1.初始化3D地球
    this.initCesium()
    // 2.飞行到北京，并添加坐标点
    this.cesiumFlyTo(117.3, 39.9, 800000, this.addPoint)
    // 3.添加地图影像
    this.addImageryLayers()
    // 4.添加国界线
    this.addCountryLine()
    // 5.添加遮罩层
    this.addMask()
  },
  methods: {
    initCesium () {
      Cesium.Ion.defaultAccessToken = this.cesiumToken
      // 加载google卫星影像
      const viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false, // 隐藏右上角影像拾取
        animation: false, // 隐藏左下角的动画仪表盘
        fullscreenButton: false, // 隐藏全屏按钮
        homeButton: false, // 隐藏home按钮
        geocoder: false, // 隐藏右上角搜索
        sceneModePicker: false, // 隐藏2d3d切换按钮
        timeline: false, // 隐藏时间轴
        navigationHelpButton: false, // 隐藏导航帮助按钮
        terrainProvider: Cesium.createWorldTerrain()
      })
      // 添加3D建筑
      viewer.scene.primitives.add(Cesium.createOsmBuildings())
      this.viewer = viewer
    },
    cesiumFlyTo (x, y, height, complete) {
      // 飞行到哪个位置
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(x, y, height),
        duration: 8, // 多少秒完成跳转
        complete: complete // 完成后的执行函数
      })
    },
    addImageryLayers () {
      // 加载天地图影像
      const imgMap = new Cesium.UrlTemplateImageryProvider({
        url: this.tUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + this.tToken,
        subdomains: this.tSubdomains,
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 18
      })
      this.viewer.imageryLayers.addImageryProvider(imgMap)
    },
    addCountryLine () {
      // 叠加国界服务
      var iboMap = new Cesium.UrlTemplateImageryProvider({
        url: this.tUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + this.tToken,
        subdomains: this.tSubdomains,
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 10
      })
      this.viewer.imageryLayers.addImageryProvider(iboMap)
    },
    addPoint () {
      // 添加坐标点
      this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.20, 39.56),
        point: {
          pixelSize: 30,
          color: Cesium.Color.RED
        }
      })
      // 添加文字
      this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.328327, 39.945162),
        label: {
          text: '北京',
          font: '24px Helvetica',
          fillColor: Cesium.Color.SKYBLUE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE
        }
      })
    },
    addMask () {
      // 添加遮罩层,遮罩层是按照顺序叠加起来的会被覆盖，如果透明则会变色
      const entities = this.viewer.entities
      var stripeMaterial = new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.YELLOW.withAlpha(0.5),
        oddColor: Cesium.Color.YELLOW.withAlpha(0.5),
        repeat: 5.0
      })
      entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray(point.c100010)
          ),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          material: stripeMaterial
        }
      })
      stripeMaterial = new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.BLUE.withAlpha(0.5),
        oddColor: Cesium.Color.BLUE.withAlpha(0.5),
        repeat: 5.0
      })
      entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray(point.c100000)
          ),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          material: stripeMaterial
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
@import "../../../node_modules/cesium/Build/Cesium/Widgets/widgets.css";
/deep/ .cesium-widget-credits {
  visibility: hidden;
}
/deep/ .cesium-infoBox-visible {
  visibility: hidden;
}
</style>

4.界面

放大后：

参考文献

官网：https://cesium.com/platform/cesiumjs/
api文档：https://cesium.com/learn/cesiumjs/ref-doc/
天地图：http://lbs.tianditu.gov.cn/docs/#/sanwei/

github地址

https://github.com/1142235090/hanzhao-project