डेटा संचालित मैप्स का उपयोग MapBox जीएल (आधार नक्शे और तेजी के साथ choropleth)

वोट
1

tl; डॉ संस्करण: हम MapBox जीएल के साथ एक तेजी से choropleth नक्शा कैसे बनाऊं?

@RyanBaumann एक उदाहरण पोस्ट: देखें https://ryanbaumann.squarespace.com/blog/2016/1/23/mapbox-gl-create-data-driven-styles

लेकिन इस उदाहरण जावास्क्रिप्ट में सीधे लोड हो रहा है GeoJSON फ़ाइलों को दर्शाता है। कितनी बड़ी GeoJSON फ़ाइलों को संभालने के बारे में एक सवाल। मान लीजिए कि आप एक 18M GeoJSON फ़ाइल करते हैं। और अगर आप एक नक्शा और डेटा संचालित शैलियाँ को देखना चाहते और यह सब कुशलता से करते हैं।

उदाहरण के लिए, मैं एक बड़ी GeoJSON फ़ाइल लोड है:

https://cityregister.firebaseapp.com/recentsaleslocal.geojson

इस MapBox शैली में:

https://api.mapbox.com/styles/v1/fedex1/cijrx09ej007o90lx1g1m5b0j.html?title=true&access_token=pk.eyJ1IjoiZmVkZXgxIiwiYSI6ImNpam5jZXZvczAwZnd0b201ajhybXE0OW8ifQ.IumX7VWjU71UjEsKTN4bdw#11/40.7060/-73.9754

और यह तुरन्त लोड करता है और लोड करते समय नेटवर्क पर पूरे 18M का स्थानांतरण नहीं होता।

लेकिन जब मैं दृष्टिकोण रयान दिखाया जा रहा है का उपयोग करें, यह प्रतीत होता है मैं लोड करते समय नेटवर्क पर पूरे 18M फ़ाइल को लोड करना है। यही कारण है कि बहुत विशेष रूप से एक धीमी गति से नेटवर्क पर धीमी है।

मुझे पता है कि वहाँ डेटा के आधार पर शैलियों के लिए एक तरह से और एक ही नक्शे पर एक आधार नक्शा MapBox सभी से है करना चाहते हैं?

कुछ उदाहरण निम्नलिखित हैं:

https://cityregister.firebaseapp.com/map.html (झटपट लोड, आधार नक्शे है, सभी MapBox स्टूडियो सर्वर पर रहता है। कोई डेटा-प्रचालित शैली

https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html (भार बहुत धीरे धीरे, आधार नक्शे, MapBox पर आधार नक्शा, GeoJSON एक और सर्वर पर। का उपयोग करता है डेटा के आधार पर शैली है https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html (झटपट लोड हो, कोई आधार नक्शे, सभी MapBox-जीएल उत्पन्न, का उपयोग करता है डेटा के आधार पर शैली हो रहा है।

मेरा प्रश्न कैसे MapBox की गति और डेटा-प्रेरित शैलियों और सड़कों के साथ एक आधार नक्शा, आदि प्राप्त करने के लिए है

धन्यवाद।

नक्शे से ऊपर की तस्वीरें।

तेजी

तेजी से nyc नक्शा नहीं बल्कि डेटा के आधार पर


तेजी

तेजी से nyc choropleth लेकिन कोई आधार नक्शे


नेटवर्क

नेटवर्क पर धीमी गति से choropleth भार 18M


30/01/2016 को 11:59
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

आप serverside पर अपने GeoJSON फ़ाइलें सांकेतिक शब्दों में बदलना और उन्हें clientside TopoJSON का उपयोग करने पर फिर से डिकोड कर सकते हैं। यही कारण है कि अपने बैंडविड्थ पर cutdown और इस तरह एक अच्छा speedboost देना चाहिए।

TopoJSON GeoJSON का ही विस्तार है कि टोपोलॉजी encodes है। कड़ाई से ज्यामिति का प्रतिनिधित्व करने के बजाय, TopoJSON फाइलों में ज्यामिति साझा रेखा खंड आर्क्स कहा जाता है को एक साथ लगाकर कर रहे हैं। TopoJSON अतिरेक समाप्त, GeoJSON साथ की तुलना में ज्यामिति की और अधिक कॉम्पैक्ट अभ्यावेदन की पेशकश; ठेठ TopoJSON फ़ाइलों 80% उनके GeoJSON समकक्षों की तुलना में छोटे होते हैं। इसके अलावा, इस तरह के TopoJSON टोपोलॉजी के संरक्षण आकार सरलीकरण, स्वत: नक्शा रंग, और cartograms के रूप में है कि टोपोलॉजी का उपयोग अनुप्रयोगों, की सुविधा।

30/01/2016 को 13:03
का स्रोत उपयोगकर्ता

वोट
4

यह कवर नहीं करता है सब रंग और लेआउट गुणों (और संचालित शैलियों संपूर्ण डेटा सक्रिय रूप से यहां पर काम किया जा रहा है: https://github.com/mapbox/mapbox-gl-js/pull/1932 ), लेकिन ...

आप अपने MapBox खाते में अपने GeoJSON दस्तावेज़ अपलोड यदि यह वेक्टर टाइल्स में परिवर्तित हो जाएगा। फिर आप के बाद अपने आप पर एक परत के रूप में इस जोड़ सकते हैं style.loadघटना:

map.on('style.load', function() {
  map.addSource('SOURCENAME', {
    "type": "vector",
    "url": "mapbox://mapbox.660ui7x6"
  });
});

इस स्तर पर आप एक unstyled परत आप एक डेटा पर ही आधारित फैशन में करने के लिए रंग गुण जोड़ सकते हैं है:

var layers = [
  ['#723122', 25000000],
  ['#B86B25', 5000000],
  ['#F2F12D', 0]
];

layers.forEach(function(layer, i) {
  map.addLayer({
    "id": "layer-" + i,
    "type": "fill",
    "source": "SOURCENAME",
    "source-layer": "original",
    "paint": {
      "fill-color": layer[0]
    },
    filter: i == 0 ?
      ['>=', 'population', layer[0]] :
      ['all',
        ['>=', "population", layer[0]],
        ['<', "population", layers[i - 1][0]]
    ]
  });
});

source-layerआप लक्षित करना चाहते mapbox.com/data पर या यह दस्तावेज़ tilejson है से अपलोड किए गए डेटा पृष्ठ से पाया जा सकता है:

https://a.tiles.mapbox.com/v4/mapbox.660ui7x6.json?access_token=<YOURACCESSTOKEN>

यहाँ एक उदाहरण है कि यह बहुत ही बात को दर्शाता है है https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/

30/01/2016 को 13:29
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more