【mars3d】 graphic.bindPopup(inthtml).openPopup()无需单击小车，即可在地图上自动激活弹窗的效果。

实现效果：new mars3d.graphic.FixedRoute({无需单击小车，即可在地图上实现默认打开弹窗的激活效果。↓↓↓↓↓↓↓↓

相关链接说明：

1.popup的示例完全开源，可参考：功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

2.绑定的矢量数据上的弹框通过代码默认激活打开参考：功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

3.实现逻辑：在该矢量数据上bindPopup()，bindPopup之后再该小车数据上openPopup()

4.api说明：

BaseGraphic - V3.7.0 - Mars3D API文档

BaseGraphic - V3.7.0 - Mars3D API文档

相关演示代码：

import * as mars3d from "mars3d"

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

export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中

let graphicLayer

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）

export const mapOptions = {

? scene: {

? ? center: { lat: 30.836861, lng: 116.044673, alt: 1395, heading: 14, pitch: -42 }

? },

? control: {

? ? clockAnimate: true, // 时钟动画控制(左下角)

? ? timeline: true, // 是否显示时间线控件

? ? compass: { top: "10px", left: "5px" }

? }

}

/**

?* 初始化地图业务，生命周期钩子函数（必须）

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

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

?* @returns {void} 无

?*/

export function onMounted(mapInstance) {

? map = mapInstance // 记录map

? map.toolbar.style.bottom = "55px" // 修改toolbar控件的样式

? // 创建矢量数据图层

? graphicLayer = new mars3d.layer.GraphicLayer()

? map.addLayer(graphicLayer)

? // 加载完成在加载小车，否则地形未加载完成，小车会处于地下

? map.on(mars3d.EventType.load, function (event) {

? ? addGraphicLayer()

? })

}

/**

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

?* @returns {void} 无

?*/

export function onUnmounted() {

? map = null

}

function addGraphicLayer() {

? const fixedRoute = new mars3d.graphic.FixedRoute({

? ? name: "贴地表表面漫游",

? ? speed: 160,

? ? positions: [

? ? ? [116.043233, 30.845286, 392.48],

? ? ? [116.046833, 30.846863, 411.33],

? ? ? [116.052137, 30.848801, 439.45],

? ? ? [116.060838, 30.850918, 442.91],

? ? ? [116.069013, 30.852035, 435.14],

? ? ? [116.18739, 30.854441, 244.53],

? ? ? [116.205214, 30.859332, 300.96]

? ? ],

? ? clockLoop: false, // 是否循环播放

? ? camera: {

? ? ? type: "gs",

? ? ? pitch: -30,

? ? ? radius: 500

? ? },

? ? // model: {

? ? // ? show: true,

? ? // ? url: '//data.mars3d.cn/gltf/mars/qiche.gltf',

? ? // ? scale: 0.2,

? ? // ? minimumPixelSize: 50,

? ? // },

? ? model: {

? ? ? url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf",

? ? ? heading: 90,

? ? ? mergeOrientation: true, // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值

? ? ? minimumPixelSize: 50

? ? },

? ? polyline: {

? ? ? color: "#ffff00",

? ? ? width: 3

? ? }

? })

? graphicLayer.addGraphic(fixedRoute)

? // 绑定popup

? bindPopup(fixedRoute)

? fixedRoute.on(mars3d.EventType.start, function (event) {

? ? console.log("漫游开始start")

? })

? fixedRoute.on(mars3d.EventType.end, function (event) {

? ? console.log("漫游结束end")

? })

? // ui面板信息展示

? fixedRoute.on(mars3d.EventType.change, (event) => {

? ? // const popup = event.graphic.getPopup()

? ? // const container = popup?.container // popup对应的DOM

? ? // console.log("漫游change", event)

? ? throttled(eventTarget.fire("roamLineChange", event), 500)

? })

? map.on(mars3d.EventType.keydown, function (event) {

? ? // 空格 切换暂停/继续

? ? if (event.keyCode === 32) {

? ? ? if (fixedRoute.isPause) {

? ? ? ? fixedRoute.proceed()

? ? ? } else {

? ? ? ? fixedRoute.pause()

? ? ? }

? ? }

? })

? // 不贴地时，直接开始

? // startFly(fixedRoute)

? // 需要计算贴地点时，异步计算完成贴地后再启动

? showLoading()

? fixedRoute.autoSurfaceHeight().then(function (e) {

? ? hideLoading()

? ? startFly(fixedRoute)

? })

}

function startFly(fixedRoute) {

? fixedRoute.start()

? fixedRoute.openPopup() // 显示popup

? addParticleSystem(fixedRoute.property)

}

function bindPopup(fixedRoute) {

? fixedRoute.bindPopup(

? ? `<div style="width: 200px">

? ? ? <div>总 距 离：<span id="lblAllLen"> </span></div>

? ? ? <div>总 时 间：<span id="lblAllTime"> </span></div>

? ? ? <div>开始时间：<span id="lblStartTime"> </span></div>

? ? ? <div>剩余时间：<span id="lblRemainTime"> </span></div>

? ? ? <div>剩余距离：<span id="lblRemainLen"> </span></div>

? ? </div>`,

? ? { closeOnClick: false }

? )

? // 刷新局部DOM,不影响popup面板的其他控件操作

? fixedRoute.on(mars3d.EventType.postRender, function (event) {

? ? const container = event.container // popup对应的DOM

? ? const params = fixedRoute?.info

? ? if (!params) {

? ? ? return

? ? }

? ? const lblAllLen = container.querySelector("#lblAllLen")

? ? if (lblAllLen) {

? ? ? lblAllLen.innerHTML = mars3d.MeasureUtil.formatDistance(params.distance_all)

? ? }

? ? const lblAllTime = container.querySelector("#lblAllTime")

? ? if (lblAllTime) {

? ? ? lblAllTime.innerHTML = mars3d.Util.formatTime(params.second_all / map.clock.multiplier)

? ? }

? ? const lblStartTime = container.querySelector("#lblStartTime")

? ? if (lblStartTime) {

? ? ? lblStartTime.innerHTML = mars3d.Util.formatDate(Cesium.JulianDate.toDate(fixedRoute.startTime), "yyyy-M-d HH:mm:ss")

? ? }

? ? const lblRemainTime = container.querySelector("#lblRemainTime")

? ? if (lblRemainTime) {

? ? ? lblRemainTime.innerHTML = mars3d.Util.formatTime((params.second_all - params.second) / map.clock.multiplier)

? ? }

? ? const lblRemainLen = container.querySelector("#lblRemainLen")

? ? if (lblRemainLen) {

? ? ? lblRemainLen.innerHTML = mars3d.MeasureUtil.formatDistance(params.distance_all - params.distance) || "完成"

? ? }

? })

}

// ?添加尾气粒子效果

function addParticleSystem(property) {

? const particleSystem = new mars3d.graphic.ParticleSystem({

? ? position: property,

? ? style: {

? ? ? image: "./img/particle/smoke.png",

? ? ? particleSize: 12, // 粒子大小（单位：像素）

? ? ? emissionRate: 20.0, // 发射速率 （单位：次/秒）

? ? ? pitch: 40, // 俯仰角

? ? ? maxHeight: 1000, // 超出该高度后不显示粒子效果

? ? ? startColor: Cesium.Color.GREY.withAlpha(0.7), // 开始颜色

? ? ? endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色

? ? ? startScale: 1.0, // ?开始比例（单位：相对于imageSize大小的倍数）

? ? ? endScale: 5.0, // 结束比例（单位：相对于imageSize大小的倍数）

? ? ? minimumSpeed: 1.0, // 最小速度(米/秒)

? ? ? maximumSpeed: 4.0 // 最大速度(米/秒)

? ? },

? ? attr: { remark: "车辆尾气" }

? })

? graphicLayer.addGraphic(particleSystem)

}

// ui层使用

export const formatDistance = mars3d.MeasureUtil.formatDistance

export const formatTime = mars3d.Util.formatTime

// 节流

function throttled(fn, delay) {

? let timer = null

? let starttime = Date.now()

? return function () {

? ? const curTime = Date.now() // 当前时间

? ? const remaining = delay - (curTime - starttime)

? ? // eslint-disable-next-line @typescript-eslint/no-this-alias

? ? const context = this

? ? // eslint-disable-next-line prefer-rest-params

? ? const args = arguments

? ? clearTimeout(timer)

? ? if (remaining <= 0) {

? ? ? fn.apply(context, args)

? ? ? starttime = Date.now()

? ? } else {

? ? ? timer = setTimeout(fn, remaining)

? ? }

? }

}

备注说明：

1.直接通过new mars3d.graphic.ModelEntity({相关矢量上绑定再激活也可以，关键代码：

? graphic.bindPopup(inthtml).openPopup()

实现链接：

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

实现代码参考：

function addDemoGraphic1(graphicLayer) {

? const graphic = new mars3d.graphic.ModelEntity({

? ? name: "警车",

? ? position: [116.346929, 30.861947, 401.34],

? ? style: {

? ? ? url: "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf",

? ? ? scale: 20,

? ? ? minimumPixelSize: 50,

? ? ? heading: 90,

? ? ? distanceDisplayCondition: true,

? ? ? distanceDisplayCondition_near: 0,

? ? ? distanceDisplayCondition_far: 10000,

? ? ? distanceDisplayPoint: {

? ? ? ? // 当视角距离超过一定距离(distanceDisplayCondition_far定义的) 后显示为点对象的样式

? ? ? ? color: "#00ff00",

? ? ? ? pixelSize: 8

? ? ? },

? ? ? label: {

? ? ? ? text: "我是原始的",

? ? ? ? font_size: 18,

? ? ? ? color: "#ffffff",

? ? ? ? pixelOffsetY: -50,

? ? ? ? distanceDisplayCondition: true,

? ? ? ? distanceDisplayCondition_far: 10000,

? ? ? ? distanceDisplayCondition_near: 0

? ? ? }

? ? },

? ? attr: { remark: "示例1" }

? })

? graphicLayer.addGraphic(graphic)

? // 演示个性化处理graphic

? initGraphicManager(graphic)

}

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

function initGraphicManager(graphic) {

? const inthtml = `<table style="width: auto;">

? ? ? ? ? ? <tr>

? ? ? ? ? ? ? <th scope="col" colspan="2" style="text-align:center;font-size:15px;">我是graphic上绑定的Popup </th>

? ? ? ? ? ? </tr>

? ? ? ? ? ? <tr>

? ? ? ? ? ? ? <td>提示：</td>

? ? ? ? ? ? ? <td>这只是测试信息，可以任意html</td>

? ? ? ? ? ? </tr>

? ? ? ? ? </table>`

? graphic.bindPopup(inthtml).openPopup()

?

}