पत्रिका में geojson-vt द्वारा उत्पन्न वेक्टर टाइल्स कैसे प्रदर्शित करें?

Question

मेरे पास बहुत सारे जियोजसन स्थानिक डेटा हैं जिन्हें मैं एक पुस्तिका पुस्तिका पर प्रदर्शित करना चाहता हूं। लगभग 35,000 GeoJSON वस्तुओं।

क्योंकि अंक की राशि बहुत बड़ी प्राप्त कर सकते हैं, मैं ग्राहक पक्ष पर अपने डेटा टाइल करने के लिए geojson-vt लाइब्रेरी का उपयोग करना चाहता था।

var geoJson = {}; // Request to get data via API call not shown here 

var tileOptions = { 
     maxZoom: 18, 
     tolerance: 5, 
     extent: 4096, 
     buffer: 64, 
     debug: 0, 
     indexMaxZoom: 0, 
     indexMaxPoints: 100000, 
    }; 

var tileIndex = geojsonvt(geoJson, tileOptions); 

मैं अपने पत्रक मानचित्र को GeoJSON-vt द्वारा उत्पन्न वेक्टर टाइल डेटा कैसे एकीकृत है:

अभी मैं सफलतापूर्वक GeoJSON-vt लाइब्रेरी का उपयोग कर अपने डेटा टाइलों है?

क्या कोई अनुशंसित प्लगइन्स या पुस्तकालय हैं जो मदद कर सकते हैं?

Answer 1

GeoJSON-vt के TileIndex.getTile() रिटर्न MapBox वेक्टर टाइल कल्पना की एक JSON संस्करण:

मैं किसी भी पुस्तकालय है कि इस प्रारूप प्रदर्शित कर सकते हैं के बारे में पता नहीं कर रहा हूँ। दरअसल, Mapbox's own demo एक काफी कम स्तर पर दृश्य लागू करता है:

var tile = tileIndex.getTile(z, x, y); 

console.timeEnd('getting tile z' + z + '-' + x + '-' + y); 

if (!tile) { 
    console.log('tile empty'); 
    zoomOut(); 
    return; 
} 

// console.log('z%d-%d-%d: %d points of %d', z, x, y, tile.numSimplified, tile.numPoints); 
// console.time('draw'); 

ctx.clearRect(0, 0, height, height); 

var features = tile.features; 

ctx.strokeStyle = 'red'; 
ctx.fillStyle = 'rgba(255,0,0,0.05)'; 

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

    ctx.beginPath(); 

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

     if (type === 1) { 
      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]; 
      if (k) ctx.lineTo(p[0] * ratio + pad, p[1] * ratio + pad); 
      else ctx.moveTo(p[0] * ratio + pad, p[1] * ratio + pad); 
     } 
    } 

    if (type === 3 || type === 1) ctx.fill('evenodd'); 
    ctx.stroke(); 
} 
drawGrid(); 

आप अपने कोड से कुछ का उपयोग करने के लिए आप मदद करने में सक्षम हो सकता है।

रीडमे और related blog post में मैपबॉक्स-ग्ल-जेएस को "द्वारा संचालित" भूगर्भ-वीटी में विभिन्न संदर्भ हैं, लेकिन उस काम को कैसे करें इस पर कोई स्पष्ट निर्देश नहीं है। शायद बेहतर तरीका mapbox-gl-jsGeoJSONSource का उपयोग करना है।

Answer 2

इस example में, यह दिखाया गया है कि L.CanvasTiles का उपयोग करके एक पुस्तिका पुस्तिका में geojson-vt को कैसे प्रस्तुत किया जाए।

समस्या यह है कि उस उदाहरण में चित्रित सुम्बर का कैनवास टाइल्स एक्सटेंशन केवल 0.7 तक ही काम करता है। मुझे विशेष रूप से कैनवास टाइल्स के लिए रेपो नहीं मिला है, इसके लिए बहुत कम एनपीएम पैकेज है।