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.矢量图层永远在瓦片图层上方。