Cesium模型封装-Line

一、初始化地图

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

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Line } from "../../utils/Model";

// ---------------------------<<数据>>---------------------------
const me = reactive({
  point: null,
});

// 点位数组
const pointArr = reactive([
  {
    lon: 110.645025,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.645025,
    lat: 22.16643590658971,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.7480626299661,
    lat: 22.261761037919744,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.8937798546077,
    lat: 22.261761037919744,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.99674745330135,
    lat: 22.16643590658971,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.99674745330135,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.8937798546077,
    lat: 21.936190428417305,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.7483984431316,
    lat: 21.936190428417305,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.645025,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
]);

// ---------------------------<<函数>>---------------------------
// 初始化地图
const initMap = () => {
  // 在线地图token
  Cesium.Ion.defaultAccessToken = "map_token";

  // 在线地图
  let imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: "map_url",
  });

  window.viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, // 右上角 搜索
    homeButton: false, // 右上角 Home
    sceneModePicker: false, // 右上角 2D/3D切换
    baseLayerPicker: false, // 右上角 地形
    navigationHelpButton: false, // 右上角 Help
    animation: false, // 左下角 圆盘动画控件
    timeline: false, // 时间轴
    fullscreenButton: false, // 右下角 全屏控件
    vrButton: false, // 如果设置为true，将创建VRButton小部件。
    scene3DOnly: false, // 每个几何实例仅以3D渲染以节省GPU内存
    infoBox: false, // 隐藏点击要素后的提示信息
    imageryProvider: imageryProvider, // 地图地址
    shouldAnimate: true,
  });
  viewer._cesiumWidget._creditContainer.style.display = "none";

  viewer.scene.globe.enableLighting = false;
  viewer.shadows = false;

  viewer.scene.globe.enableLighting = false;
  Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.2; // 摄像机到地图的距离放大倍数
  viewer.camera.flyHome(0);

  // // 调整画面精细度
  viewer.resolutionScale = 1; //默认值为1.0
  viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
  viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
  // //是否开启抗锯齿
  viewer.scene.fxaa = false;
  viewer.scene.postProcessStages.fxaa.enabled = false;
  viewer.scene.globe.showGroundAtmosphere = true;

  // 设置相机位置
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      110.82474250408677,
      22.095133670052277,
      80000
    ),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });

  //取消双击事件
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );
};

// 初始化模型
const initModel = () => {
     // 请查看 “步骤三、步骤四” 使用示例
};
// 初始化模型类
const initModelClass = () => {
  me.point = new Line(viewer, Cesium);
};

// ---------------------------<<执行>>---------------------------
// 挂载后生命周期
onMounted(() => {
  initMap();
  initModelClass();
  initModel();
});
</script>

<style lang="less" scoped>
.cesium_map {
  width: 100%;
  height: 100%;

  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>

二、封装文件

        标记有***注释的参数为必传参数；

        其他为可选参数；

export class Line {
  // 构造函数
  constructor(viewer, Cesium) {
    this.viewer = viewer
    this.Cesium = Cesium
  }

  // 坐标转换
  // Cesium.Cartesian3.fromDegreesArrayHeights：[经,纬,高,经,纬,高,...]
  // Cesium.Cartesian3.fromDegreesArray:[经,纬,经,纬,...]
  // Cesium.Cartesian3.fromDegrees:[经,纬]

  // entitiesLine
  entitiesLine(option) {
    let {
      id, // 线id***
      positions, // 线坐标***
      material, // 线材质***
      name = 'entitiesLine',
      width = 2, // 线宽度
      clampToGround = true, // 是否贴地
      zIndex = 999, // 线渲染层级
      ddc = { // 显示区间
        start: 0,
        end: 150000000
      },
      show = true, // 是否显示
    } = option

    this.viewer.entities.add({
      id, // 线条id
      name, // 线条名称
      polyline: {
        positions, // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
        width, // 宽度
        material, // 线的颜色
        clampToGround, // 是否贴地
        zIndex,  // 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        vertexFo