vue 使用svg渲染地图

本人小白,看了同事代码实现的效果
实现思路:
1、找ui要到的svg图片,把其中path的值赋值过来,所有数据一起组成一个json文件
在这里插入图片描述
Json文件

{
   
    "svgArr": [{
   
            "d":"M440.9,128.9l25,16.3l9.5,32.3l9.5,4.3v6.3h7.5l13.3,7l2,8.5l24.5,9l4.4,3.3L530,222l2.9,15l11.8,7.1v12.2  l6.5,10.9l10,1l1.5,7.9l-17.5,4.6l-0.1,3.6l9.6,4.5l0.3,7.1l-11.4,5.9v6.8l-4.5,6.1l7.9,2.6l0.6,22.8h7.3l7.3,8.9l7-0.8V339  l15.8-4.8l5,5.1v12.4l-5.5,36.1l11.5,23.6v11.8l-5.3,9l-13.1,5.9l-6.3,52l-19-4.6L526,498l-25.6,10.4l-10.6-0.9l-20.5-3.8  l-48.8-15.4l-19.9-5.8l-38.4-17.5L337,445.5l-35.5-31.9c0,0-4.6-34.8-13.3-45.3l9.7-13l21.7-14l32.7,1c0,0,18.2,4,21.2,4.8  c3,0.8,11.3,2.7,11.3,2.7l7.2-10l2.7,2.8l7.3-0.3l4.2-12.5l9.3-1.5c0,0-2-8.7-3.2-9.7l8.3-13.7l0.3-13.8l-44-36.7l1.7-23.2l-4.2-6.2  l-1.5-13l5-2.5l-2-4.7l5.2-5.2c0,0,0.3-9.8,3.8-21.2c3.5-11.3,4.5-16.7,4.5-16.7l12.7-3.3c0,0,3.5-6,6.2-7.5  C410.9,149.7,440.9,128.9,440.9,128.9z",
            "gIFAG": false,
            "name": "盐田街道",
            "textX": "20",
            "textY": "100"
        },
        {
   
            "d":"M571.4,490l-19-4.6L526.2,498l-25.6,10.4l-10.6-0.9l-20.5-3.8l-48.8-15.4l-19.9-5.8l-38.4-17.5l-25.3-19.6  l-35.5-31.9c0,0-4.6-34.8-13.3-45.3h-14.5l-41.3,47.1v5.5l6,8.1l1.3,17.3l-2.9,7.1l-9.1,3.8v7l-9.2,5v5.8l-5.8,2.3l-1,21  c0,0-7.9,11.6-8.8,29.4c0,0-9.3,3.8-11,5.8s-12.6,24.9-12.6,24.9v9.3c0,0-6.1,0.6-9,1.1s-14.5,4.5-17.6,8.8s-9.9,14.9-9.9,14.9  l6,9.8c0,0,14.6,1.6,18.8,2s27.9-1.5,27.9-1.5l50.3,17.6c0,0,4.3,16.3,4.4,16.6s8.3,9.1,8.3,9.1l14.4,1.4l16-4l11.1,6.4h15.1l11.3,3  l12.7,1l0.8,12.3c0,0-4,13.8-27.3,34l7.3,11.3l-19.2,22.5l20,26.3l9.7-5.3l15.5-9.3l27-24.2L349.2,690l-2.7-8.5l0.2-8.7l5.5,0.7  l23.5,27.3l71.2-60.7l49.2,57l8.7-3c0,0,8.3,0.5,12.5,1.5c4.2,1,32.8,1,32.8,1l28.3-0.5l-89.7-102.8l-10,9.3l-6.3-6.5  c0,0,34-39.5,36.8-39.5s12-0.3,12-0.3l6.6,11.8l9.7,3.5c0,0-4.3,6.3-3.8,7.5s61.5,53.5,61.5,53.5l6.8-3.3l23.5,26  c0,0,19,4.6,20.5,4.8s2-0.4,2.4-4.6s2.9-36.3,5.5-42.8s7.4-18.1,6.9-19.3s-16.3-19.7-21.9-22c-5.7-2.3-22.3-7.3-22.3-7.3l-13-24.3  l-1.3-12.7l-10.3-7.7l-10,3l-8.7-6l6-8.1l1-9.6L571.4,490z",
            "gIFAG": false,
            "name": "深圳市盐田港保税区",
            "textX": "20",
            "textY": "50"
        },
        {
   
            "d":"M601.9,353l-12-1.3l-5.5,36.1l11.5,23.6v11.8l-5.3,9l-13.1,5.9l-6.1,52l8.7,8.8l-1,9.6l-6,8.1l8.7,6l10-3  l10.3,7.7l1.3,12.7l13,24.3l11,3.4l9,3c0,0,2.8,0.7,5.1,2.6s4.4,3.9,4.4,3.9l6.9,7.1c0,0,8.1,8.9,7.9,9.4l-1.4-22.7  c0,0-15.2-15.7-15.2-16.3s1.3-9.5,3.3-12.2c2-2.7,19.2-20.7,19.2-20.7l20-19.3l33.7-19.8l7.3,0.2l17.3,20.5l17.8-1.7l7.6-4.2  l8.3-0.2l1.1-2.9l-8.7-6l-3.2-7.1l-0.9-2.6l6.9-8.4l26.3-11.5l13,0.1l13,8.9l17.4,13.9l9.7,13.8l3.3,17.3l-5.5,11.5l20.3-4.4v-6.4  c0,0,1.5-6.1,17.1-10.1c0,0,5.6-6.1,9.4-7.9s12.9-7.5,12.9-7.5v-33.4c0,0-12.1-8.1-14.1-7.6s-22.3,9.6-23.1,9.8s-9.1,0.1-9.1,0.1  l-9.8-5.6c0,0-4.4-1-6.1,1s-2.4,4-3,4s-8.4-5-8.4-5l-0.3-17.4c0,0,5.8-12.8,11.8-12.6l0.1-15.6c0,0-4.1-5.1-3.5-7.6s2.9-8.1,12-8.3  s8.5-0.1,8.5-0.1s-0.5-17.9-5-24.5l7.4-5.3l0.1-8.1l-5.6-3.5l-0.3-3l-8.5-3.5l-2-14l-31.4-21.8l-6.6,4.5c0,0-7.5-4.5-9.8-4.5  s-5.3,1-8.3,9.3c-7.8,6.3-12.3,11-12.3,11s-6.5-4.8-8.8-4.8s-7.5,3.3-7
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用SVG制作一个横向树形结构,可以按以下步骤进行: 1. 首先,使用Vue创建一个组件,命名为Tree。 2. 在Tree组件中,使用SVG标签来绘制树形结构。SVG是一种可缩放矢量图形格式,可以通过代码来描述图形,非常适合用来绘制图形化的数据结构。 3. 在SVG标签中,使用<g>标签来组合多个图形元素,形成一个组合。 4. 使用<path>标签来绘制树形结构中的线条。可以使用<path>标签的d属性来定义绘制路径,例如M x1 y1 L x2 y2表示从点(x1,y1)到点(x2,y2)绘制一条直线。 5. 使用<circle>标签来绘制树形结构中的节点。可以使用<circle>标签的cx和cy属性来定义圆心坐标,r属性来定义半径。 6. 在Tree组件中,使用props属性来接收传入的树形结构数据。可以使用递归的方式,将树形结构数据中的每个节点都绘制出来。 下面是一个简单的示例代码: ```html <template> <svg> <g> <path :d="line.path" stroke="black" fill="none" /> <circle :cx="node.x" :cy="node.y" :r="node.r" fill="red" /> <text :x="node.x" :y="node.y">{{ node.value }}</text> </g> <tree v-for="child in node.children" :node="child" :key="child.id" /> </svg> </template> <script> export default { name: "Tree", props: { node: { type: Object, required: true, }, }, computed: { line() { const { x, y, width, height } = this.node; const path = `M ${x} ${y + height / 2} H ${x + width}`; return { path }; }, }, components: { Tree, }, }; </script> ``` 在这个示例中,我们定义了一个Tree组件,接收一个node属性作为参数。每个Tree组件都会绘制一个节点和一条线条,然后递归地绘制子节点。在计算属性line中,我们使用节点的位置和尺寸信息来计算线条的路径。在模板中,我们使用<g>标签来组合多个图形元素,使用v-for指令来遍历子节点,并递归地渲染Tree组件。 当我们使用这个Tree组件时,可以将树形结构数据作为参数传入: ```html <template> <tree :node="treeData" /> </template> <script> import Tree from "./Tree.vue"; export default { name: "App", components: { Tree, }, data() { return { treeData: { id: 1, value: "root", children: [ { id: 2, value: "child 1", children: [ { id: 4, value: "grandchild 1", children: [], }, { id: 5, value: "grandchild 2", children: [], }, ], }, { id: 3, value: "child 2", children: [], }, ], }, }; }, }; </script> ``` 这样就可以在Vue使用SVG绘制出一个横向树形结构了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值