SVG實(shí)現(xiàn)地圖圖譜

先看一下效果，


SVGmap.gif

整個(gè)效果都是基于SVG實(shí)現(xiàn)的，可以不使用Echat等圖表插件的情況下，產(chǎn)生不錯(cuò)的效果，可以實(shí)現(xiàn)簡(jiǎn)單的展示功能。這個(gè)是項(xiàng)目中的簡(jiǎn)化版本，地理位置不對(duì)呀，別介意。下面是源碼，非常簡(jiǎn)單，可以看一下。<p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            width: 530px;
            height: 400px;
            border: 1px solid #96caf6;
            background: url("../img/china.jpeg") ;
            background-size: 530px 400px;
        }
    </style>
</head>
<body>
    <div class="div1">

    </div>
</body>
<script>
    (function (exports) {
        var doc=document;
        var idExpr=/^#([\w-]*)$/;
        var classExpr=/^.([\w-]+)$/;
        var hasClassListinDoc="classList" in document.documentElement;
        var $d={
            $: function (selector, context) {
                var result;
                if(idExpr.test(selector)){
                    result=this.id(selector);
                    if(result) return result;
                }else if(classExpr.test(selector)){
                    result=this.className(selector,context);
                    if(result) return result
                }else{
                    result=context.querySelectorAll(selector);
                    return result
                }
            },
            id: function (selector) {
                return document.getElementById(selector);
            },
            tagName: function (selector, context) {
                var context=doc||context;
                return context.getElementsByTagName(selector)
            },
            className: function (selector, context) {
                var context=doc||context;
                return context.getElementsByClassName(selector);
            },
            node: function (selector, context) {
                return document.createElement(selector);
            },
            addStyle: function (obj,styleName,styleValue) {
                if(Object.prototype.toString.call(styleName)==="[object string]"){
                    obj.style[styleName]=styleValue;
                }else if(Object.prototype.toString.call(styleName)==="[object object]"){
                    for(var key in styleName){
                        obj.style[key]=styleName[key];
                    }
                }
            },
            getStyle: function (obj,styleName) {
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[styleName]
                }else if(obj.currentStyle){
                    return obj.currentStyle[styleName];
                }
            },
            removeChild: function (selector, context) {
                context.removeChild(selector);
            },
            addAttr: function (obj, attrs) {
                for(var key in attrs){
                    obj.setAttribute(key,attrs[key]);
                }
            },
            removeAttr:function(obj,attrs){
                for(var i=0;i<attrs.length;i++){
                    obj.removeAttribute[attrs[i]];
                }
            },
            getAttribute: function (obj, attrs) {
                var attrArray=[];
                for(var i=0;i<attrs.length;i++){
                    attrArray.push(obj.getAttribute(attrs[i]))
                }
                return attrArray;
            },
            eventHandle: function (obj,type,handle) {
                if(obj.addEventListener){
                    obj.addEventListener(type,handle,false);
                }else if(obj.attachEvent){
                    obj.attachEvent('on'+eventType,handle)
                }
            },
            each: function (target, handle,arg) {
                for(var i=0;i<target.length;i++){
                    handle.apply(target[i],arg);
                }
            },
            tweenAnimateR: function (obj, type1,type2,start, end, dur) {
                clearInterval(obj.timer);
                var changeValue=end-start;
                var t=0;
                var newValue;
                obj.timer=setInterval(function () {
                    t+=5;
                    newValue=Tween[type1][type2](t,start,changeValue,dur);
                    console.log(newValue);
                    if(Math.round(t)<dur){
                        $d.addAttr(obj,{
                            'r':newValue
                        })
                    }else if(Math.round(t)==dur){
                        clearInterval(obj.timer);
                    }
                },30)
            }
        };
        var Tween = {
            Linear: function (t, b, c, d) { return c * t / d + b; },
            Quad: {//Quadratic二次方效果
                easeIn: function (t, b, c, d) {
                    return c * (t /= d) * t + b;
                },
                easeOut: function (t, b, c, d) {
                    return -c * (t /= d) * (t - 2) + b;
                },
                easeInOut: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                    return -c / 2 * ((--t) * (t - 2) - 1) + b;
                }
            },
            Cubic: {//Cubic 立方效果
                easeIn: function (t, b, c, d) {
                    return c * (t /= d) * t * t + b;
                },
                easeOut: function (t, b, c, d) {
                    return c * ((t = t / d - 1) * t * t + 1) + b;
                },
                easeInOut: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
                    return c / 2 * ((t -= 2) * t * t + 2) + b;
                }
            },
            Quart: {// Quartic  四次方效果
                easeIn: function (t, b, c, d) {
                    return c * (t /= d) * t * t * t + b;
                },
                easeOut: function (t, b, c, d) {
                    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
                },
                easeInOut: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
                    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
                }
            },
            Quint: {// Quintic五次方效果
                easeIn: function (t, b, c, d) {
                    return c * (t /= d) * t * t * t * t + b;
                },
                easeOut: function (t, b, c, d) {
                    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
                },
                easeInOut: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
                    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
                }
            },
            Sine: {//Sinusoidal 正弦效果
                easeIn: function (t, b, c, d) {
                    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
                },
                easeOut: function (t, b, c, d) {
                    return c * Math.sin(t / d * (Math.PI / 2)) + b;
                },
                easeInOut: function (t, b, c, d) {
                    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
                }
            },
            Expo: { // Exponential指數(shù)
                easeIn: function (t, b, c, d) {
                    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
                },
                easeOut: function (t, b, c, d) {
                    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
                },
                easeInOut: function (t, b, c, d) {
                    if (t == 0) return b;
                    if (t == d) return b + c;
                    if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
                }
            },
            Circ: { //circle循環(huán)
                easeIn: function (t, b, c, d) {
                    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
                },
                easeOut: function (t, b, c, d) {
                    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
                },
                easeInOut: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
                }
            },
            Elastic: {//  Elastic 彈性
                easeIn: function (t, b, c, d, a, p) {
                    if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
                    if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                },
                easeOut: function (t, b, c, d, a, p) {
                    if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
                    if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
                },
                easeInOut: function (t, b, c, d, a, p) {
                    if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
                    if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
                }
            },
            Back: {//后退
                easeIn: function (t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    return c * (t /= d) * t * ((s + 1) * t - s) + b;
                },
                easeOut: function (t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
                },
                easeInOut: function (t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
                }
            },
            Bounce: {// Bounce反彈
                easeIn: function (t, b, c, d) {
                    return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
                },
                easeOut: function (t, b, c, d) {
                    if ((t /= d) < (1 / 2.75)) {
                        return c * (7.5625 * t * t) + b;
                    } else if (t < (2 / 2.75)) {
                        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                    } else if (t < (2.5 / 2.75)) {
                        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                    } else {
                        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                    }
                },
                easeInOut: function (t, b, c, d) {
                    if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                    else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
                }
            }
        };
        exports.$d=$d;
        exports.Tween=Tween;
    })(window);
    var SVG= function () {

    };
    SVG.prototype={
        svgNS:'http://www.w3.org/2000/svg',
        createTag: function (tag,tagAttrs) {
            var node=document.createElementNS(this.svgNS,tag);
            for(var key in tagAttrs){
                node.setAttribute(key,tagAttrs[key]);
            }
            return node;
        },
        setAttribute: function (obj,attrs) {
            for(var key in attrs){
                obj.setAttribute(key,attrs[key]);
            }
        },
        setPosition: function (obj, attrs) {
            for(var key in attrs){
                obj.setAttribute(key,attrs[key]);
            }
            return obj;
        },
        createCircle: function (args,targetObject) {
            for(var i=0;i<args.length;i++){
                var node=this.createTag("circle",args[i]);
                targetObject.appendChild(node);
            }
        },
        createText: function (args,targetObject) {
            for(var i=0;i<args.length;i++){
                var text=this.createTag('text',args[i]);
                var message=$d.getAttribute(text,["tittle"]);
                text.innerHTML=message;
                console.log(message);
                targetObject.appendChild(text);
            }
        },
        createRect: function (args,targetObject) {
            for(var i=0;i<args.length;i++){
                var rect=this.createTag('rect',args[i]);
                targetObject.appendChild(rect);
            }
        }
    };
    var svg=new SVG();
    var div1=$d.className("div1")[0];
    var svgObject=svg.createTag("svg",{
        'xmls':this.svgNS,
        'width':'100%',
        'height':'100%',
        'zIndex':'100'
    });
    div1.appendChild(svgObject);
    svg.createCircle([{
        'cx':'150px',
        'cy':'120px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class1'
    },{
        'cx':'50px',
        'cy':'20px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class2'
    },{
        'cx':'70px',
        'cy':'60px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class3'
    },{
        'cx':'110px',
        'cy':'40px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class4'
    },{
        'cx':'210px',
        'cy':'240px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class5'
    },{
        'cx':'280px',
        'cy':'340px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class6'
    },{
        'cx':'480px',
        'cy':'240px',
        'r':'10',
        'fill':'rgb(159,218,191)',
        'stroke-width':'1',
        'tittle':'class7'
    }],svgObject);

    svg.createText([{
        'x':'190px',
        'y':'125px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'beijing',
        'class':'class1'
    },{
        'x':'90px',
        'y':'25px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'shanghai',
        'class':'class2'
    },{
        'x':'110px',
        'y':'65px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'kunming',
        'class':'class3'
    },{
        'x':'150px',
        'y':'45px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'shenzhen',
        'class':'class4'
    },{
        'x':'260px',
        'y':'245px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'chengdu',
        'class':'class5'
    },{
        'x':'330px',
        'y':'345px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'wuhan',
        'class':'class6'
    },{
        'x':'530px',
        'y':'245px',
        'fill':'white',
        'font-size':14,
        'text-anchor':'middle',
        'tittle':'wuhan',
        'class':'class7'
    }],svgObject);
    var circles=$d.tagName("circle",svgObject);
    $d.each(circles, function () {
        console.log(this);
        $d.eventHandle(this, 'mouseenter',function () {
            var that=this;
            $d.tweenAnimateR(that,'Elastic','easeOut',10,15,150);
            var text=$d.className($d.getAttribute(that,['tittle'])[0])[0];
            $d.addAttr(text,{
                'fill':'red'
            })
        });
        $d.eventHandle(this,'mouseleave', function () {
            var that=this;
            $d.tweenAnimateR(this,'Elastic','easeOut',15,10,150);
            var text=$d.className($d.getAttribute(that,['tittle'])[0])[0];
            $d.addAttr(text,{
                'fill':'white'
            })
        })
    })
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評(píng)論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,225評(píng)論 4贊 61
  • 到了需要成熟的年紀(jì)，經(jīng)歷了一些人與事，開(kāi)始試著總結(jié)自己一直以來(lái)希望成為一個(gè)怎樣的女人。當(dāng)然每個(gè)人的個(gè)性與標(biāo)準(zhǔn)不同，...
    Viewyn閱讀 429評(píng)論 0贊 0
  • 問(wèn)在前面 1.你家寶寶出生多重？ 2.你家寶寶每天能吃多少奶？ 3.你覺(jué)得寶寶體重是多少才是正常的？ 4.如果體重...
    當(dāng)?shù)院?/span>閱讀 402評(píng)論 0贊 0
  • 日常篇 惠子 9月4日 001/ 今天是開(kāi)學(xué)的第一天 中午,燈一亮 馬上驚醒了(做著夢(mèng)）腦袋瓜子好重 一拉開(kāi)簾子 ...
    九姑娘HZ閱讀 305評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容