Cesium模型封装-Point

呆呆的小草

已于 2024-08-29 16:18:21 修改

阅读量252

点赞数 10

分类专栏： Cesium Vue 文章标签： javascript 前端 vue.js

于 2024-08-29 11:18:25 首次发布

本文链接：https://blog.csdn.net/StupidlyGrass/article/details/141672170

版权

Vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Cesium

11 篇文章 0 订阅

订阅专栏

一、初始化地图

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

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Point } 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 Point(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 Point {
  // 构造函数
  constructor(viewer, Cesium) {
    this.viewer = viewer
    this.Cesium = Cesium
  }

  entitiesPoint(option) {
    let {
      id, // 点id***
      position, // 点坐标***
      name:"entitiesPoint", // 点名称
      pixelSize = 10, // 点大小，空心点时为必传**
      color = Cesium.Color.fromCssColorString("tomato"), // 点颜色，空心点时为必传（透明色）**
      outlineColor = Cesium.Color.fromCssColorString("#fff"), // 外边框颜色，普通点时为必传（透明色）**
      outlineWidth = 2, // 外边框宽度，普通点时为必传（-1）**
      disCond = {
        start: 0,
        end: 150000000
      } // 点显示区间
    } = option

    this.viewer.entities.add({
      id,
      name,
      position,
      point: {
        pixelSize: pixelSize,
        // 点位颜色，fromCssColorString 可以直接使用CSS颜色
        color,
        // 边框颜色
        outlineColor,
        // 边框宽度(像素)
        outlineWidth: outlineWidth,
        // 显示在距相机的距离处的属性，多少区间内是可以显示的
        distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(
          disCond.start,
          disCond.end
        ),
      },
    });
  }
}

三、使用示例

1、外框点

（1）全参数代码

const initModel = () => {
 for (let i = 0; i < pointArr.length; i++) {
    me.point.entitiesPoint({
      id: "entitiesPoint" + i, // 点id
      name: "entitiesPoint", // 点名称
      pixelSize: 10, // 点大小
      color: Cesium.Color.fromCssColorString("tomato"), // 点颜色
      outlineColor: Cesium.Color.fromCssColorString("#fff"), // 外边框颜色
      outlineWidth: 2, // 外边框宽度
      position: Cesium.Cartesian3.fromDegrees(
        pointArr[i].lon,
        pointArr[i].lat,
        pointArr[i].alt
      ), // {lon,lat,alt}
      disCond: {
        start: 0,
        end: 150000000,
      }, // 点显示区间
    });
  }
};

（2）仅必传参数代码

const initModel = () => {
 for (let i = 0; i < pointArr.length; i++) {
    me.point.entitiesPoint({
      id: "entitiesPoint" + i, // 点id
      position: Cesium.Cartesian3.fromDegrees(
        pointArr[i].lon,
        pointArr[i].lat,
        pointArr[i].alt
      ), // {lon,lat,alt}
    });
  }
};

（3）效果

2、普通点

（1）全参数代码

const initModel = () => {
 for (let i = 0; i < pointArr.length; i++) {
    me.point.entitiesPoint({
      id: "entitiesPoint" + i, // 点id
      name: "entitiesPoint", // 点名称
      pixelSize: 15, // 点大小
      color: Cesium.Color.fromCssColorString("tomato"), // 点颜色
      outlineColor: Cesium.Color(0.0, 0.0, 0.0, 0), // 外边框颜色
      outlineWidth: -1, // 外边框宽度
      position: Cesium.Cartesian3.fromDegrees(
        pointArr[i].lon,
        pointArr[i].lat,
        pointArr[i].alt
      ), // {lon,lat,alt}
      disCond: {
        start: 0,
        end: 150000000,
      }, // 点显示区间
    });
  }
};

（2）仅必传参数代码

const initModel = () => {
 for (let i = 0; i < pointArr.length; i++) {
    me.point.entitiesPoint({
      id: "entitiesPoint" + i, // 点id
      outlineColor: Cesium.Color(0.0, 0.0, 0.0, 0), // 外边框颜色
      outlineWidth: -1, // 外边框宽度
      position: Cesium.Cartesian3.fromDegrees(
        pointArr[i].lon,
        pointArr[i].lat,
        pointArr[i].alt
      ), // {lon,lat,alt}
    });
  }
};

（3）效果

3、空心点

（1）全参数代码

const initModel = () => {
 for (let i = 0; i < pointArr.length; i++) {
    me.point.entitiesPoint({
      id: "entitiesPoint" + i, // 点id
      name: "entitiesPoint", // 点名称
      pixelSize: 10, // 点大小
      color: Cesium.Color.WHITE.withAlpha(0), // 点颜色
      outlineColor: Cesium.Color.fromCssColorString("#fff"), // 外边框颜色
      outlineWidth: 2, // 外边框宽度
      position: Cesium.Cartesian3.fromDegrees(
        pointArr[i].lon,
        pointArr[i].lat,
        pointArr[i].alt
      ), // {lon,lat,alt}
      disCond: {
        start: 0,
        end: 150000000,
      }, // 点显示区间
    });
  }
};

（2）仅必传参数代码

const initModel = () => {
 for (let i = 0; i < pointArr.length; i++) {
    me.point.entitiesPoint({
      id: "entitiesPoint" + i, // 点id
      pixelSize: 10, // 点大小
      color: Cesium.Color.WHITE.withAlpha(0), // 点颜色
      outlineColor: Cesium.Color.fromCssColorString("#fff"), // 外边框颜色
      outlineWidth: 2, // 外边框宽度
      position: Cesium.Cartesian3.fromDegrees(
        pointArr[i].lon,
        pointArr[i].lat,
        pointArr[i].alt
      ), // {lon,lat,alt}
    });
  }
};