图层层级设置

9/10/2024

加载图层时,想要后加载的图层覆盖在之前加载的图层之上,可根据下面进行选择

# 确认下图层类型

  • 只有同类型的图层设置zIndex才生效的;

  • 不同类型同层之间可设置高度来调整上下级关系;

  • 瓦片图层只能在最下面,如果是局部图片,可以改用 Rectangle 矩形+图片材质+贴地 的方式叠加在模型上

// 添加图片graphic
const graphic = new mars3d.graphic.RectangleEntity({
  positions: [
    [63.8148899733, 12.7700338517],
    [143.536486117, 56.3833398551],
  ],
  style: {
    materialType: mars3d.MaterialType.Image2,
    materialOptions: {
      image: url,
    },
  },
});
graphicLayer.addGraphic(graphic);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 部分图层永远在其他图层之上,如MapVLayer、EchartsLayer永远在其他图层之上 ,因为这是第3方库的div进行集成的,与mars3d的三维是2个独立的div。

# GraphicLayer和GeoJsonLayer

  1. 1.GraphicLayer 的 graphic 的 type 与 GeoJsonLayer 的 symbol 的 type 指定的类型要一样,都是 Entity 或者都是 Primitive 类型,并且要加上 clampToGround+zIndex 共同实现控制层级覆盖等效果

  2. GraphicLayer 和 GeoJsonLayer 的 graphic 的 type 不一致的时候,需要不同的高度值实现层级控制功能,GraphicLayer 在 startDraw 的时候,支持 updateDrawPosition 更新绘制坐标。

参考示例http://mars3d.cn/editor-vue.html?key=ex_7_14_0&id=layer-graphic/draw/draw

  1. 非贴地对象时,zIndex和先后顺序无意义,可设置 addHeight 参数修改高度实现。
最后更新: 9/11/2024, 4:26:23 PM