Question

我甚至不确定如何解释这一点。

我有一个JPG格式的楼层布局，我想让用户使用mouseOver或点击地图的不同区域来动态获取有关它的信息。为了使地图的不同区域具有交互性，我想我可以在其顶部/后面覆盖动态SVG网格，这样，我就可以将动态数据分配给网格坐标。

我遇到了实现此问题的问题，我无法让网格和图像相互调整大小。此外，由于SVG网格是动态的，当图像较大时，默认情况下，我的网格有更多的线条，在放大/缩小时会抛出坐标。

是否需要生成匹配的固定网格（例如，20x10）并将其覆盖到图像上。用图像缩放？我今天刚开始使用SVG，所以非常感谢任何帮助。

Angular2中的代码

<svg attr.width="{{w}}" attr.height="{{h}}" id="mySVG">
    <image xlink:href="../asset/building.jpg" x="0" y="0" height="100%" width="100%"/>
    <rect x="0" y="0" attr.width="{{w}}" attr.height="{{h}}" stroke="black" fill="url(#GridPattern)" stroke-width="5"
        class="hello"/>

     <defs>
        <pattern id="GridPattern" x="0" y="0" attr.width="{{wGap}}" attr.height="{{hGap}}" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" attr.x2="{{wGap}}" y2="0" stroke="lightblue" stroke-width="1px" />
          <line x1="0" y1="0" x2="0" attr.y2="{{hGap}}" stroke="lightblue" stroke-width="1px" />
        </pattern> 
    </defs>

    <g id="group1" fill="red">
    <!--<rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>-->
    <text *ngFor="let h of loc"  attr.x="{{h.x*wGap}}" attr.y="{{h.y*hGap}}" fill="red" text-anchor='middle'>{{h.text}},h:{{h.y*hGap}},w:{{h.x*wGap}}</text>
    <text *ngFor="let x of xNum; let i = index"  attr.x="{{i*wGap}}" y="20" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0;
                              letter-spacing: -3;" >{{i}}</text>
    <text *ngFor="let x of yNum; let i = index"  x="20" attr.y="{{i*hGap}}" fill="red">{{i}}</text>
  </g>



</svg>



   import {Component, OnInit,NgZone} from '@angular/core';


    @Component({
        selector: 'home',
        template: require('./home.html')
    })

    export class Home implements OnInit{
        bol:boolean = true;

        w:number;
        h:number;
        wGap:number;
        hGap:number;
        hMultiplier:number = 30;
        wMultiplier:number = 40;
        yNum = new Array(this.hMultiplier);
        xNum = new Array(this.wMultiplier);
        hLine:any;
        wLine:any;

        loc:Object[] = [{x:37,y:3,text:"testing 1"},
                        {x:31,y:25,text:"testing 2"},
                        {x:2,y:9,text:"testing 3"},
                        {x:35,y:8,text:"testing 4"},
                        {x:22,y:10,text:"testing 5"}]
        constructor(ngZone:NgZone){
            console.log(this.xNum,this.yNum)
            console.log(window.innerHeight, window.innerWidth);
            this.w = window.innerWidth-50;
            this.h = window.innerHeight-200;
             this.wGap = Math.ceil(this.w/this.wMultiplier);
                    this.hGap = Math.ceil(this.h/this.hMultiplier);

                    //////
                    //this.calculateLocation();
            window.onresize = (e)=>{
                ngZone.run(()=>{
                    console.log(window.innerWidth,window.innerHeight);
                    //this.w = document.getElementById('bldImg')['width'];
                    //this.h = document.getElementById('bldImg')['height'];
                    this.w = window.innerWidth-50;
                    this.h = window.innerHeight-200;
                    this.wGap = Math.ceil(this.w/this.wGap);
                    this.hGap = Math.ceil(this.h/this.hGap);

                    //////
                   // this.calculateLocation();
                    console.log(this.wGap)
                    console.log(this.hGap)
                });
            }
        }
        ngOnInit(){

        }


    }

Answer 1

我设法使用svg标签并使用Angular版本4创建我自己的交互式地图，您可以在此链接中查看plnkr - 请查看代码

const int

Image of the Output incase if Plunker doesnt work

https://plnkr.co/edit/2heVmd7l4UokqR2OcNgm?p=preview

SVG网格覆盖图像

1 个答案: