標準地域メッシュ(2次メッシュ)

README.md

第2次地域区画ポリゴンをキャンバスタイルで表示してみた。 ズームしていくと地域区画と、キャンバスタイルの境界が重なって見えてしまい、見辛い。 対応策を模索中

canvasTile.js

function addCanvasTile(tileIndex, callback){

    return function(coords, done) {
        var thisLayer = this;
        
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var tile = tileIndex.getTile(coords.z, coords.x, coords.y);
        if (!tile) return canvas;

        
        var features = tile.features;
        
      
        canvas.width = 256;
        canvas.height = 256;
        render(ctx, features, coords.z)

        setTimeout(function() {
          done(null, canvas);
        }, 10);

  
        if(callback) onClick(canvas);
  
        return canvas
    }
        
    function render(ctx, features, zoom){
        var padding = 8 / 512;
        var totalExtent = 4096 * (1 + padding * 2);
        var ratio = 256 / totalExtent;
        var pad = 4096 * padding * ratio;
        var radius = ~~(2 - (Math.PI * (3 - Math.sqrt(zoom))));
        if(radius <= 0) radius = 0.6;

      ctx.strokeStyle = "#ccc";
      //ctx.globalCompositeOperation = "lighter";

        
      for (var i = 0; i < features.length; i++) {
        var feature = features[i],
          type = feature.type;

        if (callback) {
          ctx.fillStyle = feature.tags._pickingColor
            ? feature.tags._pickingColor
            : null;
        } else {
          ctx.fillStyle = feature.tags.color ? feature.tags.color : "white";
        }

        ctx.beginPath();

        for (var j = 0; j < feature.geometry.length; j++) {
          var geom = feature.geometry[j];

        if (type === 1) {
            var x = geom[0] * ratio + pad;
            var y = geom[1] * ratio + pad
            ctx.arc(x, y, radius, 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();
      }
        
    }
    
    function onClick(canvas){
      d3
        .select(canvas)
        .on("mousedown", function(d) {
          time = new Date();
        })
        .on("mouseup", function() {
          if (new Date() - time > 300) return; //ドラッグかクリックかを判別する
          var x = d3.event.offsetX;
          var y = d3.event.offsetY;
          var ctx = this.getContext("2d");
          var cid = ctx.getImageData(x, y, 1, 1).data.join();
          
          callback(cid)

        });
        
    }
    
    
}

geobuf.js

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.geobuf=e()}}(function(){return function e(t,r,n){function i(a,u){if(!r[a]){if(!t[a]){var f="function"==typeof require&&require;if(!u&&f)return f(a,!0);if(o)return o(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var s=r[a]={exports:{}};t[a][0].call(s.exports,function(e){var r=t[a][1][e];return i(r?r:e)},s,s.exports,e,t,r,n)}return r[a].exports}for(var o="function"==typeof require&&require,a=0;a<n.length;a++)i(n[a]);return i}({1:[function(e,t){"use strict";function r(e){P=2,S=Math.pow(10,6),V=null,M=[],w=[];var t=e.readFields(n,{});return M=null,t}function n(e,t,r){1===e?M.push(r.readString()):2===e?P=r.readVarint():3===e?S=Math.pow(10,r.readVarint()):4===e?i(r,t):5===e?o(r,t):6===e&&a(r,t)}function i(e,t){return t.type="FeatureCollection",t.features=[],e.readMessage(u,t)}function o(e,t){return t.type="Feature",e.readMessage(f,t)}function a(e,t){return e.readMessage(l,t)}function u(e,t,r){1===e?t.features.push(o(r,{})):13===e?w.push(d(r)):15===e&&c(r,t)}function f(e,t,r){1===e?t.geometry=a(r,{}):11===e?t.id=r.readString():12===e?t.id=r.readSVarint():13===e?w.push(d(r)):14===e?t.properties=c(r,{}):15===e&&c(r,t)}function l(e,t,r){1===e?t.type=m[r.readVarint()]:2===e?V=r.readPackedVarint():3===e?s(t,r,t.type):4===e?(t.geometries=t.geometries||[],t.geometries.push(a(r,{}))):13===e?w.push(d(r)):15===e&&c(r,t)}function s(e,t,r){"Point"===r?e.coordinates=p(t):"MultiPoint"===r?e.coordinates=y(t,!0):"LineString"===r?e.coordinates=y(t):"MultiLineString"===r?e.coordinates=h(t):"Polygon"===r?e.coordinates=h(t,!0):"MultiPolygon"===r&&(e.coordinates=v(t))}function d(e){for(var t=e.readVarint()+e.pos,r=null;e.pos<t;){var n=e.readVarint(),i=n>>3;1===i?r=e.readString():2===i?r=e.readDouble():3===i?r=e.readVarint():4===i?r=-e.readVarint():5===i?r=e.readBoolean():6===i&&(r=JSON.parse(e.readString()))}return r}function c(e,t){for(var r=e.readVarint()+e.pos;e.pos<r;)t[M[e.readVarint()]]=w[e.readVarint()];return w=[],t}function p(e){for(var t=e.readVarint()+e.pos,r=[];e.pos<t;)r.push(e.readSVarint()/S);return r}function g(e,t,r,n){var i,o,a=0,u=[],f=[];for(o=0;P>o;o++)f[o]=0;for(;r?r>a:e.pos<t;){for(i=[],o=0;P>o;o++)f[o]+=e.readSVarint(),i[o]=f[o]/S;u.push(i),a++}return n&&u.push(u[0]),u}function y(e){return g(e,e.readVarint()+e.pos)}function h(e,t){var r=e.readVarint()+e.pos;if(!V)return[g(e,r,null,t)];for(var n=[],i=0;i<V.length;i++)n.push(g(e,r,V[i],t));return V=null,n}function v(e){var t=e.readVarint()+e.pos;if(!V)return[[g(e,t,null,!0)]];for(var r=[],n=1,i=0;i<V[0];i++){for(var o=[],a=0;a<V[n];a++)o.push(g(e,t,V[n+1+a],!0));n+=V[n]+1,r.push(o)}return V=null,r}t.exports=r;var M,w,V,P,S,m=["Point","MultiPoint","LineString","MultiLineString","Polygon","MultiPolygon","GeometryCollection"]},{}],2:[function(e,t){"use strict";function r(e,t){w={},V=0,P=0,S=1,n(e),S=Math.min(S,m);for(var r=Math.ceil(Math.log(S)/Math.LN10),i=Object.keys(w),o=0;o<i.length;o++)t.writeStringField(1,i[o]);return 2!==P&&t.writeVarintField(2,P),6!==r&&t.writeVarintField(3,r),"FeatureCollection"===e.type?t.writeMessage(4,f,e):"Feature"===e.type?t.writeMessage(5,l,e):t.writeMessage(6,s,e),w=null,t.finish()}function n(e){var t,r;if("FeatureCollection"===e.type)for(t=0;t<e.features.length;t++)n(e.features[t]);else if("Feature"===e.type){n(e.geometry);for(r in e.properties)u(r)}else if("Point"===e.type)a(e.coordinates);else if("MultiPoint"===e.type)o(e.coordinates);else if("GeometryCollection"===e.type)for(t=0;t<e.geometries.length;t++)n(e.geometries[t]);else if("LineString"===e.type)o(e.coordinates);else if("Polygon"===e.type||"MultiLineString"===e.type)i(e.coordinates);else if("MultiPolygon"===e.type)for(t=0;t<e.coordinates.length;t++)i(e.coordinates[t]);for(r in e)M(r,e.type)||u(r)}function i(e){for(var t=0;t<e.length;t++)o(e[t])}function o(e){for(var t=0;t<e.length;t++)a(e[t])}function a(e){P=Math.max(P,e.length);for(var t=0;t<e.length;t++)for(;Math.round(e[t]*S)/S!==e[t]&&m>S;)S*=10}function u(e){void 0===w[e]&&(w[e]=V++)}function f(e,t){for(var r=0;r<e.features.length;r++)t.writeMessage(1,l,e.features[r]);d(e,t,!0)}function l(e,t){t.writeMessage(1,s,e.geometry),void 0!==e.id&&("number"==typeof e.id&&e.id%1===0?t.writeSVarintField(12,e.id):t.writeStringField(11,e.id)),e.properties&&d(e.properties,t),d(e,t,!0)}function s(e,t){t.writeVarintField(1,F[e.type]);var r=e.coordinates;if("Point"===e.type)p(r,t);else if("MultiPoint"===e.type)g(r,t,!0);else if("LineString"===e.type)g(r,t);else if("MultiLineString"===e.type)y(r,t);else if("Polygon"===e.type)y(r,t,!0);else if("MultiPolygon"===e.type)h(r,t);else if("GeometryCollection"===e.type)for(var n=0;n<e.geometries.length;n++)t.writeMessage(4,s,e.geometries[n]);d(e,t,!0)}function d(e,t,r){var n=[],i=0;for(var o in e)r&&M(o,e.type)||(t.writeMessage(13,c,e[o]),n.push(w[o]),n.push(i++));t.writePackedVarint(r?15:14,n)}function c(e,t){var r=typeof e;"string"===r?t.writeStringField(1,e):"boolean"===r?t.writeBooleanField(5,e):"object"===r?t.writeStringField(6,JSON.stringify(e)):"number"===r&&(e%1!==0?t.writeDoubleField(2,e):e>=0?t.writeVarintField(3,e):t.writeVarintField(4,-e))}function p(e,t){for(var r=[],n=0;P>n;n++)r.push(Math.round(e[n]*S));t.writePackedSVarint(3,r)}function g(e,t){var r=[];v(r,e),t.writePackedSVarint(3,r)}function y(e,t,r){var n,i=e.length;if(1!==i){var o=[];for(n=0;i>n;n++)o.push(e[n].length-(r?1:0));t.writePackedVarint(2,o)}var a=[];for(n=0;i>n;n++)v(a,e[n],r);t.writePackedSVarint(3,a)}function h(e,t){var r,n,i=e.length;if(1!==i||1!==e[0].length){var o=[i];for(r=0;i>r;r++)for(o.push(e[r].length),n=0;n<e[r].length;n++)o.push(e[r][n].length-1);t.writePackedVarint(2,o)}var a=[];for(r=0;i>r;r++)for(n=0;n<e[r].length;n++)v(a,e[r][n],!0);t.writePackedSVarint(3,a)}function v(e,t,r){var n,i,o=t.length-(r?1:0),a=new Array(P);for(i=0;P>i;i++)a[i]=0;for(n=0;o>n;n++)for(i=0;P>i;i++){var u=Math.round(t[n][i]*S)-a[i];e.push(u),a[i]+=u}}function M(e,t){if("type"===e)return!0;if("FeatureCollection"===t){if("features"===e)return!0}else if("Feature"===t){if("id"===e||"properties"===e||"geometry"===e)return!0}else if("GeometryCollection"===t){if("geometries"===e)return!0}else if("coordinates"===e)return!0;return!1}t.exports=r;var w,V,P,S,m=1e6,F={Point:0,MultiPoint:1,LineString:2,MultiLineString:3,Polygon:4,MultiPolygon:5,GeometryCollection:6}},{}],3:[function(e,t,r){"use strict";r.encode=e("./encode"),r.decode=e("./decode")},{"./decode":1,"./encode":2}]},{},[3])(3)});

geojson-vt.js

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).geojsonvt=e()}}(function(){return function(){return function e(t,n,i){function o(s,u){if(!n[s]){if(!t[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(r)return r(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var f=n[s]={exports:{}};t[s][0].call(f.exports,function(e){var n=t[s][1][e];return o(n||e)},f,f.exports,e,t,n,i)}return n[s].exports}for(var r="function"==typeof require&&require,s=0;s<i.length;s++)o(i[s]);return o}}()({1:[function(e,t,n){"use strict";t.exports=function(e,t,n,u,l,a,f){{if(u/=t,a>=(n/=t)&&f<=u)return e;if(a>u||f<n)return null}for(var h=[],m=0;m<e.length;m++){var p=e[m],g=p.geometry,c=p.type,d=0===l?p.minX:p.minY,v=0===l?p.maxX:p.maxY;if(d>=n&&v<=u)h.push(p);else if(!(d>u||v<n)){var x=[];if("Point"===c||"MultiPoint"===c)o(g,x,n,u,l);else if("LineString"===c)r(g,x,n,u,l,!1);else if("MultiLineString"===c)s(g,x,n,u,l,!1);else if("Polygon"===c)s(g,x,n,u,l,!0);else if("MultiPolygon"===c)for(var y=0;y<g.length;y++){var M=[];s(g[y],M,n,u,l,!0),M.length&&x.push(M)}x.length&&("LineString"!==c&&"MultiLineString"!==c||(1===x.length?(c="LineString",x=x[0]):c="MultiLineString"),"Point"!==c&&"MultiPoint"!==c||(c=3===x.length?"Point":"MultiPoint"),h.push(i(p.id,c,x,p.tags)))}}return h.length?h:null};var i=e("./feature");function o(e,t,n,i,o){for(var r=0;r<e.length;r+=3){var s=e[r+o];s>=n&&s<=i&&(t.push(e[r]),t.push(e[r+1]),t.push(e[r+2]))}}function r(e,t,n,i,o,r){for(var s=[],f=0===o?l:a,h=0;h<e.length-3;h+=3){var m=e[h],p=e[h+1],g=e[h+2],c=e[h+3],d=e[h+4],v=0===o?m:p,x=0===o?c:d,y=!1;v<n?x>=n&&f(s,m,p,c,d,n):v>i?x<=i&&f(s,m,p,c,d,i):u(s,m,p,g),x<n&&v>=n&&(f(s,m,p,c,d,n),y=!0),x>i&&v<=i&&(f(s,m,p,c,d,i),y=!0),!r&&y&&(s.size=e.size,t.push(s),s=[])}var M=e.length-3;m=e[M],p=e[M+1],g=e[M+2],(v=0===o?m:p)>=n&&v<=i&&u(s,m,p,g),M=s.length-3,r&&M>=3&&(s[M]!==s[0]||s[M+1]!==s[1])&&u(s,s[0],s[1],s[2]),s.length&&(s.size=e.size,t.push(s))}function s(e,t,n,i,o,s){for(var u=0;u<e.length;u++)r(e[u],t,n,i,o,s)}function u(e,t,n,i){e.push(t),e.push(n),e.push(i)}function l(e,t,n,i,o,r){e.push(r),e.push(n+(r-t)*(o-n)/(i-t)),e.push(1)}function a(e,t,n,i,o,r){e.push(t+(r-n)*(i-t)/(o-n)),e.push(r),e.push(1)}},{"./feature":3}],2:[function(e,t,n){"use strict";t.exports=function(e,t){var n=[];if("FeatureCollection"===e.type)for(var i=0;i<e.features.length;i++)r(n,e.features[i],t);else"Feature"===e.type?r(n,e,t):r(n,{geometry:e},t);return n};var i=e("./simplify"),o=e("./feature");function r(e,t,n){if(t.geometry){var i=t.geometry.coordinates,a=t.geometry.type,f=n*n,h=[];if("Point"===a)s(i,h);else if("MultiPoint"===a)for(var m=0;m<i.length;m++)s(i[m],h);else if("LineString"===a)u(i,h,f,!1);else if("MultiLineString"===a)l(i,h,f,!1);else if("Polygon"===a)l(i,h,f,!0);else{if("MultiPolygon"!==a){if("GeometryCollection"===a){for(m=0;m<t.geometry.geometries.length;m++)r(e,{geometry:t.geometry.geometries[m],properties:t.properties},n);return}throw new Error("Input data is not a valid GeoJSON object.")}for(m=0;m<i.length;m++){var p=[];l(i[m],p,f,!0),h.push(p)}}e.push(o(t.id,a,h,t.properties))}}function s(e,t){t.push(a(e[0])),t.push(f(e[1])),t.push(0)}function u(e,t,n,o){for(var r,s,u=0,l=0;l<e.length;l++){var h=a(e[l][0]),m=f(e[l][1]);t.push(h),t.push(m),t.push(0),l>0&&(u+=o?(r*m-h*s)/2:Math.sqrt(Math.pow(h-r,2)+Math.pow(m-s,2))),r=h,s=m}var p=t.length-3;t[2]=1,i(t,0,p,n),t[p+2]=1,t.size=Math.abs(u)}function l(e,t,n,i){for(var o=0;o<e.length;o++){var r=[];u(e[o],r,n,i),t.push(r)}}function a(e){return e/360+.5}function f(e){var t=Math.sin(e*Math.PI/180),n=.5-.25*Math.log((1+t)/(1-t))/Math.PI;return n<0?0:n>1?1:n}},{"./feature":3,"./simplify":5}],3:[function(e,t,n){"use strict";function i(e,t){for(var n=0;n<t.length;n+=3)e.minX=Math.min(e.minX,t[n]),e.minY=Math.min(e.minY,t[n+1]),e.maxX=Math.max(e.maxX,t[n]),e.maxY=Math.max(e.maxY,t[n+1])}t.exports=function(e,t,n,o){var r={id:e||null,type:t,geometry:n,tags:o,minX:1/0,minY:1/0,maxX:-1/0,maxY:-1/0};return function(e){var t=e.geometry,n=e.type;if("Point"===n||"MultiPoint"===n||"LineString"===n)i(e,t);else if("Polygon"===n||"MultiLineString"===n)for(var o=0;o<t.length;o++)i(e,t[o]);else if("MultiPolygon"===n)for(o=0;o<t.length;o++)for(var r=0;r<t[o].length;r++)i(e,t[o][r])}(r),r}},{}],4:[function(e,t,n){"use strict";t.exports=function(e,t){return new l(e,t)};var i=e("./convert"),o=e("./transform"),r=e("./clip"),s=e("./wrap"),u=e("./tile");function l(e,t){var n=(t=this.options=function(e,t){for(var n in t)e[n]=t[n];return e}(Object.create(this.options),t)).debug;if(n&&console.time("preprocess data"),t.maxZoom<0||t.maxZoom>24)throw new Error("maxZoom should be in the 0-24 range");var o=1<<t.maxZoom,r=i(e,t.tolerance/(o*t.extent));this.tiles={},this.tileCoords=[],n&&(console.timeEnd("preprocess data"),console.log("index: maxZoom: %d, maxPoints: %d",t.indexMaxZoom,t.indexMaxPoints),console.time("generate tiles"),this.stats={},this.total=0),(r=s(r,t.buffer/t.extent)).length&&this.splitTile(r,0,0,0),n&&(r.length&&console.log("features: %d, points: %d",this.tiles[0].numFeatures,this.tiles[0].numPoints),console.timeEnd("generate tiles"),console.log("tiles generated:",this.total,JSON.stringify(this.stats)))}function a(e,t,n){return 32*((1<<e)*n+t)+e}l.prototype.options={maxZoom:14,indexMaxZoom:5,indexMaxPoints:1e5,tolerance:3,extent:4096,buffer:64,debug:0},l.prototype.splitTile=function(e,t,n,i,o,s,l){for(var f=[e,t,n,i],h=this.options,m=h.debug;f.length;){i=f.pop(),n=f.pop(),t=f.pop(),e=f.pop();var p=1<<t,g=a(t,n,i),c=this.tiles[g],d=t===h.maxZoom?0:h.tolerance/(p*h.extent);if(!c&&(m>1&&console.time("creation"),c=this.tiles[g]=u(e,p,n,i,d,t===h.maxZoom),this.tileCoords.push({z:t,x:n,y:i}),m)){m>1&&(console.log("tile z%d-%d-%d (features: %d, points: %d, simplified: %d)",t,n,i,c.numFeatures,c.numPoints,c.numSimplified),console.timeEnd("creation"));var v="z"+t;this.stats[v]=(this.stats[v]||0)+1,this.total++}if(c.source=e,o){if(t===h.maxZoom||t===o)continue;var x=1<<o-t;if(n!==Math.floor(s/x)||i!==Math.floor(l/x))continue}else if(t===h.indexMaxZoom||c.numPoints<=h.indexMaxPoints)continue;if(c.source=null,0!==e.length){m>1&&console.time("clipping");var y,M,P,Y,S,X,w=.5*h.buffer/h.extent,L=.5-w,z=.5+w,b=1+w;y=M=P=Y=null,S=r(e,p,n-w,n+z,0,c.minX,c.maxX),X=r(e,p,n+L,n+b,0,c.minX,c.maxX),e=null,S&&(y=r(S,p,i-w,i+z,1,c.minY,c.maxY),M=r(S,p,i+L,i+b,1,c.minY,c.maxY),S=null),X&&(P=r(X,p,i-w,i+z,1,c.minY,c.maxY),Y=r(X,p,i+L,i+b,1,c.minY,c.maxY),X=null),m>1&&console.timeEnd("clipping"),f.push(y||[],t+1,2*n,2*i),f.push(M||[],t+1,2*n,2*i+1),f.push(P||[],t+1,2*n+1,2*i),f.push(Y||[],t+1,2*n+1,2*i+1)}}},l.prototype.getTile=function(e,t,n){var i=this.options,r=i.extent,s=i.debug;if(e<0||e>24)return null;var u=1<<e,l=a(e,t=(t%u+u)%u,n);if(this.tiles[l])return o.tile(this.tiles[l],r);s>1&&console.log("drilling down to z%d-%d-%d",e,t,n);for(var f,h=e,m=t,p=n;!f&&h>0;)h--,m=Math.floor(m/2),p=Math.floor(p/2),f=this.tiles[a(h,m,p)];return f&&f.source?(s>1&&console.log("found parent tile z%d-%d-%d",h,m,p),s>1&&console.time("drilling down"),this.splitTile(f.source,h,m,p,e,t,n),s>1&&console.timeEnd("drilling down"),this.tiles[l]?o.tile(this.tiles[l],r):null):null}},{"./clip":1,"./convert":2,"./tile":6,"./transform":7,"./wrap":8}],5:[function(e,t,n){"use strict";function i(e,t,n,i,o,r){var s=o-n,u=r-i;if(0!==s||0!==u){var l=((e-n)*s+(t-i)*u)/(s*s+u*u);l>1?(n=o,i=r):l>0&&(n+=s*l,i+=u*l)}return(s=e-n)*s+(u=t-i)*u}t.exports=function e(t,n,o,r){var s=r;var u;var l=t[n];var a=t[n+1];var f=t[o];var h=t[o+1];for(var m=n+3;m<o;m+=3){var p=i(t[m],t[m+1],l,a,f,h);p>s&&(u=m,s=p)}s>r&&(u-n>3&&e(t,n,u,r),t[u+2]=s,o-u>3&&e(t,u,o,r))}},{}],6:[function(e,t,n){"use strict";function i(e,t,n,i){var r=t.geometry,s=t.type,u=[];if("Point"===s||"MultiPoint"===s)for(var l=0;l<r.length;l+=3)u.push(r[l]),u.push(r[l+1]),e.numPoints++,e.numSimplified++;else if("LineString"===s)o(u,r,e,n,i,!1,!1);else if("MultiLineString"===s||"Polygon"===s)for(l=0;l<r.length;l++)o(u,r[l],e,n,i,"Polygon"===s,0===l);else if("MultiPolygon"===s)for(var a=0;a<r.length;a++){var f=r[a];for(l=0;l<f.length;l++)o(u,f[l],e,n,i,!0,0===l)}if(u.length){var h={geometry:u,type:"Polygon"===s||"MultiPolygon"===s?3:"LineString"===s||"MultiLineString"===s?2:1,tags:t.tags||null};null!==t.id&&(h.id=t.id),e.features.push(h)}}function o(e,t,n,i,o,r,s){var u=i*i;if(!o&&t.size<(r?u:i))n.numPoints+=t.length/3;else{for(var l=[],a=0;a<t.length;a+=3)(o||t[a+2]>u)&&(n.numSimplified++,l.push(t[a]),l.push(t[a+1])),n.numPoints++;r&&function(e,t){for(var n=0,i=0,o=e.length,r=o-2;i<o;r=i,i+=2)n+=(e[i]-e[r])*(e[i+1]+e[r+1]);if(n>0===t)for(i=0,o=e.length;i<o/2;i+=2){var s=e[i],u=e[i+1];e[i]=e[o-2-i],e[i+1]=e[o-1-i],e[o-2-i]=s,e[o-1-i]=u}}(l,s),e.push(l)}}t.exports=function(e,t,n,o,r,s){for(var u={features:[],numPoints:0,numSimplified:0,numFeatures:0,source:null,x:n,y:o,z2:t,transformed:!1,minX:2,minY:1,maxX:-1,maxY:0},l=0;l<e.length;l++){u.numFeatures++,i(u,e[l],r,s);var a=e[l].minX,f=e[l].minY,h=e[l].maxX,m=e[l].maxY;a<u.minX&&(u.minX=a),f<u.minY&&(u.minY=f),h>u.maxX&&(u.maxX=h),m>u.maxY&&(u.maxY=m)}return u}},{}],7:[function(e,t,n){"use strict";function i(e,t,n,i,o,r){return[Math.round(n*(e*i-o)),Math.round(n*(t*i-r))]}n.tile=function(e,t){if(e.transformed)return e;var n,o,r,s=e.z2,u=e.x,l=e.y;for(n=0;n<e.features.length;n++){var a=e.features[n],f=a.geometry,h=a.type;if(a.geometry=[],1===h)for(o=0;o<f.length;o+=2)a.geometry.push(i(f[o],f[o+1],t,s,u,l));else for(o=0;o<f.length;o++){var m=[];for(r=0;r<f[o].length;r+=2)m.push(i(f[o][r],f[o][r+1],t,s,u,l));a.geometry.push(m)}}return e.transformed=!0,e},n.point=i},{}],8:[function(e,t,n){"use strict";var i=e("./clip"),o=e("./feature");function r(e,t){for(var n=[],i=0;i<e.length;i++){var r,u=e[i],l=u.type;if("Point"===l||"MultiPoint"===l||"LineString"===l)r=s(u.geometry,t);else if("MultiLineString"===l||"Polygon"===l){r=[];for(var a=0;a<u.geometry.length;a++)r.push(s(u.geometry[a],t))}else if("MultiPolygon"===l)for(r=[],a=0;a<u.geometry.length;a++){for(var f=[],h=0;h<u.geometry[a].length;h++)f.push(s(u.geometry[a][h],t));r.push(f)}n.push(o(u.id,l,r,u.tags))}return n}function s(e,t){var n=[];n.size=e.size;for(var i=0;i<e.length;i+=3)n.push(e[i]+t,e[i+1],e[i+2]);return n}t.exports=function(e,t){var n=e,o=i(e,1,-1-t,t,0,-1,2),s=i(e,1,1-t,2+t,0,-1,2);(o||s)&&(n=i(e,1,-t,1+t,0,-1,2)||[],o&&(n=r(o,1).concat(n)),s&&(n=n.concat(r(s,-1))));return n}},{"./clip":1,"./feature":3}]},{},[4])(4)});

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
<script src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="//unpkg.com/pbf@3.0.5/dist/pbf.js"></script>
<script src="//unpkg.com/geobuf@3.0.0/dist/geobuf.js"></script>
<script src="geojson-vt.js"></script>

<script src="canvasTile.js"></script>

<style>
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgba(6, 6, 6, 0.8);
  height: 100%;
  font-size: 100%;
}
#map {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #333;
}

#map canvas {
  width: 256px;
  height: 256px;
  cursor: pointer;
}

.leaflet-tile-container canvas {
  pointer-events: auto;
}
</style>
</head>

<body>
<div id="map" />


<script>
Pbf.prototype.readFields = function (readField, result, end) {
  end = end || this.length

  while (this.pos < end) {
    var val = this.readVarint()
    var tag = val >> 3
    var startPos = this.pos

    this.type = val & 0x7
    readField(tag, result, this)

     if (this.pos === startPos) this.skip(val)
  }
  return result
}  
  
  
var map = L.map("map").setView([35.685175, 139.75279950000004], 6);
var tileOptions = {
  maxZoom: 20,
  tolerance: 5,
  extent: 4096,
  buffer: 64,
  debug: 0,
  indexMaxZoom: 0,
  indexMaxPoints: 100000
};


loadGeobuf("mesh2.buf", render);


function render(data) {
  data.features.forEach(function(d, i) {    
    d.properties.color = "white";
  });


  var tileIndex = geojsonvt(data, tileOptions);

  
  //表示用タイル
  var grid = L.gridLayer();
  var prevGridLayer = grid;    
  var canvasTile = addCanvasTile(tileIndex);
  grid.createTile = function(coords, done) {
    var canvas = canvasTile(coords, done);
    return canvas;
  };
  map.addLayer(grid);
    
}


function loadGeobuf(file, callback) {
  var oReq = new XMLHttpRequest();
  oReq.open("GET", file, true);
  oReq.responseType = "arraybuffer";

  oReq.onload = function(oEvent) {
    var pd = new Pbf(new Uint8Array(oReq.response));
    callback(geobuf.decode(pd));
  };

  oReq.send();
}

function toColor(num) {
  num >>>= 0;
  var b = num & 0xff,
    g = (num & 0xff00) >>> 8,
    r = (num & 0xff0000) >>> 16;

  return {
    color: "rgb(" + [r, g, b].join(",") + ")",
    id: [r, g, b, 255].join()
  };
}



</script>
</body>
</html>

mesh2.buf

pbf.js

!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var i;i="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,i.Pbf=t()}}(function(){return function t(i,e,r){function s(o,h){if(!e[o]){if(!i[o]){var a="function"==typeof require&&require;if(!h&&a)return a(o,!0);if(n)return n(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var f=e[o]={exports:{}};i[o][0].call(f.exports,function(t){var e=i[o][1][t];return s(e?e:t)},f,f.exports,t,i,e,r)}return e[o].exports}for(var n="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(t,i,e){"use strict";function r(t){this.buf=ArrayBuffer.isView(t)?t:new Uint8Array(t||0),this.pos=0,this.type=0,this.length=this.buf.length}function s(t,i,e){var r,s,n=e.buf;if(s=n[e.pos++],r=(112&s)>>4,s<128)return o(t,r,i);if(s=n[e.pos++],r|=(127&s)<<3,s<128)return o(t,r,i);if(s=n[e.pos++],r|=(127&s)<<10,s<128)return o(t,r,i);if(s=n[e.pos++],r|=(127&s)<<17,s<128)return o(t,r,i);if(s=n[e.pos++],r|=(127&s)<<24,s<128)return o(t,r,i);if(s=n[e.pos++],r|=(1&s)<<31,s<128)return o(t,r,i);throw new Error("Expected varint not more than 10 bytes")}function n(t){return t.type===r.Bytes?t.readVarint()+t.pos:t.pos+1}function o(t,i,e){return e?4294967296*i+(t>>>0):4294967296*(i>>>0)+(t>>>0)}function h(t,i){var e,r;if(t>=0?(e=t%4294967296|0,r=t/4294967296|0):(e=~(-t%4294967296),r=~(-t/4294967296),4294967295^e?e=e+1|0:(e=0,r=r+1|0)),t>=0x10000000000000000||t<-0x10000000000000000)throw new Error("Given varint doesn't fit into 10 bytes");i.realloc(10),a(e,r,i),u(r,i)}function a(t,i,e){e.buf[e.pos++]=127&t|128,t>>>=7,e.buf[e.pos++]=127&t|128,t>>>=7,e.buf[e.pos++]=127&t|128,t>>>=7,e.buf[e.pos++]=127&t|128,t>>>=7,e.buf[e.pos]=127&t}function u(t,i){var e=(7&t)<<4;i.buf[i.pos++]|=e|((t>>>=3)?128:0),t&&(i.buf[i.pos++]=127&t|((t>>>=7)?128:0),t&&(i.buf[i.pos++]=127&t|((t>>>=7)?128:0),t&&(i.buf[i.pos++]=127&t|((t>>>=7)?128:0),t&&(i.buf[i.pos++]=127&t|((t>>>=7)?128:0),t&&(i.buf[i.pos++]=127&t)))))}function f(t,i,e){var r=i<=16383?1:i<=2097151?2:i<=268435455?3:Math.ceil(Math.log(i)/(7*Math.LN2));e.realloc(r);for(var s=e.pos-1;s>=t;s--)e.buf[s+r]=e.buf[s]}function d(t,i){for(var e=0;e<t.length;e++)i.writeVarint(t[e])}function p(t,i){for(var e=0;e<t.length;e++)i.writeSVarint(t[e])}function c(t,i){for(var e=0;e<t.length;e++)i.writeFloat(t[e])}function l(t,i){for(var e=0;e<t.length;e++)i.writeDouble(t[e])}function w(t,i){for(var e=0;e<t.length;e++)i.writeBoolean(t[e])}function F(t,i){for(var e=0;e<t.length;e++)i.writeFixed32(t[e])}function b(t,i){for(var e=0;e<t.length;e++)i.writeSFixed32(t[e])}function v(t,i){for(var e=0;e<t.length;e++)i.writeFixed64(t[e])}function g(t,i){for(var e=0;e<t.length;e++)i.writeSFixed64(t[e])}function x(t,i){return(t[i]|t[i+1]<<8|t[i+2]<<16)+16777216*t[i+3]}function V(t,i,e){t[e]=i,t[e+1]=i>>>8,t[e+2]=i>>>16,t[e+3]=i>>>24}function M(t,i){return(t[i]|t[i+1]<<8|t[i+2]<<16)+(t[i+3]<<24)}function y(t,i,e){for(var r="",s=i;s<e;){var n=t[s],o=null,h=n>239?4:n>223?3:n>191?2:1;if(s+h>e)break;var a,u,f;1===h?n<128&&(o=n):2===h?(a=t[s+1],128===(192&a)&&(o=(31&n)<<6|63&a,o<=127&&(o=null))):3===h?(a=t[s+1],u=t[s+2],128===(192&a)&&128===(192&u)&&(o=(15&n)<<12|(63&a)<<6|63&u,(o<=2047||o>=55296&&o<=57343)&&(o=null))):4===h&&(a=t[s+1],u=t[s+2],f=t[s+3],128===(192&a)&&128===(192&u)&&128===(192&f)&&(o=(15&n)<<18|(63&a)<<12|(63&u)<<6|63&f,(o<=65535||o>=1114112)&&(o=null))),null===o?(o=65533,h=1):o>65535&&(o-=65536,r+=String.fromCharCode(o>>>10&1023|55296),o=56320|1023&o),r+=String.fromCharCode(o),s+=h}return r}function S(t,i,e){for(var r,s,n=0;n<i.length;n++){if(r=i.charCodeAt(n),r>55295&&r<57344){if(!s){r>56319||n+1===i.length?(t[e++]=239,t[e++]=191,t[e++]=189):s=r;continue}if(r<56320){t[e++]=239,t[e++]=191,t[e++]=189,s=r;continue}r=s-55296<<10|r-56320|65536,s=null}else s&&(t[e++]=239,t[e++]=191,t[e++]=189,s=null);r<128?t[e++]=r:(r<2048?t[e++]=r>>6|192:(r<65536?t[e++]=r>>12|224:(t[e++]=r>>18|240,t[e++]=r>>12&63|128),t[e++]=r>>6&63|128),t[e++]=63&r|128)}return e}i.exports=r;var k=t("ieee754");r.Varint=0,r.Fixed64=1,r.Bytes=2,r.Fixed32=5;var B=4294967296,P=1/B;r.prototype={destroy:function(){this.buf=null},readFields:function(t,i,e){for(e=e||this.length;this.pos<e;){var r=this.readVarint(),s=r>>3,n=this.pos;this.type=7&r,t(s,i,this),this.pos===n&&this.skip(r)}return i},readMessage:function(t,i){return this.readFields(t,i,this.readVarint()+this.pos)},readFixed32:function(){var t=x(this.buf,this.pos);return this.pos+=4,t},readSFixed32:function(){var t=M(this.buf,this.pos);return this.pos+=4,t},readFixed64:function(){var t=x(this.buf,this.pos)+x(this.buf,this.pos+4)*B;return this.pos+=8,t},readSFixed64:function(){var t=x(this.buf,this.pos)+M(this.buf,this.pos+4)*B;return this.pos+=8,t},readFloat:function(){var t=k.read(this.buf,this.pos,!0,23,4);return this.pos+=4,t},readDouble:function(){var t=k.read(this.buf,this.pos,!0,52,8);return this.pos+=8,t},readVarint:function(t){var i,e,r=this.buf;return e=r[this.pos++],i=127&e,e<128?i:(e=r[this.pos++],i|=(127&e)<<7,e<128?i:(e=r[this.pos++],i|=(127&e)<<14,e<128?i:(e=r[this.pos++],i|=(127&e)<<21,e<128?i:(e=r[this.pos],i|=(15&e)<<28,s(i,t,this)))))},readVarint64:function(){return this.readVarint(!0)},readSVarint:function(){var t=this.readVarint();return t%2===1?(t+1)/-2:t/2},readBoolean:function(){return Boolean(this.readVarint())},readString:function(){var t=this.readVarint()+this.pos,i=y(this.buf,this.pos,t);return this.pos=t,i},readBytes:function(){var t=this.readVarint()+this.pos,i=this.buf.subarray(this.pos,t);return this.pos=t,i},readPackedVarint:function(t,i){var e=n(this);for(t=t||[];this.pos<e;)t.push(this.readVarint(i));return t},readPackedSVarint:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readSVarint());return t},readPackedBoolean:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readBoolean());return t},readPackedFloat:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readFloat());return t},readPackedDouble:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readDouble());return t},readPackedFixed32:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readFixed32());return t},readPackedSFixed32:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readSFixed32());return t},readPackedFixed64:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readFixed64());return t},readPackedSFixed64:function(t){var i=n(this);for(t=t||[];this.pos<i;)t.push(this.readSFixed64());return t},skip:function(t){var i=7&t;if(i===r.Varint)for(;this.buf[this.pos++]>127;);else if(i===r.Bytes)this.pos=this.readVarint()+this.pos;else if(i===r.Fixed32)this.pos+=4;else{if(i!==r.Fixed64)throw new Error("Unimplemented type: "+i);this.pos+=8}},writeTag:function(t,i){this.writeVarint(t<<3|i)},realloc:function(t){for(var i=this.length||16;i<this.pos+t;)i*=2;if(i!==this.length){var e=new Uint8Array(i);e.set(this.buf),this.buf=e,this.length=i}},finish:function(){return this.length=this.pos,this.pos=0,this.buf.subarray(0,this.length)},writeFixed32:function(t){this.realloc(4),V(this.buf,t,this.pos),this.pos+=4},writeSFixed32:function(t){this.realloc(4),V(this.buf,t,this.pos),this.pos+=4},writeFixed64:function(t){this.realloc(8),V(this.buf,t&-1,this.pos),V(this.buf,Math.floor(t*P),this.pos+4),this.pos+=8},writeSFixed64:function(t){this.realloc(8),V(this.buf,t&-1,this.pos),V(this.buf,Math.floor(t*P),this.pos+4),this.pos+=8},writeVarint:function(t){return t=+t||0,t>268435455||t<0?void h(t,this):(this.realloc(4),this.buf[this.pos++]=127&t|(t>127?128:0),void(t<=127||(this.buf[this.pos++]=127&(t>>>=7)|(t>127?128:0),t<=127||(this.buf[this.pos++]=127&(t>>>=7)|(t>127?128:0),t<=127||(this.buf[this.pos++]=t>>>7&127)))))},writeSVarint:function(t){this.writeVarint(t<0?2*-t-1:2*t)},writeBoolean:function(t){this.writeVarint(Boolean(t))},writeString:function(t){t=String(t),this.realloc(4*t.length),this.pos++;var i=this.pos;this.pos=S(this.buf,t,this.pos);var e=this.pos-i;e>=128&&f(i,e,this),this.pos=i-1,this.writeVarint(e),this.pos+=e},writeFloat:function(t){this.realloc(4),k.write(this.buf,t,this.pos,!0,23,4),this.pos+=4},writeDouble:function(t){this.realloc(8),k.write(this.buf,t,this.pos,!0,52,8),this.pos+=8},writeBytes:function(t){var i=t.length;this.writeVarint(i),this.realloc(i);for(var e=0;e<i;e++)this.buf[this.pos++]=t[e]},writeRawMessage:function(t,i){this.pos++;var e=this.pos;t(i,this);var r=this.pos-e;r>=128&&f(e,r,this),this.pos=e-1,this.writeVarint(r),this.pos+=r},writeMessage:function(t,i,e){this.writeTag(t,r.Bytes),this.writeRawMessage(i,e)},writePackedVarint:function(t,i){this.writeMessage(t,d,i)},writePackedSVarint:function(t,i){this.writeMessage(t,p,i)},writePackedBoolean:function(t,i){this.writeMessage(t,w,i)},writePackedFloat:function(t,i){this.writeMessage(t,c,i)},writePackedDouble:function(t,i){this.writeMessage(t,l,i)},writePackedFixed32:function(t,i){this.writeMessage(t,F,i)},writePackedSFixed32:function(t,i){this.writeMessage(t,b,i)},writePackedFixed64:function(t,i){this.writeMessage(t,v,i)},writePackedSFixed64:function(t,i){this.writeMessage(t,g,i)},writeBytesField:function(t,i){this.writeTag(t,r.Bytes),this.writeBytes(i)},writeFixed32Field:function(t,i){this.writeTag(t,r.Fixed32),this.writeFixed32(i)},writeSFixed32Field:function(t,i){this.writeTag(t,r.Fixed32),this.writeSFixed32(i)},writeFixed64Field:function(t,i){this.writeTag(t,r.Fixed64),this.writeFixed64(i)},writeSFixed64Field:function(t,i){this.writeTag(t,r.Fixed64),this.writeSFixed64(i)},writeVarintField:function(t,i){this.writeTag(t,r.Varint),this.writeVarint(i)},writeSVarintField:function(t,i){this.writeTag(t,r.Varint),this.writeSVarint(i)},writeStringField:function(t,i){this.writeTag(t,r.Bytes),this.writeString(i)},writeFloatField:function(t,i){this.writeTag(t,r.Fixed32),this.writeFloat(i)},writeDoubleField:function(t,i){this.writeTag(t,r.Fixed64),this.writeDouble(i)},writeBooleanField:function(t,i){this.writeVarintField(t,Boolean(i))}}},{ieee754:2}],2:[function(t,i,e){e.read=function(t,i,e,r,s){var n,o,h=8*s-r-1,a=(1<<h)-1,u=a>>1,f=-7,d=e?s-1:0,p=e?-1:1,c=t[i+d];for(d+=p,n=c&(1<<-f)-1,c>>=-f,f+=h;f>0;n=256*n+t[i+d],d+=p,f-=8);for(o=n&(1<<-f)-1,n>>=-f,f+=r;f>0;o=256*o+t[i+d],d+=p,f-=8);if(0===n)n=1-u;else{if(n===a)return o?NaN:(c?-1:1)*(1/0);o+=Math.pow(2,r),n-=u}return(c?-1:1)*o*Math.pow(2,n-r)},e.write=function(t,i,e,r,s,n){var o,h,a,u=8*n-s-1,f=(1<<u)-1,d=f>>1,p=23===s?Math.pow(2,-24)-Math.pow(2,-77):0,c=r?0:n-1,l=r?1:-1,w=i<0||0===i&&1/i<0?1:0;for(i=Math.abs(i),isNaN(i)||i===1/0?(h=isNaN(i)?1:0,o=f):(o=Math.floor(Math.log(i)/Math.LN2),i*(a=Math.pow(2,-o))<1&&(o--,a*=2),i+=o+d>=1?p/a:p*Math.pow(2,1-d),i*a>=2&&(o++,a/=2),o+d>=f?(h=0,o=f):o+d>=1?(h=(i*a-1)*Math.pow(2,s),o+=d):(h=i*Math.pow(2,d-1)*Math.pow(2,s),o=0));s>=8;t[e+c]=255&h,c+=l,h/=256,s-=8);for(o=o<<s|h,u+=s;u>0;t[e+c]=255&o,c+=l,o/=256,u-=8);t[e+c-l]|=128*w}},{}]},{},[1])(1)});

thumbnail.png