【Cesium】点击billboard弹出自定义气泡框
2024-05-13 23:19:43
实现功能：
点击billboard图标，弹出自定义气泡框，并且在缩放、移动地图时保持气泡框和图标的相对位置不变。
实现效果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>气泡框</title><link href="../../../Build/Cesium/Widgets/widgets.css" rel="stylesheet"><link href="../css/pretty.css" rel="stylesheet"><script src="../js/jquery.min.js"></script><script type="text/javascript" src="../../../Build/Cesium/Cesium.js"></script><script src="../js/config.js"></script><style>#nlyjBubble {width: 20em;height: 10em;position: absolute;background: linear-gradient(180deg, rgba(5, 31, 72, 0.80) 0%, rgba(1, 12, 31, 0.80) 100%);border: 1px solid #2177f5;}.rightLine-1 {position: absolute;top: 0;background: #2177f5;width: 4em;right: -4em;height: 0.2em;}.rightLine-2 {position: absolute;top: 2.2em;right: -9em;background: #2177f5;width: 6em;height: 0.2em;transform: rotate(47deg);-ms-transform: rotate(47deg); /* IE 9 */-moz-transform: rotate(47deg); /* Firefox */-webkit-transform: rotate(47deg); /* Safari 和 Chrome */-o-transform: rotate(47deg);}.rightLine-3 {position: absolute;top: 4em;right: -9.5em;width: 2em;height: 2em;background: url("image/shiti_jiantou.png") no-repeat;background-size: 100% 100%;}.titleText {font-size: 1.1em;color: white;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: bold;color: #cfe8fb;line-height: 2.2em;margin-left: 1em;}.closeYjBubble {font-size: 1.7em;float: right;margin: 0 0.2em 0.6em 0;color: #cfe8fb;cursor: pointer;}</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>
</div><div id="nlyjBubble"><div class="rightLine-1"></div><div class="rightLine-2"></div><div class="rightLine-3"></div><div class="bubbleTitle"><span class="titleText">标题</span><span class="closeYjBubble" @click="closeyjBubble()">×</span></div>
</div><script>var viewer;function onload(Cesium) {viewer = new Cesium.Viewer('cesiumContainer', {selectionIndicator: false, // 设置绿色框不可见infoBox: false // 右边Div不可见});var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler3D.setInputAction(function (movement){var pick = viewer.scene.pick(movement.position);if (typeof (pick.id) != "undefined") {var postion = pick.id.position._value;viewer.scene.postRender.addEventListener(function () {// 笛卡尔空间直角坐标（Cartesian3）转屏幕坐标（像素）var changedEntity2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, postion);positionPopup(changedEntity2);});}}, Cesium.ScreenSpaceEventType.LEFT_CLICK)//纠正偏移位置function positionPopup(c) {if (typeof (c) != "undefined") {var x = c.x - 445;var y = c.y - 120;$("#nlyjBubble").css("left", x + "px");$("#nlyjBubble").css("top", y + "px");}}var entity = new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(120.910296, 41.321996),billboard: {image: "image/map_xuexiao@2x.png",width: 42, height: 42,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM}});viewer.entities.add(entity);var ViewConfig = {heading: 6.181876610062452,pitch: -0.8623102447494362,roll: 6.283185307179586,x: -2730256.8730273987,y: 4455816.281338929,z: 4201949.904863519};viewer.camera.position = {x: ViewConfig.x, y: ViewConfig.y, z: ViewConfig.z};viewer.scene.camera.setView({orientation: {heading: ViewConfig.heading,pitch: ViewConfig.pitch,roll: ViewConfig.roll}});viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({mapStyle : Cesium.TiandituMapsStyle["IMG_C"],maximumLevel: 17,token: "4a00a1dc5387b8ed8adba3374bd87e5e"}),1);$('#loadingbar').remove();}if (typeof Cesium !== 'undefined') {window.startupCalled = true;onload(Cesium);}</script>
</body>
</html>
【Cesium】点击billboard弹出自定义气泡框相关推荐
- php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下 效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...
- wpf 点击按钮弹出新对话框_WPF弹出自定义窗口的方法
本文实例讲述了WPF弹出自定义窗口的方法.分享给大家供大家参考,具体如下: 测试环境: [1]VS2010SP1 [2]WPF(.NET Framework 4)项目 内容简介 WPF工程如何弹出自定 ...
- 【WPF】右下角弹出自定义通知样式（Notification）——简单教程
[WPF]右下角弹出自定义通知样式(Notification)--简单教程 原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是Mai ...
- 对div实现右键弹出自定义菜单
实现只对蓝色的Div弹出自定义菜单,其他位置弹出默认的浏览器菜单 js代码如下: <script type="text/javascript">$(function() ...
- QT TextEdit设置背景、明文加密、弹出网站、弹出自定义对话框、gif动态图片、程序启动动画、打包程序、关闭事件
TextEdit设置背景 前提必须已添加了资源图片 铭文加密 ui->passLineEdit->setEchoMode(QLineEdit::Password); 弹出网站 #inclu ...
- Winform像菜单一样弹出自定义内容实现示例
在实际工作中,如果能像菜单一样弹出自定义内容,会方便很多,比如查询时,比如下拉列表显示多列信息时,比如在填写某个信息需要查看一些信息树时.这个时候自定义弹出界面就显的非常重要了 我这里其实用到的是网上 ...
- C# 点击按钮弹出文件选择框
点击按钮弹出文件选择框: // 文件选取 这里只允许txt文件private void button1_Click(object sender, EventArgs e){OpenFileDialog ...
- php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- 弹出 文件 选择 html代码,HTML+CSS点击按钮弹出文件选择框的最佳方案
网页设计中,对于文件选择框(HTML的file标签),出于美观或者体验等等的原因,我们对他的默认外观并不满意,我们可能希望点击一个按钮直接弹出文件选择框,这个很多人认为很简单,但是由于浏览器兼容的原因 ...
- vue 弹出自定义确认取消对话框使用createVNode, render
1.首先创建conform.vue,其内容如下: <template><div class="xtx-confirm" :class="{fade}&q ...
最新文章
- 刻意练习：LeetCode实战 -- Task09. 环形链表
- php如何实现区分编辑,php实现编辑和保存文件的方法
- [hdu] 5696 区间的价值 || 序列分治
- 如何通过缓存来提升系统性能
- 使用 Jquery 来实现可以输入值的下拉选单 雏型
- Reactor线程模型
- SwipeListView 详解 实现微信，QQ等滑动删除效果
- “三低”用户养活的互联网
- 什么是端到端的训练或学习？
- python中的匿名函数_Python匿名函数详解
- 31省份及直辖市自治区的下拉框代码
- vue 音频文件打包后找不到文件
- 计算机科学与技术毕业论文题目【115个】
- java查询mongodb数据_从mongodb中查询数据
- Fovea Box阅读学习笔记
- 【x86架构】中断基础介绍
- vue项目中金额小写转换为汉字大写的功能封装
- 2020-08-29 ---- 美团点评 笔试
- 阿里“中供系”前世今生：马云麾下最神秘的子弟兵
- Python tkinter（3）按钮控件
热门文章
- C语言 #define ABS(X) (X ＞= 0) ? X : -X 遇到的逻辑错误
- Linux 删除分区
- 什么是等级保护， 等保2.0详解
- PPT——快速制作图表（快速插入）
- 【R】 Error in is.data.frame(x) : (list) object cannot be coerced to type 'double'
- IROS 2021最新开源！深度学习三维激光雷达动态物体分割
- java华氏摄氏转换练习
- 设计模式之工厂模式（简单工厂、工厂方法、抽象工厂）
- linux steam大屏幕模式,Steam 大屏幕模式 - Steam Support
- VMware如何开机自动启动虚拟机也启动