当前位置: 首页 > news >正文

geojson数据与graphic数据层级zIndex叠加控制说明详解

前提说明:


1.在我们mars3d的设计架构中,矢量图层是带有地理信息特征的一些点线面的图形展示,来补充丰富三维效果。

2.常见的矢量图层有:GraphicLayer,BusineDataLayer,GeoJsonLayer

3.不同的图层叠加的时候,必然涉及层级控制。


3.1此时我们需要了解相关的矢量图层的矢量数据类型差别。

graphicLayer指定数据类型,需要在symbol的type中,指定详细的矢量数据的类型,此刻代码必须指定为Entity类型。

    type: "point",

如果是 Primitive类型,则代码必须:

    type: "rectangleP",

可选择的类型有:Global - V3.8.0 - Mars3D API文档

 在代码中指定的需参考截图说明:

 GeoJsonLayer指定数据类型,同样需要在symbol的type中,指定详细的矢量数据的类型,

 3.2在保证了矢量数据类型,均是Entity类型或者均是Primitive类型后,

我们需要继续增加参数控制。在对应的StyleOptions中,增加clampToGround//是否贴地控制。

此时代码必须:

      clampToGround: true,

参考的代码位置:

  const graphicLayer = new mars3d.layer.GeoJsonLayer({zIndex: 9,data: {"type": "FeatureCollection","layer": {"id": "M-C91E06B6-AF6F-4DB3-8237-1F036F8F89C9","name": "1111"},"features": [{"type": "Feature","geometry": {"type": "Polygon","coordinates": [[[116.14095,30.758996,542.8],[116.237801,30.716212,194.7],[116.279206,30.787596,658.2],[116.242369,30.798216,488.6]]]}}]},popup: "zIndex是9,重叠的区域层级应该在矩形下面",symbol: {type: "polygon",styleOptions: {clampToGround: true,color: "#00ffff",opacity: 0.4,label: {text: "zIndex是9,重叠的区域层级应该在矩形下面",font_size: 18,color: "red"},//文字配置不想要可以直接注释label}},flyTo: true})map.addLayer(graphicLayer)

 此时GraphicLayer的代码配置参考:

  const graphicLayer1 = new mars3d.layer.GraphicLayer({popup: "zIndex矩形999最大应该在上面",})map.addLayer(graphicLayer1)graphicLayer1.startDraw({type: "rectangle",style: {clampToGround: true,color: "#ffff00",zIndex: 900,opacity: 1,outline: true,outlineWidth: 12,outlineColor: "#ff0000",label: {text: "zIndex矩形999最大重叠区域应该在上面",font_size: 18,color: "red",distanceDisplayCondition: true,distanceDisplayCondition_far: 500000,distanceDisplayCondition_near: 0}}})

效果:

json图层:

在json图层上面绘制的GraphicLayer效果:

重叠部分层级测试:


总结:

1.矢量图层层级控制,需要满足:

  1. 矢量数据类型type必须为同类型,
        type: "rectangle",

  2. 矢量数据样式StyleOptions均为贴地样式,
        style: {clampToGround: true,

  3. 层级控制zIndex,zIndex数值越大就在越上面,
          zIndex: 900,


2.矢量图层层级控制,如果不是同类型的时候,需要使用setHeight参数,实现层级控制效果。

setHeight: 900,

 

 补充说明:

1.矢量图层永远在瓦片图层上方。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 黑神话悟空无法登录服务器怎么办
  • Express路由基础与高级功能深入解析
  • TCP/IP 协议:互联网的基石
  • 【Leetcode 2154 】 将找到的值乘以 2 —— 哈希表
  • 【Rust光年纪】提升Rust文件操作效率:探秘6大利器
  • AUTOSAR OS详细介绍及配置说明(更新版20240829)
  • 逻辑长路短路“且“运算
  • 【附解决方法】由于找不到vcruntime140_1.dll 无法继续执行代码如何处理
  • Memory-based Controller Shutdown (PCIe)
  • 精通Redis-CLI:命令行玩转高效缓存
  • Ascend C算子开发(入门)—— 算子开发环境搭建
  • MyPrint打印设计器(四)vue3 函数式调用组件
  • python办公自动化:使用`Python-PPTX`创建和保存演示文稿
  • 常用的虚拟机连接工具(远程访问工具)
  • JVM中篇:字节码与类的加载篇-01-class文件结构
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • Apache的基本使用
  • C++类中的特殊成员函数
  • CentOS6 编译安装 redis-3.2.3
  • cookie和session
  • C学习-枚举(九)
  • github指令
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • js如何打印object对象
  • js算法-归并排序(merge_sort)
  • KMP算法及优化
  • learning koa2.x
  • python大佬养成计划----difflib模块
  • 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
  • 仿天猫超市收藏抛物线动画工具库
  • 搞机器学习要哪些技能
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 学习Vue.js的五个小例子
  • python最赚钱的4个方向,你最心动的是哪个?
  • RDS-Mysql 物理备份恢复到本地数据库上
  • 交换综合实验一
  • ​字​节​一​面​
  • ![CDATA[ ]] 是什么东东
  • (Java企业 / 公司项目)点赞业务系统设计-批量查询点赞状态(二)
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • (一)Thymeleaf用法——Thymeleaf简介
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转)拼包函数及网络封包的异常处理(含代码)
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • .NET C# 操作Neo4j图数据库
  • .NET COER+CONSUL微服务项目在CENTOS环境下的部署实践
  • .NET Core 2.1路线图
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .NET 中 GetProcess 相关方法的性能