补充说明：

当参与层级控制的元素是点型元素时，是无法参与ZIndex层级控制的，此时可以换个解决方案

1.给不同的高度值实现，元素间的层级控制覆盖

import * as mars3d from "mars3d"export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {scene: {center: { lat: 24.688611, lng: 119.260277, alt: 1673759, heading: 348, pitch: -69 }}
}// 初始化地图业务，生命周期钩子函数（必须）,框架在地图初始化完成后自动调用该函数
export function onMounted(mapInstance) {map = mapInstance // 记录mapaddDemoLayer1()addDemoLayer2()
}async function addDemoLayer1() {graphicLayer1 = new mars3d.layer.GraphicLayer({})map.addLayer(graphicLayer1)const res = await mars3d.Util.fetchJson({ url: "https://data.mars3d.cn/file/apidemo/mudi.json" })for (let i = 0; i < 50; i++) {const item = res.data[i]const label = new mars3d.graphic.CircleEntity({position: [item.lng, item.lat,200],style: {radius: 480.0,materialType: mars3d.MaterialType.Water,materialOptions: {normalMap: "https://data.mars3d.cn/img/textures/waterNormals.jpg", // 水正常扰动的法线图frequency: 80.0, // 控制波数的数字。animationSpeed: 0.02, // 控制水的动画速度的数字。amplitude: 5.0, // 控制水波振幅的数字。specularIntensity: 0.8, // 控制镜面反射强度的数字。baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4blendColor: "#006ab4" // 从水中混合到非水域时使用的rgba颜色对象。}},attr: item,flyTo: true})graphicLayer1.addGraphic(label)}
}function addDemoLayer2() {const singleDigitPins = {}// 创建矢量数据图层（业务数据图层）graphicLayer = new mars3d.layer.BusineDataLayer({url: "https://data.mars3d.cn/file/apidemo/mudi.json",dataColumn: "data", // 数据接口中对应列表所在的取值字段名lngColumn: "lng",latColumn: "lat",altColumn: "z",// 点的聚合配置cluster: {enabled: true,pixelRange: 20,image: async function (count, result) {const key = "type1-" + count // 唯一标识，不同图层需要设置不一样let image = singleDigitPins[key]if (image) {return image // 当前页面变量有记录}image = await localforage.getItem(key)if (image) {singleDigitPins[key] = imagereturn image // 浏览器客户端缓存有记录}image = await getClusterImage(count) // 生成图片singleDigitPins[key] = image // 记录到当前页面变量，未刷新页面时可直接使用localforage.setItem(key, image) // 记录到浏览器客户端缓存，刷新页面后也可以继续复用return image}},symbol: {type: "billboard",styleOptions: {image: "https://data.mars3d.cn/img/marker/mark-blue.png",width: 25,height: 34, // billboard聚合必须有width、heighthorizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 5000000, 0.3),label: {text: "{text}",font_size: 19,color: Cesium.Color.AZURE,outline: true,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(10, 0), // 偏移量distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 80000)}}}})map.addLayer(graphicLayer)bindLayerEvent(graphicLayer)
}
function bindLayerEvent() {graphicLayer.on(mars3d.EventType.clusterStop, function (event) {console.log("聚合发生了变化，并渲染完成", event)})// 单击事件graphicLayer.on(mars3d.EventType.click, function (event) {console.log("你单击了", event)if (map.camera.positionCartographic.height > 90000) {const graphic = event.graphic// graphic.closePopup()if (graphic?.cluster) {// 单击了聚合的点console.log("单击了聚合的点", graphic.graphics)} else {// 单击了具体的点对象const position = graphic.positionShowmap.flyToPoint(position, {radius: 5000, // 距离目标点的距离duration: 4,complete: function (e) {// 飞行完成回调方法// graphic.openPopup()}})}}})graphicLayer.bindPopup(function (event) {if (event.graphic?.cluster) {const graphics = event.graphic.graphics // 对应的grpahic数组，可以自定义显示if (graphics) {const names = []for (let index = 0; index < graphics.length; index++) {names.push(graphics[index].attr.text)}const inthtml = `单击了聚合点(${graphics.length}个):<br/>${names.join(",")}`return inthtml}}const item = event.graphic?.attrif (!item) {return false}const inthtml = `<table style="width: auto;"><tr><th scope="col" colspan="2" style="text-align:center;font-size:15px;">${item.text} </th></tr><tr><td>省：</td><td>${item.province}</td></tr><tr><td>市：</td> <td>${item.city}</td></tr><tr><td>县/区：</td> <td>${item.district}</td></tr><tr><td>地址：</td> <td>${item.address}</td></tr><tr><td>视频：</td> <td><video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video></td></tr></table>`return inthtml})
}// 生成聚合图标，支持异步
async function getClusterImage(count) {let colorInif (count < 10) {colorIn = "rgba(110, 204, 57, 0.6)"} else if (count < 100) {colorIn = "rgba(240, 194, 12,  0.6)"} else {colorIn = "rgba(241, 128, 23,  0.6)"}const radius = 40const thisSize = radius * 2const circleCanvas = document.createElement("canvas")circleCanvas.width = thisSizecircleCanvas.height = thisSizeconst circleCtx = circleCanvas.getContext("2d", { willReadFrequently: true })circleCtx.fillStyle = "#ffffff00"circleCtx.globalAlpha = 0.0circleCtx.fillRect(0, 0, thisSize, thisSize)// 圆形底色circleCtx.globalAlpha = 1.0circleCtx.beginPath()circleCtx.arc(radius, radius, radius, 0, Math.PI * 2, true)circleCtx.closePath()circleCtx.fillStyle = colorIncircleCtx.fill()// 数字文字const text = count + "个"circleCtx.font = radius * 0.6 + "px bold normal" // 设置字体circleCtx.fillStyle = "#ffffff" // 设置颜色circleCtx.textAlign = "center" // 设置水平对齐方式circleCtx.textBaseline = "middle" // 设置垂直对齐方式circleCtx.fillText(text, radius, radius) // 绘制文字（参数：要写的字，x坐标，y坐标）return circleCanvas.toDataURL("image/png") // getImage方法返回任意canvas的图片即可
}// 释放当前地图业务的生命周期函数,具体项目中时必须写onMounted的反向操作（如解绑事件、对象销毁、变量置空）
export function onUnmounted() {graphicLayer.remove()graphicLayer = nullmap = null
}// 计算贴地高度示例代码，可以将获取到的高度更新到数据库内，后续不用重复计算。
export function getDataSurfaceHeight() {if (graphicLayer.length === 0) {globalMsg("数据尚未加载成功！")return}showLoading()// 对图层内的数据做贴地运算,自动得到贴地高度graphicLayer.autoSurfaceHeight({ exact: true }).then((graphics) => {hideLoading()const arr = []for (let i = 0, len = graphics.length; i < len; i++) {const graphic = graphics[i]const point = graphic.pointarr.push({...graphic.attr,lat: point.lat,lng: point.lng,z: point.alt})}mars3d.Util.downloadFile("point.json", JSON.stringify({ data: arr }))})
}export function enabledAggressive(val) {graphicLayer.clusterEnabled = val
}export function layerShowChange(val) {graphicLayer.show = val
}

覆盖效果