Clickable Canvas Tile

README.md

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

canvasTile.js

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);
             
      });    
  }
}

city.buf

geobuf.js

geojson-vt.js

index.html

medical.buf

pbf.js

thumbnail.png