SVG实现地图图谱
2016-06-17 本文已影响74人
MakingChoice
先看一下效果，
SVGmap.gif
整个效果都是基于SVG实现的，可以不使用Echat等图表插件的情况下，产生不错的效果，可以实现简单的展示功能。这个是项目中的简化版本，地理位置不对呀，别介意。下面是源码，非常简单，可以看一下。<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指数
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循环
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>
