Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 25, 2020 02:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/afabef12e96104e2ea1eaada30273e58 to your computer and use it in GitHub Desktop.
Save Hirosaji/afabef12e96104e2ea1eaada30273e58 to your computer and use it in GitHub Desktop.
Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map
# Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map
license: mit
function addCanvasTile(tileIndex, size, callback) {
return function (coords, done) {
var canvas = addCanvas(coords, done, size, coords.z, callback);
var time = 0;
onClick(canvas, callback);
return canvas;
};
function addCanvas(coords, done, size, zoom, clickable) {
if (!size) size = 256;
var pad = 0;
var canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
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 = size / 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,
tags = feature.tags;
if (clickable) {
ctx.fillStyle = tags._pickingColor
? tags._pickingColor
: null;
ctx.strokeStyle = tags._pickingColor
? tags._pickingColor
: null;
} else {
ctx.fillStyle = tags._fillStyle
? tags._fillStyle
: _fillStyle;
if (tags._setLineDash)
ctx.setLineDash(tags._setLineDash);
ctx.strokeStyle = tags._storkeSyle
? tags._storkeSyle
: _storkeSyle;
ctx.lineWidth = tags._lineWidth
? 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 * size;
var y = p[1] / extent * size;
if (k) ctx.lineTo(x, y);
else ctx.moveTo(x, y);
}
}
if (type === 3 || type === 1) ctx.fill("evenodd");
ctx.stroke();
}
setTimeout(function () {
done(null, canvas);
}, 10);
return canvas;
}
function onClick(canvas, callback) {
var time = null;
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);
});
}
}
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment