单击 WMS 时的数据重复

Question

当用户第一次点击地图时，可以看到相关信息。但是如果他再次点击，信息就会重复，如下图所示。

我希望旧信息能被最新信息替代。为了处理这个请求，我开发了以下功能：

function getElementInfo(elementID, layerName, layerTitle){
  map.on('singleclick', function (event) {
    var viewResolution = view.getResolution();
    var coordinates = event.coordinate;
    var epsg = 'EPSG:3857';
    var params = {
        'INFO_FORMAT': 'application/json'
      };
    var url = layerName.getSource().getFeatureInfoUrl(
      coordinates,
      viewResolution,
      epsg,
      params,
    );

    async function getFeatureProperties() {
      try {
        var response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error!\n Status: ${response.status}\n Type: ${response.type}\n URL: ${response.url}`);
        } else {
          var data = await response.text();
          var json = JSON.parse(data).features[0].properties;

          var tableHeadContents = '<thead>'
          + '</thead>';
          var tableHead = $(tableHeadContents).attr("id","thead");
          $("#"+elementID).append(tableHead);
          var tableBodyContents = '<tbody></tbody>';
          var tableBody = $(tableBodyContents).attr("id","tbody");
          $("#"+elementID).append(tableBody);
          for (items in json) {
            key = items;
            value = json[items];
            tableRow = '<tr><td class="td-head">' + key + '</td><td class="td-body">' + value + '</td></tr>';
            $("tbody").append(tableRow);
          }

        }
      } catch (e) {
        console.log(e);
      }
    }
    getFeatureProperties();
  });
};

我对 Javascript 没有很强的技能，可能这里有错误，但我看不到。

我调用函数只是在 TileWMS:

之后添加它

getElementInfo('onclickinfo35', wms35, 'NDVI Campania 20150807');

并且信息出现在一个简单的 table:

中

<table id="onclickinfo35"></table>

Answer 1

为什么每次点击你的 table 中的 values/rows 越来越多，是因为你在添加数据之前没有清除 table。

您需要在 $("#"+elementID).append(tableHead);

之前调用 $("#"+elementID).html();

单击 WMS 时的数据重复

Data duplication on click on the WMS

javascript

jquery

openlayers