在特定坐标的Leaflet.js贴图顶部创建和动画SVG元素（使用D3.js？）？

Question

我的任务是在使用Leaflet.js创建的地图顶部的特定坐标上为一系列圆圈设置动画。我获得使用websockets放置圆的坐标。

我能够从websocket连接和事件处理程序中接收事件（坐标）我想添加代码以将圆添加到该坐标。

问题是我无法找到任何资源可以帮助我完成我需要做的事情。有些方法使用覆盖窗格，他们使用传单中的内置标记。但我还没有看到任何资源可以帮助我创建和制作我需要做的事情。

这是我处理的客户端文件：

<div class = "container"> 
<div class = "row"> 
<div class = "col-md-12" style="width:1000px; height:1000px;"> 
<div id='map' class = "map" style="border : 2px solid #182e69"></div> 
</div> 
</div> 
</div> 
<script> 
var watercolorLayer = new L.TileLayer("http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg", {noWrap : true}); 
var map = L.map('map',{scrollWheelZoom:true, maxZoom:5, minZoom:2}).setView([0,0], 2).addLayer(watercolorLayer); 
map.setMaxBounds(map.getBounds()).fitWorld(); 
map._initPathRoot(); 
</script> 

<script> 
var socket = io.connect(); 
socket.on('connect', function() { 
    console.log("Connection established"); 

}); 

socket.on('message', function(data) { 
    console.log(data[0]); //latitude obtained 
    console.log(data[1]); //longitude obtained 

}); 
</script> 

</body> 

Answer 1

只是想更新和发布的情况下回答我的问题别人需要它以后。我尝试使用传单中的CircleMarker对象，但事实证明我找不到任何关于如何为它们设置动画的信息。

所以我终于想出了使用D3。

我创建在地图上的顶部的SVG元素，然后选择它像这样：

map._initPathRoot(); 
var svg = d3.select("#map").select("svg"); 

然后，对于我的WebSocket连接的事件处理程序中（接收消息）我张贴以下代码：

var Point = map.latLngToLayerPoint(data); //data is the websocket 
              //event it receives and its a 
              //list with the 2 coordinates e.g "[lattitude, longtitude]" 
    var circle = svg.append("circle")  //Adding circle element on coordinates 
       .attr("cx", Point.x) 
       .attr("cy", Point.y) 
       .attr("r", 0) 
       .style("fill", "#182e69") 
       .attr("opacity", 0.5) 
       .transition()    //adding first transition 
       .attr("r", 50) 
       .attr("opacity", 0.3) 
       .delay(1000) 
       .duration(1000) 
       .on("end", function() { 
        d3.select(this) 
         .transition()    //adding second transition 
         .attr("r", 0) 
         .attr("opacity", 0.0) 
         .duration(500) 
         .on("end", function() { 
          d3.select(this).remove(); //removing the circle 
                //element from the map 
                //after the transitions are done 
         }); 
       });