vue使用d3实现图片的缩放、拖动、添加/删除标记等功能(完整版前端+后端)

上一篇vue使用d3实现图片的缩放、拖动、添加/删除标记等功能（demo）已经有写该功能的demo了哈，自己玩自己研究看那一篇也是可以的，但真正用起来的时候会发现很多问题。

上一篇主要的问题是坐标不准，就是添加标记存在数据库后，下次进来回显的时候坐标不对，因为每个人的电脑分辨率、浏览器缩放啥的都不一样，上一篇存的是我们当前点击的相对容器的真实坐标，分辨率不一样的话，容器的宽高会变化，但是我们的坐标存的是死的，所以会出现坐标不准。

还些问题是换成Edge浏览器后底图没填满、进行缩放时图片的也会同等的逆向缩放，但是！它不是围绕中心缩放的，所以在缩放的时候图片的中心点位置也会发生变化。

所以这篇是全部解决以上问题。这篇就是完整真正用起来的代码了，不只是前端代码哈，也有完整的后端代码，前端也进行联调了。

所以接下来就直接贴代码了：

前端

安装：

pnpm add d3

pnpm add @types/d3 -D