Cesium模型封装-Point

news2024/12/25 12:59:26

一、初始化地图

<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}
    });
  }
};

(3)效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2085604.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于yolov8的安全帽反光衣护目镜检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的安全帽、反光衣及护目镜检测系统是一款集成了前沿深度学习与计算机视觉技术的智能监控系统。该系统利用YOLOv8这一尖端的目标检测模型&#xff0c;结合云计算与自动化图像处理技术&#xff0c;实现对工地、化工厂、煤矿等高风险作业区域工作人员安全…

Java—方法引用

目录 初识方法引用 方法引用的分类 引用静态方法 引用成员方法 引用构造方法 其它调用方式 类名引用成员方法 引用数组的构造方法 总结 初识方法引用 方法引用就是拿现有的方法来当做函数式接口中抽象方法的方法体。 方法引用注意事项 1. 引用处必须是函数式接口&a…

初识JAVA(上)

&#x1f381;&#x1f381;创作不易&#xff0c;关注作者不迷路&#x1f380;&#x1f380; 初识JAVA 前言一、初识JAVA1.1.Java是什么1.2.Java语言的重要性1.3 Java语言发展简史1.4 Java语言特性 二、初识Java的main方法1 main方法示例 三、注释基本规则 四、数据类型1.常量2…

入门Java第一步—>IDEA的下载与安装与JDK的环境配置(day01)

1.JDK的下载与安装 jdk的安装链接分为不同操作系统如下,点击链接跳转下载页面&#xff1a; windows操作系统JDK下载链接(按住键盘ctrl键单击链接即可)&#xff1a; 链接7天有效&#xff0c;有需要的评论区找我哈 通过网盘分享的文件&#xff1a;jdk-8u271-windows-x64.exe 链…

建筑企业数字信息化转型的建议

在现代建筑企业的管理中&#xff0c;信息化转型已成为提升效率和竞争力的关键。然而&#xff0c;在选择信息化系统时&#xff0c;企业需要慎重考虑&#xff0c;以确保系统真正适合企业的现状和未来发展。 &#x1f50d; 要选合适的&#xff0c;而非“成熟”的 信息化系统的核心…

解决 启动模拟器出现 未开启Hyper-V 的问题

~~ 解决 启动模拟器出现 未开启Hyper-V 的问题 ~~ 如果在启动模拟器时出现 未开启Hyper-V 的问题 解决方案&#xff1a; 1.打开控制面板–>点击 程序和功能 2.点击左侧&#xff1a;启用或关闭Windows功能 3.找到虚拟机平台–> 打对勾√ -->确定 &#xff08;注意…

harbor私有仓库管理(twenty-nine day)

一、harbor私有仓库管理 是python的包管理工具&#xff0c;和yum对redhat的关系是一样的 yum -y install epel-release yum -y install python2-pip pip install --upgrade pip pip list pip 8x pip install --upgrade pip pip install --upgrade pip20.3 -i https://mirror…

ElasticSearch学习笔记(四)分页、高亮、RestClient查询文档

文章目录 前言7 搜索结果处理7.2 分页7.2.1 基本使用7.2.2 深度分页7.2.3 小结 7.3 高亮7.3.1 高亮原理7.3.2 实现高亮 8 RestClient查询文档8.1 match_all查询8.2 match查询与multi_match查询8.3 精确查询8.4 布尔查询8.5 排序、分页、高亮 9 项目实战9.1 酒店搜索和分页9.2 酒…

Linux 软件包管理器yum 自动化构建工具-make/makefile

Linux 工具 linux 软件包管理器 yum 把一些常用的软件提前编译好&#xff0c;做成软件包放在一个服务器上&#xff0c;通过包管理器可以很方便的获取到在这个编译好的软件包。直接进行安装。 软件包和软件包管理器就相当于 App 和应用商店这样的关系。 Linux 安装软件 源代码…

【QT】学习笔记:导出资源中静态文件

在 Qt C 中&#xff0c;可以通过将文件添加到资源文件中&#xff0c;并在程序运行时将其导出到磁盘上的指定目录。以下是具体的步骤和代码示例&#xff1a; 1. 将文件添加到资源文件中 首先&#xff0c;需要将文件添加到 Qt 的资源系统中。假设你已经创建了一个资源文件&…

力扣经典题目之->对称二叉树(镜像二叉树)

一&#xff1a;题目 本题只需在此题上稍作修改即可&#xff1a;力扣经典题目之-&#xff1e;相同的树&#xff08;递归判断两颗二叉树是否相同&#xff09;-CSDN博客 二&#xff1a;代码 解释&#xff1a; 1&#xff1a;对称二叉树本质就是左右子树的对比&#xff0c;但不是…

Golang使用Quic-Go开源库实现Quic客户端和服务端

Quic-Go介绍 Quic-Go是Go语言Quic协议&#xff08;RFC 9000、RFC 9001、RFC 9002&#xff09;的实现。它支持HTTP/3&#xff08;RFC 9114&#xff09;&#xff0c;包括QPACK&#xff08;RFC 9204&#xff09;和HTTP数据报&#xff08;RFC 9297&#xff09;。 Github地址 htt…

谷歌发布 3 款 Gemini 新模型;字节开源 FLUX Dev Hyper SD Lora,8 步生图丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

源代码防泄露迎来信创时代:信创沙箱

在当今数字化时代&#xff0c;信息安全已成为企业生存与发展的基石&#xff0c;尤其是在信息技术应用创新&#xff08;信创&#xff09;环境下&#xff0c;数据保护更是被提升至前所未有的高度。SDC沙盒防泄密系统以其独特的技术架构和卓越的安全性能&#xff0c;在信创环境中构…

文心快码,码随心动,效率快人一步!

&#x1f381;&#x1f449;点击进入文心快码 Baidu Comate 官网&#xff0c;体验智能编码之旅&#xff0c;还有超多福利&#xff01;&#x1f381; 想象一下&#xff0c;你正在为一段复杂的代码逻辑而苦恼&#xff0c;文心快码却能轻松帮你续写代码&#xff0c;解决你的烦恼。…

addroutes和next()导致的页面无法跳转问题,如登录之后无法跳转到首页,无法重定向,使用next(to)

版本 vue router 3 问题说明 登录成功后&#xff0c;想重定向到/index&#xff0c;执行router.push之后进入beforeEach&#xff1b; 由于第一次访问&#xff0c;判断用户信息为空&#xff0c;需要异步拉取用户的权限等信息&#xff0c; 获得响应后&#xff0c;使用addRoutes批…

【C#】汉诺塔C#代码实现(递归)

1. 思路 假设总共需要移动n个盘子&#xff1a; 将A柱上的n-1个盘子借助C柱移向B柱将A柱上仅剩的最后一个盘子移向C柱将B柱上的n-1个盘子借助A柱移向C柱 2.代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threa…

护眼台灯是不是智商税?全面测评松下、书客、飞利浦护眼台灯!

在当今数字化时代&#xff0c;长时间面对电子屏幕已成为日常生活的一部分&#xff0c;这对我们的视力健康构成了挑战。特别是在学习和工作的场景中&#xff0c;一款优质的护眼台灯不仅能够提供舒适的照明环境&#xff0c;还能有效减轻眼睛疲劳&#xff0c;保护视力。然而&#…

如何优雅的使用责任链模式?

如何优雅的使用责任链模式&#xff1f; 在业务开发中&#xff0c;总是会由于需要处理复杂的业务逻辑&#xff0c;从而造成开发者的代码冗余或者模块之间耦合度过高&#xff0c;那么当面对这种情况时&#xff0c;如何实现请求处理的灵活性和可维护性&#xff0c;责任链模式就可以…

短视频流量|基于SprinBoot+vue的短视频流量数据分析系统(源码+数据库+文档)

短视频流量数据分析系统 基于SprinBootvue的短视频流量数据分析系统 一、前言 二、系统设计 三、系统功能设计 5.1 系统功能模块 5.2 管理员功能模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍…