react-map-gl-draw addFeatures 创建重复项

如何解决react-map-gl-draw addFeatures 创建重复项

描述问题 当特征被删除并添加新特征以更新顶点时。新特征创建了两次。每次都重复这个循环。函数deleteVertex有这个问题的代码。

实际结果 添加了新的重复功能。

预期结果 只应创建 1 个新功能。

重现步骤 添加一个功能。删除 Feature 任何 1 个坐标索引。删除旧功能。使用 addFeatures 添加这个新的修改版本的 Feature。

问题另外我想知道是否有任何简单的方法来添加或删除顶点。

const MapOverLay = ({
  type,viewport,setViewport,save,close,prevIoUsFeatures,defaultviewPort,}) => {

  const editorRef = useRef(null);
  const featureRef = useRef(null);
  const locateIconRef = useRef(false);
  const [prevIoUsFeature,setPrevIoUsFeature] = useState(prevIoUsFeatures);
  const [mapData,setMapData] = useState({
    editor: {
      type: prevIoUsFeatures.length ? 'Editing' : '',mode: prevIoUsFeatures.length ? new EditingMode() : null,selectedFeatureIndex: null,},});



  const onSelect = map => {
    if (map.selectedEditHandleIndex !== null) {
      featureRef.current = {
        type: 'selectedEditHandleIndex',index: map.selectedEditHandleIndex,featureIndex: map.selectedFeatureIndex,};
    }
    else {
      featureRef.current = {
        type: 'selectedFeatureIndex',index: map.selectedFeatureIndex,};
    }
  };

  const onUpdate = ({ editType,data }) => {
    if (editType === 'addFeature') {
      const temp_data = makeClone(mapData);
      temp_data.editor.type = 'Editing';
      temp_data.editor.mode = new EditingMode();
      setMapData(temp_data);
    }
    if (prevIoUsFeatures.length) {
      setPrevIoUsFeature(data);
    }
  };

  const deleteVertex = () => {
    const feature = editorRef.current.getFeatures()[0];
    if (feature.geometry.coordinates[0].length !== 2) {
      feature.geometry.coordinates[0].splice(featureRef.current.index,1);
      editorRef.current.deleteFeatures(featureRef.current.featureIndex);
      editorRef.current.addFeatures(feature);
      console.log('Delete');
    }
    else {
      editorRef.current.deleteFeatures(featureRef.current.featureIndex);
    }
    featureRef.current = null;
  };

  // console.log(editorRef.current);

  const deleteFeature = () => {
    if (prevIoUsFeature.length) {
      setPrevIoUsFeature([]);
    }
    else {
      editorRef.current.deleteFeatures(featureRef.current.index);
    }
    save([]);
  };

  const onDelete = () => {
    if (featureRef.current !== null) {
      switch (featureRef.current.type) {
        case 'selectedEditHandleIndex':
          deleteVertex();
          return;
        case 'selectedFeatureIndex':
          deleteFeature();
          return;
        default:
          break;
      }
    }
  };


  const onSave = map => {
    save(map.getFeatures());
  };

  const getDrawModeStyle = () => {
    switch (type) {
      case 'polygon':
        return style.polygon;

      case 'Point':
        return style.point;

    }
  };

  const getDrawModepressedStyle = () => {
    switch (type) {
      case 'polygon':
        return style.pressed_polygon;

      case 'Point':
        return style.pressed_point;

    }
  };

  const getDrawMode = () => {
    switch (type) {
      case 'polygon':
        return new DrawpolygonMode();

      case 'Point':
        return new DrawPointMode();

    }
  };

  const onToolClick = () => {
    if (editorRef.current.getFeatures().length === 0) {
      const temp_data = makeClone(mapData);
      if (type === temp_data.editor.type) {
        temp_data.editor.type = '';
        temp_data.editor.mode = null;
        setMapData(temp_data);
      }
      else {
        temp_data.editor.type = type;
        temp_data.editor.mode = getDrawMode();
        setMapData(temp_data);
      }
    }
  };

  const locate = map => {
    locateIconRef.current = true;
    const features = map.getFeatures();
    if (features.length) {
      const center = centerOfMass(features[0]);
      setViewport(prevstate => ({
        ...prevstate,zoom: 10,longitude: center.geometry.coordinates[0],latitude: center.geometry.coordinates[1],}));
    }
    else {
      defaultviewPort();
    }
  };

  const viewPortChangeFromMap = nextViewport => {
    locateIconRef.current = false;
    setViewport(nextViewport);
  };

  const _renderDrawTools = () => {
    // copy from mapBox
    return (
      <>
        <div className='mapBoxgl-ctrl-top-left'>
          <div className={['mapBoxgl-ctrl-group mapBoxgl-ctrl',style.navigation_group_top_left].join(' ')}>
            <button
              className="mapBox-gl-draw_ctrl-draw-btn"
              title="Save"
              onClick={() => onSave(editorRef.current)}
            />
            <button
              id={getDrawModeStyle()}
              className={
                [
                  'mapBox-gl-draw_ctrl-draw-btn mapBox-gl-draw_polygon',mapData.editor.type === type ? getDrawModepressedStyle() : '',].join(' ')
              }
              title="Select"
              onClick={() => onToolClick()}
            />
            <button
              className="mapBox-gl-draw_ctrl-draw-btn mapBox-gl-draw_trash"
              title="Remove"
              onClick={onDelete}
            />
          </div>
        </div>
        <div className='mapBoxgl-ctrl-top-right'>
          <div className={['mapBoxgl-ctrl-group mapBoxgl-ctrl',style.navigation_group_top_right].join(' ')}>
            <button
              className="mapBox-gl-draw_ctrl-draw-btn"
              title="Close"
              onClick={close}
            />
          </div>
        </div>
        <div className='mapBoxgl-ctrl-bottom-right'>
          <div className={['mapBoxgl-ctrl-group mapBoxgl-ctrl',style.navigation_group_bottom_right].join(' ')}>
            <button
              className="mapBox-gl-draw_ctrl-draw-btn"
              title="Focus"
              onClick={() => locate(editorRef.current)}
            />
          </div>
        </div>
      </>
    );
  };

  return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapBox://styles/giddyops/ckips5wdw61xb17qs3eorsoj9"
      mapBoxApiAccesstoken={MAPBox_TOKEN}
      onViewportChange={viewPortChangeFromMap}
      attributionControl={false}
      transitionDuration={1000}
      transitionInterpolator={locateIconRef.current ? new FlyToInterpolator() : null}
    >
      <Editor
        ref={editorRef}
        mode={mapData.editor.mode}
        clickRadius={12}
        features={prevIoUsFeature.length ? prevIoUsFeature : null}
        onSelect={onSelect}
        onUpdate={onUpdate}
        editHandleShape={'circle'}
        featureStyle={getFeatureStyle}
        editHandleStyle={getEditHandleStyle}
        onClick={e => console.log(e)}
      />
      {_renderDrawTools()}
    </ReactMapGL>
  );
};

解决方法

我已经查看了您的代码，发现可能是删除功能在添加功能后完成删除的问题。您可以通过进行以下更改来解决此问题：

使 deleteVertex 函数异步。
克隆第一行中的功能。
等待 editorRef.current.deleteFeatures(featureRef.current.featureIndex);