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>