如何为绘制的 GeoJson 特征分配唯一 ID，然后根据其 ID 将其删除？

Question

我正在尝试为在此Google Map 上绘制的每个功能分配一个唯一 ID，然后使用rightclick 事件删除被点击的功能。目前所有功能都被删除，这是一个问题。

将特征添加到集合后，我会尝试分配唯一 ID：

var uniqueID = function() {
  return ++currentID;
}
dataLayer.addListener('addfeature', savePolygon, function(event) {
    event.feature.setProperty('featureID', uniqueID);
});

然后在rightclick 事件中，我想删除被点击的功能。我假设您需要为此步骤提供唯一的 ID，因此是前面的步骤。

dataLayer.addListener('rightclick', function() {
    dataLayer.forEach(function(feature) {
        dataLayer.remove(feature);
        localStorage.removeItem('geoData');
    });
});

完整代码如下。

JS：

var map;
var currentID = 0;
var uniqueID = function() {
  return ++currentID;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 4,
    // only show roadmap type of map, and disable ability to switch to other type
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  });

  map.data.setControls(['Polygon']);
  map.data.setStyle({
    editable: true,
    draggable: true
  });
  bindDataLayerListeners(map.data);

  //load saved data
  loadPolygons(map);
}


// Apply listeners to refresh the GeoJson display on a given data layer.
function bindDataLayerListeners(dataLayer) {
  dataLayer.addListener('addfeature', savePolygon, function(event) {
    event.feature.setProperty('featureID', uniqueID);
  });

  dataLayer.addListener('rightclick', function() {
    dataLayer.forEach(function(feature) {
      dataLayer.remove(feature);
      localStorage.removeItem('geoData');
    });
  });

  dataLayer.addListener('setgeometry', savePolygon);
}

function loadPolygons(map) {
  var data = JSON.parse(localStorage.getItem('geoData'));

  map.data.forEach(function(f) {
    map.data.remove(f);
  });
  map.data.addGeoJson(data)
}



function savePolygon() {
  map.data.toGeoJson(function(json) {
    localStorage.setItem('geoData', JSON.stringify(json));
  });

}
initMap();

原始来源：我从this thread 中的 JSFiddle 构建了这个示例。

Answer 1

你的addfeature 监听器错误，因为addListener 只接受一个回调函数，所以你需要在一个匿名回调函数中调用e.feature.setProperty 然后savePolygon

注意，你有 event.feature.setProperty('featureID', uniqueID); - 它必须是 event.feature.setProperty('featureID', uniqueID());

    dataLayer.addListener('addfeature', function(event) {
        event.feature.setProperty('featureID', uniqueID());
        savePolygon(event);
    });

然后，在rightclick lsitener 中，您可以简单地获取geoData - 过滤掉点击的项目，保存geoData 然后dataLayer.remove(e.feature);

    dataLayer.addListener('rightclick', function(e) {
        var data = JSON.parse(localStorage.getItem('geoData'));
        data.features = data.features.filter(function(feature) {
            return feature.properties.featureID !== e.feature.getProperty('featureID');
        });
        localStorage.setItem('geoData', JSON.stringify(data));
        dataLayer.remove(e.feature);
    });

working fiddle