自研MapboxJs图形绘制控件,支持撤销重做功能

53 篇文章 3 订阅
36 篇文章 12 订阅

背景

最近需要做一个机遇Mapbox的绘制功能,虽然mapbox-gl-draw这个插件很好,但是不支持撤销和重做功能,于是自己封装了一个Mapbox控件,方便大家使用。主要是练习一下如何封装Mapbox的控件。实现了如下功能:

  1. 多边形绘制
  2. 撤销点
  3. 重做点
  4. 双击地图完成绘制
  5. 右键地图完成绘制

代码使用方法

  • 安装依赖
npm install gykj-map-core --save
  •  代码引用
  import {DrawAreaControl} from "gykj-map-core"
  • 使用控件 
       let control=new DrawAreaControl((res)=>{
          console.log(re)//绘制成功回调
        },err=>{
          console.log(err)//绘制失败回调
        });
        map.addControl(control, 'bottom-right');

效果

npm 地址 https://www.npmjs.com/package/gykj-map-core

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
QTableView 是 Qt 框架中的一种表格视图件,如果想要支持撤销做操作,可以在模型中添加相应的实现。以下是一个基于 C++ 的示例代码,演示如何在 QTableView 中支持撤销做操作。 首先,我们需要定义一个基于 QStandardItemModel 的自定义模型类,这个类需要继承自 QStandardItemModel,同时支持撤销做操作。在这个自定义模型类中,我们可以创建一个 QVector 存储所有的操作记录,并使用 QUndoStack 类来实现撤销做操作。 ```cpp class CustomTableModel : public QStandardItemModel { Q_OBJECT public: CustomTableModel(int rows, int columns, QObject *parent = nullptr); ~CustomTableModel(); void setData(const QModelIndex &index, const QVariant &value, int role = Qt::EditRole) override; bool undo(); bool redo(); private: QVector<QPair<QModelIndex, QVariant>> m_undoStack; QVector<QPair<QModelIndex, QVariant>> m_redoStack; QUndoStack* m_undoRedoStack; private slots: void onStackChanged(bool canUndo, bool canRedo); }; ``` 在构造函数中,我们初始化了撤销做堆栈和 QUndoStack 实例。在 setData 函数中,我们记录了每次修改的操作记录。在 undo 和 redo 函数中,我们通过使用 QUndoStack 实例的 undo 和 redo 函数实现撤销做操作。在 onStackChanged 函数中,我们更新了撤销做操作的可用性状态。 ```cpp CustomTableModel::CustomTableModel(int rows, int columns, QObject *parent) : QStandardItemModel(rows, columns, parent) { m_undoRedoStack = new QUndoStack(this); connect(m_undoRedoStack, &QUndoStack::canUndoChanged, this, &CustomTableModel::onStackChanged); connect(m_undoRedoStack, &QUndoStack::canRedoChanged, this, &CustomTableModel::onStackChanged); } CustomTableModel::~CustomTableModel() { delete m_undoRedoStack; } void CustomTableModel::setData(const QModelIndex &index, const QVariant &value, int role) { QStandardItemModel::setData(index, value, role); QPair<QModelIndex, QVariant> data(index, value); m_undoStack.append(data); m_redoStack.clear(); QUndoCommand* command = new QUndoStack::CustomUndoCommand(m_undoStack, m_redoStack, this); m_undoRedoStack->push(command); } bool CustomTableModel::undo() { if (m_undoRedoStack->canUndo()) { m_undoRedoStack->undo(); return true; } return false; } bool CustomTableModel::redo() { if (m_undoRedoStack->canRedo()) { m_undoRedoStack->redo(); return true; } return false; } void CustomTableModel::onStackChanged(bool canUndo, bool canRedo) { emit undoAvailable(canUndo); emit redoAvailable(canRedo); } ``` 最后,我们需要在窗口中创建一个 QTableView 实例,并将自定义模型类设置为它的数据模型。我们还需要为撤销做操作创建相应的槽函数,并将它们与窗口中的按钮信号连接。 ```cpp class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private: Ui::MainWindow *ui; CustomTableModel* m_model; private slots: void onUndo(); void onRedo(); }; MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); m_model = new CustomTableModel(3, 2, this); ui->tableView->setModel(m_model); connect(ui->undoButton, &QPushButton::clicked, this, &MainWindow::onUndo); connect(ui->redoButton, &QPushButton::clicked, this, &MainWindow::onRedo); } MainWindow::~MainWindow() { delete ui; } void MainWindow::onUndo() { m_model->undo(); } void MainWindow::onRedo() { m_model->redo(); } ``` 通过这个示例代码,我们可以在 QTableView 中实现撤销做操作。当用户对表格中的单元格进行修改时,可以将这个修改操作记录下来,并将操作记录添加到撤销堆栈中。当用户点击撤销按钮时,我们可以从撤销堆栈中取出最后一次操作,将其还原到表格中,并将其添加到做堆栈中。当用户点击做按钮时,我们可以从做堆栈中取出最后一次操作,并将其添加到撤销堆栈中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值