new mars3d.layer.GeoJsonLayer({的pupup配置参考

new mars3d.layer.GeoJsonLayer({的pupup配置可选项以及相关效果参考:

说明:popup按属性字段配置,可以是字符串模板或数组

1.popup仅配置{type}{name}等属性的的时候,指显示json文件内数据的type与name,效果如下

相关代码:

  const graphicLayer = new mars3d.layer.GeoJsonLayer({name: "标绘示例数据",url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",popup: "{type} {name}",queryParameters: {token: "mars3d" // 可以传自定义url参数,如token等},symbol: {merge: true,styleOptions: {// 高亮时的样式highlight: {type: "click",opacity: 0.9}}},flyTo: isFlyTo})map.addLayer(graphicLayer)

2.popup配置 'all'的时候,可以显示json文件的所有属性,常用于测试知道数据有哪些属性

相关代码:

  const graphicLayer = new mars3d.layer.GeoJsonLayer({name: "标绘示例数据",url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",popup: "all",queryParameters: {token: "mars3d" // 可以传自定义url参数,如token等},symbol: {merge: true,styleOptions: {// 高亮时的样式highlight: {type: "click",opacity: 0.9}}},flyTo: isFlyTo})map.addLayer(graphicLayer)

3.popup配置数组的时候,效果如下:

相关代码:

  const graphicLayer = new mars3d.layer.GeoJsonLayer({name: "标绘示例数据",url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",popup: [{ field: "id", name: "编码" },{ field: "name", name: "名称" },{ field: "type", name: "类型" },{type: "html",html: "<label>视频</label><video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style=\"width: 300px;\" ></video>"}],queryParameters: {token: "mars3d" // 可以传自定义url参数,如token等},symbol: {merge: true,styleOptions: {// 高亮时的样式highlight: {type: "click",opacity: 0.9}}},flyTo: isFlyTo})map.addLayer(graphicLayer)

4.popup不展示不需要的属性的时候,可以使用bindPopup实现。

相关代码:

graphicLayer.bindPopup(function (event) {
const attr = { ...event.graphic.attr }
// 删除不展示的属性
delete attr.layer_name// 增加自定义属性
attr["类型"] = event.graphic.type
attr["来源"] = "我是layer上绑定的Popup"
attr["备注"] = "我支持鼠标交互"return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })})

5. popup上加单击按钮操作的时候,可以bindPopup

  geoJsonLayer = new mars3d.layer.GeoJsonLayer({name: "标绘示例数据",url: "//data.mars3d.cn/file/geojson/mars3d-draw.json"})map.addLayer(geoJsonLayer)// 在layer上绑定Popup单击弹窗geoJsonLayer.bindPopup(function (event) {const attr = event.graphic.attrreturn "我是layer上绑定的自定义模版Popup<br />" + attr.type},{template: `<div class="marsBlackPanel animation-spaceInDown"><div class="marsBlackPanel-text">{content}</div><span class="mars3d-popup-close-button closeButton" >×</span></div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.CENTER})

 

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

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

相关文章

MyBatis核心配置文件:解锁数据之美的密码

MyBatis&#xff0c;这位编程的诗人&#xff0c;通过其独特的核心配置文件&#xff0c;为我们描绘出一幅数据之美的画卷。本篇博客将带你深入探讨MyBatis核心配置文件的奥秘&#xff0c;让你能够更好地理解和运用这个优雅的数据持久化框架。 最近想搞私域&#xff0c;欢迎各位…

【MySQL】8. 基本查询(update/delete/聚合/分组)

表的删改 3. Update 语法&#xff1a; UPDATE table_name SET column expr [, column expr ...] [WHERE ...] [ORDER BY ...] [LIMIT ...]对查询到的结果进行列值更新 案例&#xff1a; 3.1 将孙悟空同学的数学成绩变更为 80 分 -- 更新值为具体值 -- 查看原数据 SELECT…

开发指南-1:编码技巧与规范开始

目录 实例 1.使用对象代替if及switch 2.使用Array.from快速生成数组 3.使用router.beforeEach来处理跳转前逻辑 4.使用v-if来优化页面加载 5.路由跳转尽量使用name而不是path 6.使用key来优化v-for循环 7.使用computed代替watch 8.统一管理缓存变量 9.使用setTimeout…

【深度学习】训练Stable Diffusion环境

仓库&#xff1a; https://github.com/bmaltais/kohya_ss.git 基础镜像&#xff1a; from kevinchina/deeplearning:sdxllighting_trt_nginx_002api docker run --net host --gpus device0 -e APIWORKS1 -it t1:t1 bash构建环境&#xff1a; sudo -i git clone https://git…

springboot291校园疫情防控系统

校园疫情防控系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统校园疫情防控信息管理难度…

【Python难点答疑】2、为什么要有@classmethod和@staticmethod,有什么区别?

在 Python 中&#xff0c;staticmethod 和 classmethod 都是用来定义类中的特殊方法的装饰器。它们允许我们定义与类相关的方法&#xff0c;而不需要实例化类。虽然它们都允许我们在类中定义方法&#xff0c;但它们的行为和用法略有不同。 1.静态方法&#xff08;staticmethod&…

Source Insight关于复制一段代码会自动添加空格或者Tab键的配置取消

Source Insight关于复制一段代码会自动添加空格或者Tab键的配置取消&#xff0c;这个情况在我们复制代码的时候对格式非常不友好&#xff0c;解决办法如下。 如下&#xff0c;我们可以设置相关配置&#xff1a; 设置完成后&#xff0c;然后再去复制&#xff0c;可以看到就没有相…

网络编程:包头分析

一、以太网头 以太网中封装了源mac地址以及目的mac地址&#xff0c;还有ip类型&#xff0c;以太网又称为mac头 0X0800 只接收发往本机的mac的ipv4类型的数据帧 0X0806 只接收发往本机的ARP类型的数据帧 0x8035 只接受发往本机的RARP类型的数据帧 0X0003 接收发往本机的MAC所…

【兆易创新GD32H759I-EVAL开发板】IPA与TLI 图层混合的区别

在GD32H7系列中&#xff0c;IPA&#xff08;Image Processing Algorithm&#xff09;和TLI&#xff08;TFT LCD接口&#xff09;都支持图层混合功能&#xff0c;提供了丰富的人机界面&#xff08;HMI&#xff09;显示能力。尽管这两个特性在图层混合方面有一定的相似性&#xf…

十八、软考-系统架构设计师笔记-真题解析-2022年真题

软考-系统架构设计师-2022年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.云计算服务体系结构如下图所示&#xff0c;图中①、②、③分别与SaaS、PaaS、IaaS相对应&#xff0c;图中①、②、③应为( )。 A.应用层、基础设施层、平台层 B.应用层、平台层、基础设施层 C.平…

Jenkins 一个进程存在多个实例问题排查

Jenkins 一个进程存在多个实例问题排查 最近Jenkins升级到2.440.1​版本后&#xff0c;使用tomcat​服务部署&#xff0c;发现每次定时任务总会有3-4个请求到我的机器人上&#xff0c;导致出现奇奇怪怪的问题。 问题发现 机器人运行异常&#xff0c;总有好几个同时请求的服务。…

C++ 模板入门详解

目录 0. 模板引入 1.函数模板 1. 函数重载的缺点 2. 函数模板的概念和格式 2. 函数模板的实例化 2.1 隐式实例化&#xff1a;让编译器根据实参推演模板参数的实际类型 2.2 显式实例化&#xff1a;在函数名后的<>中指定模板参数的实际类型 2.3 函数模板参数的匹…

return code 1 from org.apache.hadoop.hive.ql.ddl.DDLTask

Bug信息 Error: Error while compiling statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.ddl.DDLTask (state=08S01,code=1)Bug产生的代码 修复hive表分区: msck repair table xxxBug原因排查 分区数量过大 这个是网上查看的说如果一次…

单身狗誓必脱单协会群(单身男女可进)

甜甜的恋爱&#xff0c;单身男女可进&#xff0c;谢绝己婚人士和海王进入&#xff01; 发送内容: "单身人士", 申请进群

【C++】—— 装饰器模式

目录 &#xff08;一&#xff09;什么是装饰器模式 &#xff08;二&#xff09;为什么要使用装饰器模式 &#xff08;三&#xff09;装饰器模式的实现步奏 &#xff08;四&#xff09;代码示例 &#xff08;五&#xff09;装饰器模式优缺点 &#xff08;一&#xff09;什么…

centos firewalld 封禁某个ip

在 CentOS 系统上使用 firewalld 封禁某个 IP 地址的步骤如下: 1. 确保 firewalld 已安装并运行: systemctl status firewalld 如果没有运行,启动 firewalld: systemctl start firewalld systemctl enable firewalld 2. 使用 firewall-cmd 命令临时封禁IP: firewall-cmd -…

【JavaSE】封装——访问修饰符详解

前言 我本来想着在【类与对象】那篇博客里讲访问修饰符的&#xff0c;但是因为继承还没有讲&#xff0c;protectded解释起来就会很费劲&#xff0c;就索性把【继承和多态】先写了&#xff0c;完了之后再来讲这个访问修饰符 访问修饰符 又称权限修饰符&#xff0c;我们之前见…

安科瑞保护测控产品在新能源行业中应用【峰谷套利 动态扩容 需求侧响应】

背景 2 月 10 日发布《关于完善能源绿色低碳转型体制机制和措施的意见》明确&#xff0c;鼓励建设源网荷储一体化、多能互补的智慧能源系统和微电网。 分布式光伏优势 近年来&#xff0c;随着光伏产业规模不断扩大&#xff0c;技术迭代升级不断加快&#xff0c;智能制造迅速推…

linux脚本中以yyyymmdd格式输出指定文件的修改日期

在Linux脚本中,你可以使用stat命令来查看文件的修改日期。然后,你可以使用date命令来格式化这个日期。以下是一个简单的bash脚本示例,它接受一个文件名作为参数,并打印出该文件的修改日期(以yyyymmdd格式): #!/bin/bash # 检查是否提供了文件名作为参数 if [ "…

电脑照片分辨率怎么调?这款dpi修改工具好用

许多考试平台在上传证件照片的时候&#xff0c;大多都会对图片分辨率有具体要求&#xff0c;但是如果遇上手上的图片分辨率达不到要求&#xff0c;那么怎么改图片分辨率呢&#xff1f;可以利用专业的dpi修改工具来处理&#xff0c;比如今天分享的就是一个在线修改图片分辨率的方…