Cesium弹窗可随地图移动

news2024/11/22 11:15:44

目录

  • 项目地址
  • 实现效果
  • 实现方法

项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

请添加图片描述

实现方法

handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction((click) => {
	if (listener) {
	  listener()
	  listener = undefined
	  this.visiable = false
	}
    // 球面
    if (viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
      earthPosition = viewer.scene.camera.pickEllipsoid(click.position);
    }
    // 地形
    else {
      const ray = viewer.camera.getPickRay(click.position);
      earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
    }
    if (earthPosition) {
        const position = viewer.scene.globe.ellipsoid.cartesianToCartographic(earthPosition)
        const lon = Cesium.Math.toDegrees(position.longitude).toFixed(6)
        const lat = Cesium.Math.toDegrees(position.latitude).toFixed(6)
        const height = position.height.toFixed(2)
        this.info = { lon: lon, lat: lat, height: height }
        listener = viewer.scene.postRender.addEventListener(() => {
          const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, earthPosition);
          if (windowPosition) {
            let position = { top: windowPosition.y - 115 + 'px', left: windowPosition.x - 200 / 2 + 'px' }
            this.style = Object.assign(this.style, position)
            this.visiable = true
          }
        })
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

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

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

相关文章

黑客在Pwn2Own Toronto上以58个零日漏洞赚取超过100万美元

Pwn2Own Toronto 2023黑客大赛已经圆满结束,安全研究人员通过攻击消费类产品的58个零日漏洞(以及多个漏洞碰撞)赚取了1,038,500美元。此次比赛由趋势科技的零日倡议(Zero Day Initiative,简称ZDI)组织&…

电子电器架构 —— 车载网关初入门(二)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数5000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他…

WMS基础流程和设计

文章目录 一、WMS的含义和系统综述1.1 WMS含义1.2 系统综述 二、WMS系统关键概念2.1 概念解释2.1.1 区域2.1.2 波次管理2.1.3 作业2.1.4 提货方式2.1.5 批号要求2.1.6 容器2.1.7 暂存区2.1.8 复核台2.1.9 补货2.1.10 订单类别 2.2 仓储作业中的岗位 三、WMS基础资料的内容及初装…

剑指JUC原理-2.线程

创建和运行线程 直接使用Thread // 创建线程对象 Thread t new Thread() {public void run() {// 要执行的任务} }; // 启动线程 t.start();--------------------------------------------------// 构造方法的参数是给线程指定名字,推荐 Thread t1 new Thread(&…

力扣 三数之和 双指针 java

Problem: 15. 三数之和 时间复杂度: O ( n 2 ) O(n^2) O(n2) &#x1f351; AC code class Solution {public List<List<Integer>> threeSum(int[] nums) {List<List<Integer>> res new ArrayList<>();int len nums.length; if(len < 3…

【卷积神经网络】YOLO 算法原理

在计算机视觉领域中&#xff0c;目标检测&#xff08;Object Detection&#xff09;是一个具有挑战性且重要的新兴研究方向。目标检测不仅要预测图片中是否包含待检测的目标&#xff0c;还需要在图片中指出它们的位置。2015 年&#xff0c;Joseph Redmon, Santosh Divvala 等人…

No173.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

队列概念|循环队列的实现

前言 今天我们将学习循环队列实现&#xff0c;我们首先介绍队列的概念和结构&#xff0c;之后一步步讲解循环队列由来与实现。 一、队列的概念与结构 1、队列的概念 队列&#xff1a; 只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表。队列是…

3.72 Command Buffer及URP概述

一、Command Buffer 1.概念 CommandBuffer携带一系列的渲染命令&#xff0c;依赖相机&#xff0c;用来拓展渲染管线的渲染效果。而且可以指定在相机渲染的某个点执行本身的拓展渲染。Command buffers也可以结合屏幕后期效果使用。 简单来说就是可以在渲染流程中插入一些自定…

群智能算法之模拟退火算法

1.模拟退火算法简介&#xff1a; 2.模拟退火算法的关键点&#xff1a; &#xff08;1&#xff09;随机的更新可行解x,判断可行解x对应的函数值和原来函数值之间的大小&#xff1a;如果优于原来的函数值&#xff0c;则让新的可行解x为问题的解&#xff1b;否则以一定的概率(大于…

centos7 部署 Flink

1. 准备 安装的前提是虚拟机里已安装了jdk 去官网下载 Flink 所有版本下载地址&#xff1a;https://archive.apache.org/dist/flink/ 找到下图的安装包&#xff0c;下载即可 下载完后&#xff0c;将其上传至虚拟机的某个地方&#xff0c;本人将其放在 /home/flink/ 下 解压…

nacos面试题

Nacos中保证的是CP还是AP&#xff1f; 通常我们说&#xff0c;Nacos技能保证CP&#xff0c;也能保证AP&#xff0c;具体看如何配置&#xff0c;但其实只不过是Nacos中的注册中心能保证CP或AP&#xff0c;Nacos中的配置中心其实没什么CP或AP&#xff0c;因为配置中心的数据是存在…

2023.10.28 关于 synchronized 原理

目录 synchronized 特性 synchronized 优化机制 锁升级&#xff08;锁膨胀&#xff09; 其他优化机制 锁消除 锁粗化 synchronized 特性 开始时是乐观锁&#xff0c;如果锁冲突频繁&#xff0c;就转为悲观锁开始是轻量级锁&#xff0c;如果锁被持有的时间较长&#xff0c…

水果百科网站 vue+uniapp微信小程序设计与实现

设计并实现了鲜而廉水果微信小程序。系统选用java语言&#xff0c;应用Springboot框架&#xff0c; MySQL为后台数据库。系统主要包括用户、水果百科、水果视频、交流论坛等功能模块。 经过认真细致的研究&#xff0c;精心准备和规划&#xff0c;最后测试成功&#xff0c;系统可…

[导弹打飞机H5动画制作]飞机与导弹的碰撞检测

界面参考: 代码参考: this.btnShootTruck.addEventListener("click", startShoot); var _this = this; _this.ShootFire.stop(); _this.ShootFire.alpha = 0; //_this.AsyPlaneObj.gotoAndStop(0); _this.AsyPlaneObj.alpha = 1; _this.AsyPlaneObj.BombPlaneObj.al…

【vtk学习笔记2】vtk编程中的基本对象

一、VTK编程中的基本对象 数据可视化一般需要一个数据源&#xff0c;可以来说具体的算法&#xff0c;如有限元、边界元等&#xff0c;也可以是测量数据&#xff0c;如医学检测数据等。这些基础数据经过变换处理&#xff0c;变成计算机图形流水线支持的数据&#xff0c;最后显示…

redis实现分布式延时队列

文章目录 延时队列简介应用场景案例&#xff1a;考虑&#xff1a;实现&#xff1a;整体思路&#xff1a;具体实现生产者消费者 运行结果 redis分布式延时队列优势redis分布式延时队列劣势 延时队列简介 延时队列是一种特殊的消息队列&#xff0c;它允许将消息在一定的延迟时间…

【系统安全】等保二级、三级自查对比

目录 1、定义&#xff1a;二级 VS 三级 2、要求&#xff1a;二级 VS 三级 3、适用企业、单位 1、定义&#xff1a;二级 VS 三级 等保&#xff1a;全称网络安全等级保护&#xff0c;是指对信息系统进行分级&#xff0c;对不同等级的信息系统进行不同的安全保护和监管的工作。…

仿写知乎日报第二周

新学到的 新学到了WKWebView&#xff1a; WKWebView是是苹果推崇的一个新的类&#xff0c;它用于将一个网页嵌套在软件里。这里我是将点击cell后的内容中放入WKWebView对象。WKWebView的使用&#xff1a; 首先&#xff0c;要导入这个类&#xff1a; #import <WebKit/WebK…

3.7 移动端TB(D)R架构基础

一、各类电子设备功耗对比 桌面级主流性能平台&#xff0c;功耗一般为300W&#xff08;R7/I7X60级别显卡&#xff09;&#xff0c;游戏主机150-200W入门和旗舰游戏本平台功耗为100W主流笔记本为50-60W&#xff0c;超极本为15-25W&#xff0c;旗舰平板为8-15W旗舰手机为5-8W&am…