Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active May 17, 2018 02:08
Show Gist options
  • Save shimizu/1465fb798c7a68c8b9e8439a02e8ad48 to your computer and use it in GitHub Desktop.
Save shimizu/1465fb798c7a68c8b9e8439a02e8ad48 to your computer and use it in GitHub Desktop.
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