javascript - Pubnub - 如何从 channel 取消发布

Question

我尝试实现 Pubnub - "Realtime Flight Tracking Map" example

谁能告诉我如何从 channel 取消发布，然后相应的标记就会从 map 上消失。例如，在上面链接中显示的演示中，如果航类“66e234a”离线，则该标记不应显示在 map 中。

请帮我实现这个功能..

Answer 1

发布后，您不想取消发布消息，只需向正在发布的数据添加状态属性，以便您可以根据航类状态决定删除、不渲染或更改标记。

该演示并未演示此类功能。 PubNub 方面有两种选择。

1. 向负载添加一个属性，以指示飞行的当前状态。这样您就可以根据航类的状态移动标记或删除标记。右侧代码面板

PUBNUB.publish({
    channel:  'sfo-flight-data',
    message:  
      {
        66e234a: {
           latlng: [
             37.6271,
             -122.3858
           ],
           data: [
             "A33D8C",
             37.6271,
             -122.3858,
             118,
             0,
             23,
             "3765",
             "F-KSJC3",
             "DC10",
             "N308FE",
             1433383239,
             "SFO",
             "MEM",
             "FX1345",
             1,
             0,
             "FDX1345",
             ,0
             "active" //ADDED
           ],
         },
         //...
      }
});

左侧是收到消息时呈现标记的代码。

  var map = eon.map({
  id: 'map',
  mb_id: 'ianjennings.lec06po7',
  mb_token: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
  channel: 'sfo-flight-data',
  rotate: true,
  history: true,
  marker: function (latlng, data) {

    if(data[15] !== 'active'){ //EVALUATED
       return;
    }

    var marker = new L.RotatedMarker(latlng, {
      icon: L.icon({
        iconUrl: '/wp-content/uploads/2016/05/airplane.png',
        iconSize: [24, 24]
      })
    });

    var popup = '';
    if(data[13]) {
      popup = 'Flight ' + data[13] + '';
    }
    if(data[11]) {
      if(!popup.length) {
        popup = 'Flight from ' + data[11];
      } else {
        popup += ' from ' + data[11];
      }
    }
    if(data[12]) {
      if(!popup.length) {
        popup = 'Flight to ' + data[12];
      } else {
        popup += ' to ' + data[12];
      }
    }
    if(!popup.length) {
      var popup = 'No data available';
    }

    marker.bindPopup(popup);

    return marker;
  }
});

总体思路是对航类状态的变化使用react。