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

Question

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

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

预期结果 只应创建 1 个新特征。

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

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

代码

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

Answer 1

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

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

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

react-map-gl-draw addFeatures creating duplicates

uber-api

react-map-gl