マルチエージェントシミュレーションのビューアの表示が遅くて困っているので、色々試している最中

ebata

2年前

単純だけど、これでオブジェクトを書いたり消したりすれば、実現できるかな？

<!doctype html>
<html>
<head>
    <title>Many Points with  leaflet Canvas</title>
    <meta charset="utf-8">

    <style>
        
        #map {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #333;
        }
    </style>

</head>
<body>
    <div id="map"></div>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="L.CanvasOverlay.js"></script>
    <script src="http://www.sumbera.com/gist/data.js" charset="utf-8"></script>


    <script>

        var points = data; // data loaded from data.js
        var leafletMap = L.map('map').setView([50.00, 14.44], 9);
        L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png")
            .addTo(leafletMap);

        L.canvasOverlay()
            .drawing(drawingOnCanvas)
            .addTo(leafletMap);

        function drawingOnCanvas(canvasOverlay, params) {
            var ctx = params.canvas.getContext('2d');
            ctx.clearRect(0, 0, params.canvas.width, params.canvas.height);
            ctx.fillStyle = "rgba(255,116,0, 0.2)";


            //for (var i = 0; i < data.length; i++) {
            for (var i = 0; i < data.length; i=i+300) {
                var d = data[i];
                if (params.bounds.contains([d[0], d[1]])) {
                    dot = canvasOverlay._map.latLngToContainerPoint([d[0], d[1]]);
                    ctx.beginPath();
                    //ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
                    ctx.arc(dot.x, dot.y, 10, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.closePath();
                }
            }

            //for (var i = 0; i < data.length ; i++) {
            for (var i = 0; i < data.length ; i=i+10) {
                var d = data[i];
                if (params.bounds.contains([d[0], d[1]])) {
                    dot = canvasOverlay._map.latLngToContainerPoint([d[0], d[1]]);
					//ctx.beginPath();
					ctx.clearRect(dot.x-10, dot.y-10, dot.x+0, dot.y+0);
                    //ctx.closePath();
                }
            }


        };
    </script>
</body>
</html>