今天整体说下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 )
}