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
                        });
                });

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

1 个答案: