new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果

1.在官网示例中通过 new mars3d.graphic.PolylineEntity({实现航线真实穿过山体或者模型的部分用虚线展示效果

2.示例地址：

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

3.实现效果：

 1.航线真实穿过山体或者模型的部分用虚线展示、并且是（真实穿过不是视线挡住那种），遮挡住的用虚线展示，没遮挡部分用实线表示。

2.随着视角变换，被山体遮挡住的部分可以自动变化为虚线。

 

4.关键代码：

5.全部代码：

import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
export let underground
export const eventTarget = new mars3d.BaseClass()

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: {  "lat":30.923712, "lng":116.318665, "alt":4038.8, "heading":0.8, "pitch":-30.5}
  }
}

/**
 * 初始化地图业务，生命周期钩子函数（必须）
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance // 记录map
  map.scene.globe.depthTestAgainstTerrain = true;
  // 创建矢量数据图层
  graphicLayer = new mars3d.layer.GraphicLayer()
  underground = new mars3d.thing.Underground({
    alpha: 0.9,
    enabled: false
  })
  map.addThing(underground)
  map.addLayer(graphicLayer)
  addDemoGraphic1(graphicLayer)
}

/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
export function onUnmounted() {
  map = null
  graphicLayer.remove()
  graphicLayer = null
}

function addDemoGraphic1(graphicLayer) {
  const graphic = new mars3d.graphic.PolylineEntity({
    positions: [
      [116.297402, 30.975045, 1000], 
      [116.305843, 30.950567, 776.3], 
      [116.33202, 30.951973, 728.4], 
      [116.326067, 30.970536, 1059.1], 
      [116.31299, 30.959927, 1080.4]
      ],
    style: {
      color: Cesium.Color.YELLOW,
      // color: '#00ff00',
      depthFail: true,
      depthFailMaterial: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.PolylineDash, {
        color: Cesium.Color.RED,
        dashLength: 20
      }),
      opacity: 1,
      label: { text: "遮挡处颜色", pixelOffsetY: -30 },
    },
    attr: { remark: "示例1" },
    flyTo: true
  })
  graphicLayer.addGraphic(graphic)
}





// 生成演示数据(测试数据量)
export function addRandomGraphicByCount(count) {
  graphicLayer.clear()
  graphicLayer.enabledEvent = false // 关闭事件，大数据addGraphic时影响加载时间

  const bbox = [116.984788, 31.625909, 117.484068, 32.021504]
  const result = mars3d.PolyUtil.getGridPoints(bbox, count, 30)
  console.log("生成的测试网格坐标", result)

  for (let j = 0; j < result.points.length; ++j) {
    const position = result.points[j]
    const index = j + 1

    const pt1 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 225, result.radius)
    const pt2 = mars3d.PointUtil.getPositionByDirectionAndLen(position, 315, result.radius)

    const graphic = new mars3d.graphic.PolylineEntity({
      positions: [pt1, position, pt2],
      style: {
        width: 3.0,
        color: Cesium.Color.fromRandom({ alpha: 1.0 })
      },
      attr: { index }
    })
    graphicLayer.addGraphic(graphic)
  }

  graphicLayer.enabledEvent = true // 恢复事件
  return result.points.length
}

// 开始绘制
export function startDrawGraphic() {
  graphicLayer.startDraw({
    type: "polyline",
    // maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束
    // hasMidPoint: false,
    style: {
      color: "#55ff33",
      width: 3,
      clampToGround: false,
      label: {
        font_size: 18,
        color: "#ffffff",
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 500000,
        distanceDisplayCondition_near: 0
      }
    },
    success: function (graphic) {
      const positions = graphic.positionsShow
      map.graphicLayer.clear()
      console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
    }
  })
}

// 开始绘制
export function startDrawGraphic2() {
  graphicLayer.startDraw({
    type: "polyline",
    style: {
      color: "#ff0000",
      width: 3,
      closure: true
    }
  })
}

// 开始绘制 自由曲线
export function startDrawBrushLine() {
  graphicLayer.startDraw({
    type: "brushLine",
    style: {
      color: "#55ff33",
      width: 3,
      clampToGround: false
    }
  })
}

// 在图层绑定Popup弹窗
export function bindLayerPopup() {
  graphicLayer.bindPopup(function (event) {
    const attr = event.graphic.attr || {}
    attr["类型"] = event.graphic.type
    attr["来源"] = "我是layer上绑定的Popup"
    attr["备注"] = "我支持鼠标交互"

    return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr })
  })
}

// 绑定右键菜单
export function bindLayerContextMenu() {
  graphicLayer.bindContextMenu([
    {
      text: "开始编辑对象",
      icon: "fa fa-edit",
      show: function (e) {
        const graphic = e.graphic
        if (!graphic || !graphic.hasEdit) {
          return false
        }
        return !graphic.isEditing
      },
      callback: (e) => {
        const graphic = e.graphic
        if (!graphic) {
          return false
        }
        if (graphic) {
          graphicLayer.startEditing(graphic)
        }
      }
    },
    {
      text: "停止编辑对象",
      icon: "fa fa-edit",
      show: function (e) {
        const graphic = e.graphic
        if (!graphic || !graphic.hasEdit) {
          return false
        }
        return graphic.isEditing
      },
      callback: (e) => {
        const graphic = e.graphic
        if (!graphic) {
          return false
        }
        if (graphic) {
          graphic.stopEditing()
        }
      }
    },
    {
      text: "删除对象",
      icon: "fa fa-trash-o",
      show: (event) => {
        const graphic = event.graphic
        if (!graphic || graphic.isDestroy) {
          return false
        } else {
          return true
        }
      },
      callback: (e) => {
        const graphic = e.graphic
        if (!graphic) {
          return
        }
        const parent = graphic.parent // 右击是编辑点时
        graphicLayer.removeGraphic(graphic)
        if (parent) {
          graphicLayer.removeGraphic(parent)
        }
      }
    },
    {
      text: "计算长度",
      icon: "fa fa-medium",
      callback: (e) => {
        const graphic = e.graphic
        const strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
        globalAlert("该对象的长度为:" + strDis)
      }
    }
  ])
}