単純だけど、これでオブジェクトを書いたり消したりすれば、実現できるかな？
<!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>
