| # Leaflet.js × D3.js × geojson-vt.js - Clickeble Canvas Tiles Map | |
| license: mit | |
Reference Blog:
▶︎ GeoJSONをフロントエンドでベクトルタイル化して表示する。 - GUNMA GIS GEEK
Reference Code:
▶︎ https://bl.ocks.org/shimizu/79bb99558dbc27b8fdf456033dc8e893
[Gist] https://gist.github.com/Hirosaji/704eba1454230620836de5e0df747129
Built with blockbuilder.org
| 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); | |
| }); | |
| } | |
| } |
