mars3d在写label标签的时候

Question

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);
  };

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇文章讲的很详细，请看：Mars3D加载大量Label实体时卡顿的一种解决方法
• 以下回答来自chatgpt:

  问题内容： 在使用mars3d编写label标签时，需要通过调用接口获取HTML文本内容，并且接口数据会实时更新。想知道如何在接口数据发生变化时，使得页面数据也可以实时跟随变化同步更新。

  解决方案： 1. 在页面中创建一个空的HTML元素，用于显示接口数据的内容。

  <div id="dataContainer"></div>
  

  1. 使用JavaScript代码，通过Ajax调用接口获取HTML文本数据，并将数据更新到页面中。

  function updateData() {
    $.ajax({
      url: '接口URL',
      method: 'GET',
      success: function(response) {
        // 将接口返回的HTML文本数据更新到页面中
        $('#dataContainer').html(response);
      },
      error: function(xhr, status, error) {
        console.error('获取接口数据失败:', error);
      }
    });
  }
  

  1. 调用上述的updateData函数来初始化页面数据，并且使用定时器来周期性地更新数据。

  // 初始化页面数据
  updateData();
  
  // 每隔一段时间更新数据
  setInterval(updateData, 5000); // 5000表示5秒钟更新一次，可根据实际需求调整时间间隔
  

  1. 运行上述代码，即可实现当接口数据发生变化时，页面数据会自动同步更新。

  请注意替换代码中的'接口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);
    }
  });
  

  希望以上解决方案能帮助到您，如果有任何问题，请随时向我提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^