mapbox 点击图标打开弹窗， 弹窗内容是个组件，点击图标请求接口返回的数据以键值对的形式展示在弹窗里，具体实现代码

好的，这是一个比较复杂的需求，需要分步骤来实现。首先，我们需要在 Mapbox 中添加一个点击事件，来响应用户点击图标的操作。代码如下：

map.on('click', 'icon-layer', function(e) {
  // 在这里处理点击图标的逻辑
});

其中，`icon-layer` 是我们添加图标的图层名称，需要根据实际情况进行调整。

接下来，我们需要在点击事件中创建一个弹窗，并将其内容设置为一个自定义组件。代码如下：

map.on('click', 'icon-layer', function(e) {
  var popup = new mapboxgl.Popup()
    .setLngLat(e.lngLat)
    .setDOMContent(createPopupContent())
    .addTo(map);
});

function createPopupContent() {
  var popupContent = document.createElement('div');
  // 在这里创建弹窗内容的 DOM 元素，并添加到 popupContent 中
  return popupContent;
}

在 `createPopupContent()` 函数中，我们可以创建一个包含需要显示的数据的 DOM 元素，并将其返回。具体的数据请求和处理逻辑应该在这个函数中进行。

最后，我们需要在 `createPopupContent()` 函数中请求接口，并将返回的数据以键值对的形式展示在弹窗中。代码如下：

function createPopupContent() {
  var popupContent = document.createElement('div');

  // 发送数据请求
  fetch('http://example.com/data')
    .then(response => response.json())
    .then(data => {
      // 将数据以键值对的形式添加到 popupContent 中
      for (var key in data) {
        var row = document.createElement('div');
        row.innerHTML = '<strong>' + key + ':</strong> ' + data[key];
        popupContent.appendChild(row);
      }
    });

  return popupContent;
}

这样，点击图标就会弹出一个包含请求到的数据的弹窗，数据以键值对的形式展示。需要注意的是，这只是一个简单的示例，实际的代码需要根据具体的需求进行调整和扩展。