外观
自定义矢量对象
646字约2分钟
2025-01-25
继承已有矢量对象,改写部分方法
示例:
class CurveEntity extends mars3d.graphic.PolylineEntity {
constructor(options = {}) {
super(options)
// this._minPointNum = 2 // 至少需要点的个数
// this._maxPointNum = 999 // 最多允许点的个数
}
getShowPositions(positions) {
if (!positions || positions.length < 2) {
return positions
}
return getBezierCurvePoints(positions, this.style)
}
}
// 注册下, 可以再graphicLayer.startDraw中使用
mars3d.GraphicUtil.register("curveEntity", CurveEntity)
继承基类,内部自定义构造其他对象
完全自定义矢量对象时,注意 _mountedHook
、_addedHook
、_removedHook
这3个关键钩子方法的复写即可。
示例:
class FloorGraphic extends mars3d.graphic.BasePointEntity {
/**
* 对象添加到图层前创建一些对象的钩子方法,
* 只会调用一次
* @return {Promise<object>} 无
* @private
*/
_mountedHook() {
this._models = []
const {point} = this // 楼栋位置
const floorHeight = this.style.spacing // 每层层高,单位:米
const floorCount = this.style.count // 总层数(不含楼顶)
// 增加楼层
for (let i = 0; i < floorCount; i++) {
const alt = point.alt + i * floorHeight
const model = new mars3d.graphic.ModelEntity({
position: [point.lng, point.lat, alt],
style: this.style,
attr: {
origAlt: alt // 记录原始高度
}
})
this._models.push(model)
}
// 增加楼顶
const topAlt = point.alt + floorCount * floorHeight
const topModel = new mars3d.graphic.ModelEntity({
position: [point.lng, point.lat, topAlt],
style: {
...this.style,
url: this.style.topUrl
},
attr: {
origAlt: topAlt // 记录原始高度
}
})
this._models.push(topModel)
}
/**
* 对象添加到图层上的创建钩子方法,
* 每次add时都会调用
* @return {void} 无
* @private
*/
_addedHook() {
this._models.forEach((model) => {
this._layer.addGraphic(model)
})
}
/**
* 对象从图层上移除的创建钩子方法,
* 每次remove时都会调用
* @return {void} 无
* @private
*/
_removedHook() {
this._models.forEach((model) => {
this._layer.removeGraphic(model)
})
}
/**
* 展开所有楼层
*
* @param {number} height 展开的每层间隔高度,单位:米
* @param {number} [time=4] 完全展开时间,单位:秒
* @return {void} 无
*/
openAll(height, time = 4) {
this.reset()
const {point} = this // 楼栋位置
for (let i = 0; i < this._models.length; i++) {
const model = this._models[i]
const alt = i * height + model.attr.origAlt
model.moveTo({
position: [point.lng, point.lat, alt],
time // 移动的时长(单位 秒)
})
}
}
/**
* 合并所有楼层
*
* @param {number} [time=4] 完成合并时间,单位:秒
* @memberof FloorGraphic
* @returns {void}
*/
mergeAll(time = 4) {
const {point} = this // 楼栋位置
for (let i = 0; i < this._models.length; i++) {
const model = this._models[i]
model.show = true
model.moveTo({
position: [point.lng, point.lat, model.attr.origAlt],
time // 移动的时长(单位 秒)
})
}
}
/**
* 还原重置所有楼层
* @return {void} 无
*/
reset() {
const {point} = this // 楼栋位置
for (let i = 0; i < this._models.length; i++) {
const model = this._models[i]
model.position = new mars3d.LngLatPoint(point.lng, point.lat, model.attr.origAlt)
model.show = true
}
}
/**
* 显示指定楼层
*
* @param {Number} floorNum 指定显示的楼层,第1层开始
* @param {Number} [time=1] 楼层下落需要时间,单位:秒
* @return {void} 无
*/
showFloor(floorNum, time = 1) {
floorNum--
const {point} = this // 楼栋位置
const maxHeight = 120 // 顶部落下的高度
for (let i = floorNum; i < this._models.length; i++) {
const model = this._models[i]
model.position = new mars3d.LngLatPoint(point.lng, point.lat, maxHeight)
model.show = false
}
for (let j = 0; j <= floorNum; j++) {
const model = this._models[j]
model.show = true
model.moveTo({
position: [point.lng, point.lat, model.attr.origAlt],
time // 移动的时长(单位 秒)
})
}
}
}