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

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

时间:2024-04-10 17:03:42浏览次数:25  
标签:function graphic const PolylineEntity export new mars3d graphicLayer

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)
      }
    }
  ])
}

标签:function,graphic,const,PolylineEntity,export,new,mars3d,graphicLayer
From: https://blog.csdn.net/m0_69803146/article/details/137596719

相关文章

  • 解决 "last line of file ends without a newline" 警告的方法:使用 .editorconfig
    在软件开发过程中,我们经常会遇到一些常见的代码规范问题,其中之一就是"lastlineoffileendswithoutanewline"警告。这个警告表示文件的最后一行缺少换行符,可能会导致一些编辑器或版本控制系统的问题。如果每次都手动去操作添加一行有点麻烦,我们可以通过使用.editorconfig......
  • newstart 部分题解和pwn相关的学习
    做newstart的pwnpieee题的pie的学习首先:对于pieee这道题很简单的栈溢出,除了NX其他的保护都开了,然后呢在左边也发现了后门函数相对偏移为0x1264(对于这里我们只用关心后三位,因为pie不会随机化地址的低12位,通俗点说就是我们十六进制地址的后三位)而一般而言后三位的地址能够确定我......
  • Eclipse设置new菜单
    1.问题每次我们新建文件时,发现shortcuts只有那固定的几个,但是随着我们开发的项目不同,需求不同,都需要不同的shortcuts2.解决2.1windows>perspective>CustomizePerspective找到该项2.2在里面选择自己想要的shortcuts即可......
  • Property [renew] not found. Using default value [false]
    接口请求时,报错Property[renew]notfound. Usingdefaultvalue[false]返回:Therewasanunexpectederror(type=NotFound,status=404).有两种可能:1、添加扫描路径使用basePackages:@ComponentScan(basePackages={"com.person","com.controller"})2、添加依赖......
  • c++内存管理(new、delete)
    目录前言c/c++中程序内存区域划分c++函数之new的使用方法第一个场景:对任意类型动态开辟一个类型大小的空间第二个场景:对任意类型动态开辟多个类型大小的空间第三个场景:在第一、二场景下还需要对数据初始化c++函数之delete的使用方法第一个场景:对任意开辟一个类型大小......
  • Android Graphics 多屏同显/异显 - C++示例程序(标准版)
    ”为了理解Android多屏同显/异显的基本原理,我们将从NativeLevel入手,基于GraphicsAPIs写作一个简单的C++版本的多屏显示互动的演示程序。通过这个程序我们将了解常用的多屏显示相关的接口的使用方法。“  01多屏显示C++示例概况 源码下载请查看文章末尾源码下载方......
  • new Object()和new Thread()
    newObject()过程如下:JVM分配一块内存M在内存M上初始化该对象将内存M的地址赋值给引用变量obj创建线程的过程如下:JVM为一个线程栈分配内存,该栈为每个线程方法调用保存一个栈帧每一栈帧由一个局部变量数组、返回值、操作数堆栈和常量池组成每个线程获得一个程序计......
  • C语言实现牛顿迭代法(Newton-Raphson Method)
    目录前言A.建议B.简介一代码实现二时空复杂度A.时间复杂度B.空间复杂度C.总结三优缺点A.优点:B.缺点:C.总结:四现实中的应用前言A.建议1.学习算法最重要的是理解算法的每一步,而不是记住算法。2.建议读者学习算法的时候,自己手动一步一步地运行算法。B.......
  • Cultural and Economic Decline in New York
     1. Cultural and Economic Decline in New York●  New York has seen a decrease in creative buildings and attractions in architecture, entertainment, music, and sports.●  Compared to other seaport cities, New York no lo......
  • PowerShell 中有用于管理服务的一系列命令,包括新建服务的命令。你可以使用 New-Servic
    PowerShell中有用于管理服务的一系列命令,包括新建服务的命令。你可以使用New-Service命令来创建新的服务。下面是一个简单的示例:powershellCopyCodeNew-Service-Name"MyService"-DisplayName"MyService"-BinaryPathName"C:\Path\to\MyService.exe"这个命令将创建一......