mars3d在写label标签的时候，html文本内容是调取接口，接口数据实时更新，怎样让接口数据发生变化的时候，页面数据也跟着变化
export const addCoverCustom = async ({ map }) => {
const graphicLayer = mapLayerCollection.value.custom_layer.initLayer(map);
const labels = await mapLayerCollection.value.custom_layer.formatter();
if (labels?.length) {
// 使用 Promise.all 等待所有异步操作完成
await Promise.all(
labels.map(async (label) => {
if (label.type == 1) {
const graphic = new mars3d.graphic.WallEntity({
positions: label.positions,
attr: {
id: label.properties.id,
},
style: {
closure: true,
diffHeight: 10,
materialOptions: {
image: "img/textures/fence.png",
color: '#d115d6',
count: 2,
speed: 10,
bloom: true
}
},
});
graphicLayer.addGraphic(graphic);
demo(map, graphicLayer, label);
} else {
const graphic = new mars3d.graphic.PolygonPrimitive({
positions: label.positions,
attr: {
id: label.properties.id,
},
style: {
color: label.properties.color,
opacity: 0.4,
clampToGround: true,
classificationType: Cesium.ClassificationType.BOTH,
label: {
text: label.properties.name,
clampToGround: false,
visibleDepth: false,
font_size: 16,
},
},
});
graphicLayer.addGraphic(graphic);
}
try {
const res = await getParkNum({ parkName: label.properties.name });
const data = res.data.records[0];
updateHTMLContent(label, data);
} catch (error) {
console.error(error);
}
})
);
}
};
function updateHTMLContent(label, data) {
const divElementTotal = document.getElementById('idTotal');
const divElementCurrent = document.getElementById('idCurrent');
if (divElementTotal && divElementCurrent) {
divElementTotal.innerText = data.parkNum;
divElementCurrent.innerText = data.currentnum;
}
}
const demo = (map, graphicLayer, label) => {
const idTotal = 'TotalNum';
const idCurrent = 'CurrentNum';
const graphic = new mars3d.graphic.DivGraphic({
position: label.geometry.coordinates,
stopPropagation: true,
attr: {
id: label.properties.id,
},
style: {
html:
`<div class="park-car-label">
<div class="title">${label.properties.name}</div>
<div class="content">
<div id="idTotal" style="padding-bottom: 8px;">1</div>
<div id="idCurrent">1</div>
</div>
</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100, 3999),
label: {
backgroundColor: '#000',
color: "#fff"
}
},
});
graphic.on(mars3d.EventType.click, function (event) {
if (event.graphic.attr.id) {
dataStatus.setDialog({
status: true,
type: dialogTypeEnum.park_car,
condition: {
id: event.graphic.attr.id.toString(),
parkCar: label.properties
},
});
} else {
ElMessage({
showClose: true,
message: '未关联',
type: 'warning',
offset: 50,
});
}
map.flyToGraphic(graphic, {
radius: 300,
heading: 359,
pitch: -47.2,
duration: 2,
});
});
graphicLayer.addGraphic(graphic);
};
问题内容： 在使用mars3d编写label标签时，需要通过调用接口获取HTML文本内容，并且接口数据会实时更新。想知道如何在接口数据发生变化时，使得页面数据也可以实时跟随变化同步更新。
解决方案： 1. 在页面中创建一个空的HTML元素，用于显示接口数据的内容。
<div id="dataContainer"></div>
function updateData() {
$.ajax({
url: '接口URL',
method: 'GET',
success: function(response) {
// 将接口返回的HTML文本数据更新到页面中
$('#dataContainer').html(response);
},
error: function(xhr, status, error) {
console.error('获取接口数据失败:', error);
}
});
}
// 初始化页面数据
updateData();
// 每隔一段时间更新数据
setInterval(updateData, 5000); // 5000表示5秒钟更新一次，可根据实际需求调整时间间隔
请注意替换代码中的'接口URL'为实际的接口URL。
需要引入jQuery库或其他适合的库来简化Ajax调用的操作。
如果使用的是mars3d框架提供的接口，可以根据具体场景来调用相关的mars3d方法来获取接口数据并更新页面。 例如，使用mars3d中的Ajax封装方法mars3d.util.ajax来调用接口。
mars3d.util.ajax({
url: '接口URL',
method: 'GET',
success: function(response) {
// 将接口返回的HTML文本数据更新到页面中
$('#dataContainer').html(response);
},
error: function(xhr, status, error) {
console.error('获取接口数据失败:', error);
}
});
希望以上解决方案能帮助到您，如果有任何问题，请随时向我提问。