【mars3d】批量关闭矢量数据的startFlicker()闪烁或者全部关闭startFlicker()

问题

1.graphic/entity/billboard怎么能够批量关闭startFlicker()闪烁或者 全部关闭startFlicker()呢?

相关链接

1.http://mars3d.cn/editor-vue.html?id=graphic/entity/billboard

2.http://mars3d.cn/apidoc.html#FlickerEntity

期望效果

1.graphic.stopFlicker()这个矢量数据在不知道id的情况下,怎么能够全部关闭或者批量关闭呢?

import * as mars3d from "mars3d"

export { mars3d }

export let map // mars3d.Map三维地图对象

export let graphicLayer // 矢量图层对象

export const eventTarget = new mars3d.BaseClass()

/**

* 初始化地图业务,生命周期钩子函数(必须)

* 框架在地图初始化完成后自动调用该函数

* @param {mars3d.Map} mapInstance 地图对象

* @returns {void} 无

*/

export function onMounted(mapInstance) {

map = mapInstance // 记录map

// 创建矢量数据图层

graphicLayer = new mars3d.layer.GraphicLayer({

allowDrillPick: true // 如果存在坐标完全相同的图标点,可以打开该属性,click事件通过graphics判断

})

map.addLayer(graphicLayer)

// 在layer上绑定监听事件

graphicLayer.on(mars3d.EventType.click, function (event) {

console.log("监听layer,单击了矢量对象", event)

})

// 加一些演示数据

addDemoGraphic1(graphicLayer)

addDemoGraphic2(graphicLayer)

addDemoGraphic3(graphicLayer)

//在此处怎么批量关闭三个闪烁

}

/**

* 释放当前地图业务的生命周期函数

* @returns {void} 无

*/

export function onUnmounted() {

map = null

graphicLayer.remove()

graphicLayer = null

}

//

function addDemoGraphic1(graphicLayer) {

const graphic = new mars3d.graphic.BillboardEntity({

position: [116.1, 31.0, 1000],

style: {

image: "img/marker/lace-blue.png",

horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM

},

attr: { remark: "示例1" }

})

graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

// 演示个性化处理graphic

initGraphicManager(graphic)

}

// 也可以在单个Graphic上做个性化管理及绑定操作

function initGraphicManager(graphic) {

// 测试 颜色闪烁

if (graphic.startFlicker) {

graphic.startFlicker({

maxAlpha: 0.5,

color: Cesium.Color.YELLOW,

onEnd: function () {

// 结束后回调

}

})

}

}

//

function addDemoGraphic2(graphicLayer) {

const graphic = new mars3d.graphic.BillboardEntity({

position: new mars3d.LngLatPoint(116.2, 31.0, 1000),

style: {

image: "img/marker/lace-red.png",

scale: 1.0,

horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

clampToGround: true,

label: { text: "鼠标移入会放大", pixelOffsetY: -50 },

// 高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用

highlight: {

scale: 1.5

}

},

attr: { remark: "示例2" }

})

graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

initGraphicManager(graphic)

}

function addDemoGraphic3(graphicLayer) {

const graphic = new mars3d.graphic.BillboardEntity({

position: new mars3d.LngLatPoint(116.3, 31.0, 1000),

style: {

image: "img/marker/lace-red.png",

scale: 1.0,

horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

clampToGround: true,

label: { text: "鼠标移入会放大", pixelOffsetY: -50 },

// 高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用

highlight: {

scale: 1.5

}

},

attr: { remark: "示例2" }

})

graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

initGraphicManager(graphic)

}

// 开始绘制

export function startDrawGraphic() {

graphicLayer.startDraw({

type: "billboard",

style: {

image: "img/marker/mark-red.png",

horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

label: {

// 不需要文字时,去掉label配置即可

text: "可以同时支持文字",

font_size: 30,

color: "#ffffff",

outline: true,

outlineColor: "#000000",

pixelOffsetY: -50

}

}

})

}

export function btnStartBounce() {

graphicLayer.eachGraphic((graphic) => {

if (graphic.startBounce) {

graphic.startBounce()

}

})

}

export function btnStartBounce2() {

graphicLayer.eachGraphic((graphic) => {

if (graphic.startBounce) {

graphic.startBounce({

autoStop: true,

step: 2,

maxHeight: 90

})

}

})

}

export function btnStopBounce() {

graphicLayer.eachGraphic((graphic) => {

if (graphic.stopBounce) {

graphic.stopBounce()

}

})

}

// 在图层绑定Popup弹窗

export function bindLayerPopup() {

graphicLayer.bindPopup(function (event) {

if (event.graphics?.length > 1) {

return `您单击了重叠图标,该区域有${event.graphics.length}个对象` // 如果存在坐标完全相同的图标点时

}

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)

}

}

}

])

}

解决方案:

复制代码
 graphicLayer.eachGraphic((graphic) => {
    if (graphic.stopFlicker) {
      graphic.stopFlicker()
    }
  })
相关推荐
careybobo24 分钟前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)1 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠4 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5