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