vue使用d3实现图片的缩放、拖动、添加/删除标记等功能

想录个gif给大家看下效果，但是文章上传图像最大限制为5MB，随便一录就超大，所以就贴个图片吧：

功能描述：

要做个伪地图，支持放大、缩小、拖动，第一次进入页面回显标记点，默认不可点击添加标记，打开右上角设置支持点击添加标记点，拖动的时候标记点位置要相对于底图位置不变，鼠标移入弹窗展示信息，鼠标双击可编辑，右键面板，支持删除、编辑等功能。总结来说就是：

GDS地图集成：
1. 地图图片加载
2. 支持缩放、拖动
3. 默认不可点击添加标记，回显标记点，鼠标移入展示信息
4. 开启设置后（右上角）可点击添加标记，双击弹窗维护该标记点信息
5. 右键出现面板，包含删除、编辑按钮，编辑同双击
下面主要给大家贴源代码了，可以直接使用的哈（vue3）

安装：

pnpm add d3

pnpm add @types/d3 -D

源代码：

index.vue

<template><div class="gds-map"&g