[mars3d] 学习

今天整体说下mars3d，集成问题之后在说，先说下概念性的东西；

一、设置地球的参数

下载他们的示例，如果不是特别的要求，可以直接使用他们的 confign 进行加载；

如果有什么特别的设置的，可以通过 功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 进行一些简单的设置；像是深度检测，加载昼夜区域，是否显示太阳，月亮，显示底图等等，更多的就需要查看 Mars3D三维可视化平台 | 火星科技 api 文档了，

二、底图的加载

目前主要的类型有下面这几种

基本都是通过第三方服务，在mars3d中进行加载的；这种的话需要自己对需要发布的第三方服务有点了解；

对于mars3d来说，就是gis本身的瓦片机制和请求机制，单纯客户端，改不了什么大的东西；

不过可以去他们的群里问问，说不定能解决；

三、矢量图层

必须的一个图层，要想添加各种矢量对象都得先添加矢量图层；

矢量对象是不能直接在加载在map上，需要挂在图层上；

const graphicLayer = new mars3d.layer.GraphicLayer({id:"graphicLayer"})
map.addLayer(graphicLayer)

 矢量对象添加在map上，才能通过id、name等参数去获取，

map.getLayerById("graphicLayer")

// 这个可以获取到confign内设置的layer
map.getLayer("graphicLayer","id")

map.getLayerByAttr("graphicLayer","id")

添加矢量对象到图层上；

一些用于展示的数据都可以放到attr里面，之后的popup,或者是其他地方使用的时候就直接拿到数据；

获取矢量对象也是和在map中获取图层是差不多的方法

const graphic = new mars3d.graphic.PointEntity({
    position: [116.244399, 30.920459, 573.6],
    style: {
      color: "#ff0000",
      pixelSize: 10,
      outlineColor: "#ffffff",
      outlineWidth: 2,
      label: {
        text: "我是原始点",
        font_size: 18,
        color: "#ffffff",
        pixelOffsetY: -10,
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 500000,
        distanceDisplayCondition_near: 0
      }
    },
    attr: { remark: "示例1" }
  })
  graphicLayer.addGraphic(graphic)

 现在讨论一些添加矢量对象会遇到的业务要求

1、当前效果是移动地图时，会飘来飘去

这是因为没有贴地导致的，或许在地下，或许在空中，都会导致这种问题；

要解决的话，也很简单，使用 clampToGround ：true, 进行设置即可；

但是 clampToGround 这个参数性能不是很好，尤其是很多个对象时，会导致页面卡顿；

那么可以在最初的时候计算好高度值，把值传给后端，让他改！

点使用 -  PointUtil - Mars3D API文档 去计算贴地高度值；

线使用 - PolyUtil - Mars3D API文档 去计算贴地高度值。

2、绑定点击事件

这是对图层绑定单机事件，那么在该图层下的所有矢量对象都会被绑定单机事件；

graphicLayer.on(mars3d.EventType.click, function (event) {
    const graphic = event.graphic
    console.log("监听graphicLayer，单击了矢量对象", graphic )
})

也可以对单个矢量对象进行绑定

graphic.on(mars3d.EventType.click, function (event) { 
    console.log("监听graphic，单击了矢量对象", event)
})

值得注意的是，不能多次执行该方法，否则会被绑定多次的哦；

解绑的话，使用 off 即可；但值得注意的是，使用 off 解绑，一定要将方法给提出来，单独解绑这一个方法，否则，这个图层的所有该类型的绑定将全部解绑

graphicLayer.on(mars3d.EventType.click, layer_onClick)


graphicLayer.off(mars3d.EventType.click, layer_onClick)


function layer_onClick(event){
    const graphic = event.graphic
    console.log("监听graphicLayer，单击了矢量对象",graphic )
}