[mars3d] 学习

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

一、设置地球的参数

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

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

二、底图的加载

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

[mars3d] 学习_第1张图片

基本都是通过第三方服务,在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 )
}

你可能感兴趣的:(mars3d,mars3d)