RxJS के साथ एक और अनुक्रम के बाद एक दृश्य भागो

वोट
2

मैं एक MapboxGL नक्शा बटन और स्लाइडर के माध्यम से अन्तरक्रियाशीलता के बहुत सारे का समर्थन करने की जरूरत है कि बना रहा हूं।

MapboxGL नक्शे उदाहरण हैं स्टेटफुल और मनमौजी lifecycles टाइल्स और सूत्रों के async प्राप्त कर रहा है की बहुत सारी के कारण। इस काम का सबसे ईवेंट हैंडलर्स के अंदर किया जाता है का मतलब है। यह मैं हूँ लगता है RxJS इस अन्तरक्रियाशीलता के सभी के प्रबंधन के लिए एक ठोस उम्मीदवार है कि बनाता है।

उदाहरण के लिए, आप एक नक्शा करने के लिए एक सुविधा परत जोड़ना चाहते हैं, MapBox उदाहरण एक में सब कुछ कर सुझाव देते हैं map.on('load', handler)। यही कारण है कि स्थिर नक्शे के लिए ठीक है, लेकिन यह एक परेशानी मानचित्र 20+ टॉगल / स्लाइडर्स / नियंत्रण होगा कि के लिए आवश्यक ईवेंट हैंडलर्स समन्वय करने के लिए है।

मुझे क्या करना चाहते हैं प्रत्येक व्यक्ति के ऑपरेशन के लिए दृश्यों पैदा करते हैं। सबसे बुनियादी जिनमें से है मानचित्र लोड तो नक्शा लोड के बाद मुख्य फ़ीचर परत जोड़कर

तो यहाँ मैं क्या मिल गया है, मैं, के बारे में 5 घंटे की कुल के लिए RxJS उपयोग कर रहे हैं तो हो सकता है कि वहाँ कुछ मैं सिर्फ इतना है कि मैं नहीं जानता कि पता नहीं है है।

स्निपेट:

var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/dark-v9',
      center: [-122.78, 38.43],
      zoom: 10
  });

  // Check every 100ms if the map is loaded, if so emit
  var loaded$ = Rx.Observable
    .interval(100)
    .map(() => map.loaded())
    .filter(x => x)
    .first();

  // We must wait until the map is loaded before attaching the feature layer.
  var addLayer = loaded$.subscribe(
    baseMapLoaded, errorHandler, addFeatureLayerAndSource
  );

  // Attaching the feature layer sets the map.loaded() to false
  // while it fetches the tiles.
  // 
  // When the feature layer and source are loaded,
  // log 'all tiles loaded' then 'completed' to the console
  //
  // Why can I declare `addLayer` and `completed` like this?
  // Shouldn't these both fire after the loaded$ emits the first time,
  // causing an error?
  var completed = loaded$.subscribe(tilesLoaded, errorHandler, completeHandler);

  /* Misc Handlers */
  function addFeatureLayerAndSource() {
    console.log(2, 'adding feature layer and source');
    map.addSource('parcel_data', {
      'type': 'vector',
      'tiles': ['http://localhost:5000/api/v1/tiles/{z}/{x}/{y}']
    });

    map.addLayer({
      id: parcel_data,
      type: fill,
      source: parcel_data,
      source-layer: parcel_data,
    });
  }
  function baseMapLoaded() { console.log(1, 'base map loaded'); }
  function tilesLoaded() { console.log(3, 'all tiles loaded'); }
  function errorHandler(err) { console.log('error handling', err); }
  function completeHandler() { console.log('completed'); }

संपादित करें: प्रतिबिंबित करने के लिए @ CalvinBeldin की मदद टुकड़ा अपडेट किया गया। वर्तमान में यह पता लगाने की क्यों यह वास्तव में काम करता है की कोशिश कर रहा। मेरी console.logs के आदेश सही है:

1 base map loaded
2 adding feature layer and source
3 all tiles loaded
completed
15/08/2016 को 22:30
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
2

प्रत्यक्ष द्वारा वापस renderObservable.last()कभी नहीं आग की वजह से हो रहा है renderObservable'पूरी घटना कभी नहीं है तब होता है ( renderObservableबस में सुनते रहें जाएगा renderजब तक यह निपटारा है घटनाओं इस अर्थ यह कभी नहीं "पूरा" में ऐसा है, तो)।

आप एक नया प्रत्यक्ष कि उत्सर्जन करता है पिछले प्रस्तुत करना तब होता है जब बनाने की आवश्यकता होगी। MapboxGL एपीआई के साथ सीमाएं के अनुसार, एक मतदान समाधान जाना एक ही रास्ता हो सकता है:

// Emits the value of map.loaded() every 100ms; you can update this
// time interval to better suit your needs, or get super fancy
// and implement a different polling strategy.
const loaded$ = Rx.Observable.interval(100).map(() => map.loaded());

// Will emit once map.loaded() is true.
const isLoaded$ = loaded$.filter(x => x).first();
15/08/2016 को 23:57
का स्रोत उपयोगकर्ता

वोट
0

मैं पूरी तरह से समझा नहीं गया हो सकता है समस्या क्या है। मुख्य बिंदु:

  • पर्यवेक्षकों के बाद लोड घटना पहले से ही happned सदस्यता ली को लोड घटना रखें ((व्यवहार | खेलना) अधीन)
  • लौटें प्रस्तुत करना घटनाओं के बाद ही प्रस्तुत करना घटना हुई (flatMap)

loadSource$ = Observable.fromEvent(map, 'load').first();

// You need load$ to be a BehaviorSubject or replay last value on
// In order to keep state of wheter laod event happend or not
// For observers which subscribed after load event already happened
load$ = loadSource.replay(1);
render$ = Observable.fromEvent(map, 'render');
renderAfterLoad$ = load$.flatMap(() => render$);

load$.subscribe(() => {
  map.addSource('source_data', {
    'type': 'vector',
    'tiles': ['http://localhost:5000/api/v1/tiles/{z}/{x}/{y}']
  });

  map.addLayer({
    "id": "layer_data",
    "type": "fill",
    "source": "source_data",
    "source-layer": "source_layer_id",
  });
});

render$.subscribe(() => {
  console.log('all tiles loaded');
});
16/08/2016 को 12:45
का स्रोत उपयोगकर्ता

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