svg 折线实现地图点击画线标记

ゞ浴缸里的玫瑰 2021-07-24 17:40 664阅读 0赞

思路:
    	将坐标转换成svg面板内的坐标
    	鼠标按下获取坐标并生成圆标记->鼠标移动动态获取坐标并给折线,实现线随鼠标移动->设置右键点击事件取消绘图即取消之前两种事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:780px;
                height:400px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
    
            <svg  id='svg' width='100%' height='100%'
            xmlns="http://www.w3.org/2000/svg">
     
            </svg>
            
            
        </div>
    
        <script>
    window.onload=function(){ 
    
        //命名空间
        let svgNS="http://www.w3.org/2000/svg";
    
        //获取父级元素
        var div=document.querySelector('.box');
        //获取svg
        let svg=document.querySelector('#svg');
    
        //创建标签
        function createTag(tag,obj){ 
            var oTag=document.createElementNS(svgNS,tag);
            for(var attr in obj){ 
                oTag.setAttribute(attr,obj[attr]);
            }
    
            return oTag;
    
        }
        //创建折现
        var zx=createTag('polyline',{ 'stroke':'blue','fill':'none','stroke-width':'2'})
        var point='';
        var flag=0;
    
        //在svg面板按下事件
        svg.onmousedown=function(e){ 
            //创建折现
            var zx=createTag('polyline',{ 'stroke':'blue','fill':'none','stroke-width':'2'})
            
            //获取鼠标按下起始点坐标,相对于svg
            var x1=e.clientX-div.offsetLeft;
            var y1=e.clientY-div.offsetTop;
    
            if(point=='')
            { 
                point=x1+','+y1;
            }else{ 
                point=point+','+x1+','+y1;
            }
    
            zx.setAttribute('points',point);
    
            //鼠标按下创建小圆点标记
            var circle=createTag('circle',{ 'cx':x1,'cy':y1,'r':'10','fill':'none','stroke':'red'})
    
            svg.appendChild(zx);
            svg.appendChild(circle);
            flag=1;
        }
    
            //在svg面板点击后移动,线段长度也跟着变化
            svg.onmousemove=function(e){ 
                if(flag==1){ 
                    console.log(1);
                    //获取鼠标移动时坐标,相对于svg
                    var x2=e.clientX-div.offsetLeft;
                    var y2=e.clientY-div.offsetTop;
    
                    zx.setAttribute('points',point+','+x2+","+y2);
    
                    svg.appendChild(zx);
                }
            }
    
            //设置右键点击取消绘图事件
            svg.oncontextmenu=function(){ 
                svg.onmousemove=null;
                svg.onmousedown=null;
                // return false;
            }
    }
    
    
        </script>
    </body>
    </html>