<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fade Out/In SVG Elements in Leaflet World Map</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
</head>
<body style='font-family:arial'>
<center><h4>Fade Out/In SVG Elements in Leaflet World Map</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
This adds 500 svg elements(circles, ellipses, rects, polygons) to the SVG layer in the world map. The map's mouse wheel zoom remains smooth in IE/CH/FF. Each element has a lat/lng value, converted to the needed x,y values to translate each symbol to the desired point.
During map zoom level changes, the symbols are automatically scaled and translated, maintaining their original size and position.
</div>
<br />
<table border=1>
<tr>
<td>
<b>Scenerio:</b><br />
1). The map is placed into its DIV (width:800px, height:400px).<br />
2). The map is centered at Lat/Lng (0,0) at zoom level 1.<br />
3.) The SVG element is added via <b>initPathRoot.</b><br />
4.) 500 SVG elements are added, randomly place about the world.<br />
5.) The svg <b>viewBox</b> is computed, used to create x,y values for the symbols.<br />
6.)Each element is translated/scaled when the map is zoomed, using the <b>viewreset</b> event.<br /> This calls the map method <b>latLngToLayerPoint(MyLatLng)</b> to accomplish this.
<br>7.) Select <button>fade out/in</button> to fade out the current elements, build a new group, then fade In new group
</td>
</tr>
</table>
<div style='width:800px;height:400px' id='MyMap'></div>
<button onClick=fadeOutIn()>fade out/in</button>
<br />Javascript:<br />
<textarea spellcheck=false id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmhlbXNoZXIiLCJhIjoiODQ5MW9WayJ9.px2P6wVMFucfXHE1zmDA1A';
MyMap = L.mapbox.map('MyMap', 'mapbox.streets', { zoomControl:false,center: new L.latLng(0,0),zoom:1,minZoom:1});
//---zooming the map---
MyMap.on("viewreset", adjustSVGSymbols);
var MySVG
var SymbolG //---<g> element containing all symbols---
var VBw
var VBh
var NS="http://www.w3.org/2000/svg"
//---body onload---
function initSVG()
{
\t MyMap._initPathRoot() //---creates an svg layer---
\t MySVG=document.querySelector("svg") //---access svg element---
\t //---place symbols in here---
\t SymbolG=document.createElementNS(NS,"g")
SymbolG.setAttribute("id","symbolG")
\t MySVG.appendChild(SymbolG)
\t //---create random svg elements, place in SymbolG--
\t getViewBox()//---used to place svg random elements
\t //---create 500 symbols at size 10 pixels--
\t svgGLOB(500,10)
}
//--- on map zoom - fired via map event: viewreset---
function adjustSVGSymbols()
{
\t var symbols=SymbolG.childNodes
\t for(var k=0;k<symbols.length;k++)
\t {
\t \t var symbol=symbols.item(k)
\t \t //---initial lat/lng for symbol---
\t \t var lat=parseFloat(symbol.getAttribute("lat"))
\t \t var lng=parseFloat(symbol.getAttribute("lng"))
\t \t var latLng= new L.latLng(lat, lng)
\t \t var transX=MyMap.latLngToLayerPoint(latLng).x
\t \t var transY=MyMap.latLngToLayerPoint(latLng).y
//---scale---
var initZoom=parseFloat(symbol.getAttribute("initZoom"))
var scale = (Math.pow(2, MyMap.getZoom())/2)/(Math.pow(2, initZoom)/2);
\t \t //---trash previous transform---
\t \t symbol.setAttribute("transform","")
\t \t symbol.removeAttribute("transform")
\t \t var transformRequestObj=MySVG.createSVGTransform()
\t \t var animTransformList=symbol.transform
\t \t //---get baseVal to access/place object transforms
\t \t var transformList=animTransformList.baseVal
\t \t //---translate----
\t \t transformRequestObj.setTranslate(transX,transY)
\t \t transformList.appendItem(transformRequestObj)
\t \t transformList.consolidate()
\t \t //---scale---
\t \t transformRequestObj.setScale(scale,scale)
\t \t transformList.appendItem(transformRequestObj)
\t \t transformList.consolidate()
\t }
}
//---needed for random symbol placement: create x,y values---
function getViewBox()
{
\t vb=MySVG.viewBox.baseVal
\t VBw=vb.width
\t VBh=vb.height
}
//---compute svg elems: circles, rects, ellipses, polygons---
function svgGLOB(elems,elemSize)
{
\t //---note: each browser creates a different sized svg layer---
\t var svgWidth=VBw
\t var svgHeight=VBh
\t //---obtain a random whole number from a thru b---
\t function rdm(a,b)
\t {
\t \t return a + Math.floor(Math.random()*(b-a+1));
\t }
\t function randomPoints(elems,svgWidth,svgHeight,elemSize)
\t {
\t \t //--return format:[ [x,y],[x,y],,, ]
\t \t //---Generate random points---
\t \t function times(n, fn)
\t \t {
\t \t \t var a = [], i;
\t \t \t for (i = 0; i < n; i++)
\t \t \t {
\t \t \t \t a.push(fn(i));
\t \t \t }
\t \t \t return a;
\t \t }
\t \t var width=svgWidth-2*elemSize //---offset from edge---
\t \t var height=svgHeight-2*elemSize //---offset from edge---
\t \t return \t RandomPnts = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] });
\t }
\t //---random color---
\t function rcolor()
\t {
\t \t var letters = 'ABCDEF'.split('');
\t \t var color = '#';
\t \t for (var i = 0; i < 6; i++)
\t \t {
\t \t \t color += letters[Math.round(Math.random() * 15)];
\t \t }
\t \t return color;
\t }
\t function polygon(vCnt,radius,centerX,centerY)
\t {
\t \t var myPoints=[]
\t \t var polyXPts = Array(vCnt);
\t \t var polyYPts = Array(vCnt);
\t \t var vertexAngle = 360/vCnt;
\t \t //---init polygon points processor---
\t \t for(var v=0; v<vCnt; v++)
\t \t {
\t \t \t theAngle = (v*vertexAngle)*Math.PI/180;
\t \t \t polyXPts[v] = radius*Math.cos(theAngle);
\t \t \t polyYPts[v] = -radius*Math.sin(theAngle);
\t \t }
\t \t //--note points are CCW---
\t \t for(var v=0;v<vCnt; v++)
\t \t {
\t \t \t var point=[centerX+polyXPts[v],centerY+polyYPts[v]]
\t \t \t myPoints.push(point)
\t \t }
\t \t return myPoints
\t }
\t var Points=randomPoints(elems,svgWidth,svgHeight,elemSize)
\t var n=Points.length
\t var circleCnt=0
\t var ellipseCnt=0
\t var rectCnt=0
\t var polygonCnt=0
\t var RandomElems=[]
\t RandomElems[0]="circle"
\t RandomElems[1]="rect"
\t RandomElems[2]="ellipse"
\t RandomElems[3]="polygon_3"
\t RandomElems[4]="polygon_4"
\t RandomElems[5]="polygon_5"
\t RandomElems[6]="polygon_6"
\t RandomElems[7]="polygon_7"
\t RandomElems[8]="polygon_8"
\t RandomElems[9]="polygon_9"
\t RandomElems[10]="polygon_10"
\t RandomElems[11]="polygon_11"
\t RandomElems[12]="polygon_12"
\t //---create all at center(0,0), then translate---
\t for(var k=0;k<n;k++)
\t {
\t \t var rand=rdm(0,12)
\t \t var elemStr=RandomElems[rand]
\t \t if(!elemStr.indexOf("_"))
\t \t var elemSt=elemStr
\t \t else
\t \t var elemSt=elemStr.split("_")[0]
\t \t //var elem=document.createElementNS(NS,elemSt)
\t \t var x=Points[k][0]
\t \t var y=Points[k][1]
\t \t var lng=((x * 360/VBw) - 180)
\t \t var lat= (90 - (y * 180/VBh))
\t \t var id="symbol"+k
\t \t var fill=rcolor()
\t \t var elem=document.createElementNS(NS,elemSt)
\t \t elem.setAttribute("id",id)
\t \t elem.setAttribute("cursor","default")
\t \t elem.setAttribute("fill",fill)
\t \t elem.setAttribute("lat",lat)
\t \t elem.setAttribute("lng",lng)
\t \t if(elemSt=="circle")
\t \t {
\t \t \t var r=elemSize
\t \t \t elem.setAttribute("r",r)
\t \t }
\t \t else if(elemSt=="ellipse")
\t \t {
\t \t \t var rx=elemSize
\t \t \t var ry=elemSize/2
\t \t \t elem.setAttribute("rx",rx)
\t \t \t elem.setAttribute("ry",ry)
\t \t }
\t \t else if(elemSt=="rect")
\t \t {
\t \t \t var width=elemSize
\t \t \t var height=elemSize
\t \t \t //---center at 0,0---
\t \t \t var x=-elemSize/2
\t \t \t var y=-elemSize/2
\t \t \t elem.setAttribute("width",width)
\t \t \t elem.setAttribute("height",height)
\t \t \t elem.setAttribute("x",x)
\t \t \t elem.setAttribute("y",y)
\t \t }
\t \t else if(elemSt=="polygon")
\t \t {
\t \t \t var pgonSides=parseInt(elemStr.split("_")[1])
\t \t \t var pgonPnts=polygon(pgonSides,elemSize,0,0)
\t \t \t var points=pgonPnts.join()
\t \t \t elem.setAttribute("points",points)
\t \t }
elem.setAttribute("initZoom",1)
\t \t SymbolG.appendChild(elem)
\t }
\t //---initialize locations---
\t adjustSVGSymbols()
}
//---fade out/In button----
function fadeOutIn()
{
$("#symbolG").fadeOut(1000, function(){
createAnotherGlob()
});
}
function createAnotherGlob()
{
var symbols=SymbolG.childNodes
for(var k=symbols.length-1;k>=0;k--)
SymbolG.removeChild(symbols.item(k))
svgGLOB(500,10,true)
$("#symbolG").fadeIn(1500)
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
\t jsValue.value=myScript.text
\t initSVG()
}
</script>
</body>
</html>
이 매우 유망한 보인다. 오늘 그것을 테스트하려고합니다. – DanM
아 - 이것은 리플릿 1.0 기능입니다. 그것이 내 문제를 해결할 수 있다는 것을 감안할 때, 나는 1.0RC1로 업그레이드를 시도 할 것이다. – DanM
이것은 꽤 잘 작동했습니다. 나는 3 개의 렌더러 ("a", "b"및 "c")를 생성하고 순환 시켰으며, 하나가 퇴색하는 동안 페이드 아웃하고, 세 번째를 "낡은"레이어로 유지하여 어떤 경쟁 조건에도 빠지지 않았습니다 . – DanM