Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active May 17, 2018 02:08
Clickable Canvas Tile

Canvasで生成されたタイルにクリックイベントを設定するサンプル。

function addCanvasTile(tileIndex, callback){
return function(coords, done) {
var canvas = addCanvas(coords, done, coords.z, callback);
var time = 0;
onClick(canvas, callback);
return canvas;
}
function addCanvas(coords, done, zoom, clickable) {
var pad = 0;
var canvas = document.createElement("canvas");
canvas.width = 256;
canvas.height = 256;
var ctx = canvas.getContext("2d");
var _fillStyle = "white";
var _storkeSyle = "black";
var _lineWidth = 1;
var padding = 8 / 512;
var totalExtent = 4096 * (1 + padding * 2);
var ratio = 256 / totalExtent;
var radius = ~~(2 - (Math.PI * (3 - Math.sqrt(zoom))));
if(radius <= 0) radius = 0.6;
var tile = tileIndex.getTile(coords.z, coords.x, coords.y);
if (!tile) {
//console.log('tile empty');
return canvas;
}
var features = tile.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i],
type = feature.type;
if (clickable) {
ctx.fillStyle = feature.tags._pickingColor
? feature.tags._pickingColor
: null;
if(feature.tags._clecked){
ctx.setLineDash([0]);
}else{
ctx.setLineDash([1, 5]);
}
} else {
ctx.fillStyle = feature.tags._fillStyle ? feature.tags._fillStyle : _fillStyle;
if(feature.tags._setLineDash) ctx.setLineDash(feature.tags._setLineDash);
ctx.strokeStyle = feature.tags._storkeSyle ? feature.tags._storkeSyle : _storkeSyle;
ctx.lineWidth = feature.tags._lineWidth ? feature.tags._lineWidth : _lineWidth;
}
ctx.beginPath();
for (var j = 0; j < feature.geometry.length; j++) {
var geom = feature.geometry[j];
if (type === 1) {
pad = 4096 * padding * ratio;
ctx.arc(
~~geom[0] * ratio + pad,
geom[1] * ratio + pad,
2,
0,
2 * Math.PI,
false
);
continue;
}
for (var k = 0; k < geom.length; k++) {
var p = geom[k];
var extent = 4096;
var x = p[0] / extent * 256;
var y = p[1] / extent * 256;
if (k) ctx.lineTo(x + pad, y + pad);
else ctx.moveTo(x + pad, y + pad);
}
}
if (type === 3 || type === 1) ctx.fill("evenodd");
ctx.stroke();
}
setTimeout(function() {
done(null, canvas);
}, 10);
return canvas;
}
function onClick(canvas, callback){
d3
.select(canvas)
.on("mousedown", function(d) {
time = new Date();
})
.on("mouseup", function() {
if (new Date() - time > 300) return; //ドラッグかクリックかを判別する
//console.log(d3.event)
var x = d3.event.offsetX;
var y = d3.event.offsetY;
var ctx = this.getContext("2d");
var clicked = false;
var imageData = ctx.getImageData(x, y, 1, 1).data;
var cid = [imageData[0], imageData[1], imageData[2], imageData[3]].join(); // IE hack
callback(cid);
});
}
}
This file has been truncated, but you can view the full file.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment