cesium创建基本的实体、点、线、多边形（vue）-Toy模板网

这篇具有很好参考价值的文章主要介绍了cesium创建基本的实体、点、线、多边形（vue）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.通过viewer实例的entities对象实现

实现代码：

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

<script>
import * as Cesium from 'cesium/Cesium'
import "cesium/Widgets/widgets.css"
export default {
  mounted() {
    this.initModel()
  },
  data() {
    return {

    }
  },
  methods: {
    initModel() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDMzMWQzYi01NDcyLTQzZDYtYmNmNy1iNDdmYzJlNTZkNTEiLCJpZCI6MTY0MzEwLCJpYXQiOjE2OTM4MTM1NDl9.l2Mocdo0ZiRjzLC9INU7p_Y6wZuiRXJ3T1eW3s0aB7c';
      let viewer = new Cesium.Viewer('container', {
        timeline: false, //时间轴控件
        animation: false,//动画控件
        geocoder: false, // 搜索控件
        homeButton: false, // 主页控件
        sceneModePicker: false,//投影方式按钮
        baseLayerPicker: false,// 图层选择按钮
        navigationHelpButton: false,//帮助助手按钮
        fullscreenButton: false, // 全屏按钮
      })
      // 创建一个点，viewer.entities.add返回一个实体对象
      let point = viewer.entities.add({
        id: 'point',
        position: Cesium.Cartesian3.fromDegrees(120, 30), // 经纬度转笛卡尔坐标
        point: {
          pixelSize: 20, //以像素为单位指定大小
          color: Cesium.Color.BLUE // 指定该点的 Color
        }
      })
      // 创建一个广告牌
      let billboard = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(114, 30, 10),
        billboard: {
          image: '/user.png', // 图片位置，/路径默认在public文件夹下面
          scale: 0.3,
          color: Cesium.Color.RED
        }
      })
      // 创建一个标签
      let label = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(118, 30, 1),
        label: {
          text: 'haha',
          color: Cesium.Color.RED
        }
      })
      // 创建一条折线
      let line = viewer.entities.add({
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray([120, 20, 121, 21, 121, 20.5]), // 多个点的经纬度组成的数组
          width: 10,
          material: Cesium.Color.BLUE
        }
      })

      // 创建一个多边形
      let polygon = viewer.entities.add({
        polygon: {
          hierarchy: {
            positions: Cesium.Cartesian3.fromDegreesArray([120, 25, 121, 25, 121, 25.5]),
          },
          material: Cesium.Color.RED,
          height: 10000,
          extrudedHeight: 20000,
          outline: true,
          outlineColor: Cesium.Color.GREEN,
          // fill: false,
        }
      })
      // 视角定位
      viewer.zoomTo(polygon)

      // viewer.zoomTo(point)
      // new Cesium.Viewer('container', {
      //   terrainProvider: Cesium.createWorldTerrain()
      // })
    }
  }
}
</script>

<style scoped>
  #container{
    width: 100vw;
    height: 100vh;
  }
</style>