Canvasで生成されたタイルにクリックイベントを設定するサンプル。
Last active
May 17, 2018 02:08
-
-
Save shimizu/1465fb798c7a68c8b9e8439a02e8ad48 to your computer and use it in GitHub Desktop.
Clickable Canvas Tile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }); | |
| } | |
| } |
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