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;往往能解决一些老技术的弊端问题。因为传统校园疫情防控信息管理难度…

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所…

十八、软考-系统架构设计师笔记-真题解析-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;什么…

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

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

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

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

【漏洞复现】6.Struts2 S2-061 远程命令执行漏洞(CVE-2020-17530)复现与分析

文章目录 1. 预备知识2. 漏洞复现2.1 漏洞介绍2.2 漏洞原理分析2.2.1 Apache Struts2架构2.2.2 OGNL语法介绍2.2.3漏洞原理 2.3 漏洞复现2.3.1 靶场搭建2.3.2 漏洞探测2.3.3 漏洞利用2.3.4 POC分析 2.4 漏洞修复 1. 预备知识 Struts是一个用于开发Java EE网络应用程序的开放源代…

如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?

放大了看效果 ​​​​​​​​​​​​​​ // 摇晃小铃铛振动/震动/摇晃/晃动的特效/效果---------------------------------------- [sg-shaking] {display: inline-block;transform-origin: center top;animation: sg-shaking 1s alternate forwards; }keyframes sg-shaki…

【timm笔记1】

1. 安装timm pip install timm2. 打印模型 import timm# 获取并打印所有可用的预训练模型名称 available_models = timm.list_models() # 打印出所有的模型 print(available_models)# 打印所有包含"resnet"字符的模型名称 resnet_models = timm.list_models(*resne…

Java基础知识总结(中)

本文部分内容节选自Java Guide, 地址: https://javaguide.cn/java/basis/java-basic-questions-02.html &#x1f680; 基础&#xff08;上&#xff09; → &#x1f680; 基础&#xff08;中&#xff09; (正在更新中……) 面向对象基础 对象相等和引用相等的区别 对象相等一…

【每日力扣】491. 非递减子序列与122. 买卖股票的最佳时机 II

&#x1f525; 个人主页: 黑洞晓威 &#x1f600;你不必等到非常厉害&#xff0c;才敢开始&#xff0c;你需要开始&#xff0c;才会变的非常厉害。 491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少…