在特定坐标处的 Leaflet.js 地图上创建和动画化 SVG 元素（使用 D3.js？）？答案

【问题标题】：Creating and animating a SVG element (using D3.js?) on top of a Leaflet.js map at specific coordinates?在特定坐标处的 Leaflet.js 地图上创建和动画化 SVG 元素（使用 D3.js？）？
【发布时间】：2017-12-30 01:32:39
【问题描述】：

我的任务是在使用 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>

【问题讨论】：

标签： javascript d3.js svg leaflet

【解决方案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
                        });
                });

【讨论】：