Question

我想在页面加载后使用queryRenderedFeatures来填充列表，但它似乎在加载图层之前继续触发。我在下面的控制台中收到错误消息：

map.on('load', function() {
  map.addLayer({
      'id': 'Points',
      'type': 'circle',
      'source': 'Points-45d56v',
      'source-layer': 'Points-45d56v',
      'layout': {
          'visibility': 'visible',
      },
      'paint': {
        'circle-radius': 6,
        'circle-color': 'red'
      }
  });
});

$(document).ready(function(){
  var features = map.queryRenderedFeatures({layers:['Points']});
  console.log(features);
});

如何在加载功能后查询图层？我尝试按照这些答案中的建议，但它一直空着

JavaScript that executes after page load

call a function after complete page load

这就是我现在所拥有的

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DropTarget } from 'react-dnd';

// ... and fullcalendar-reactwrapper.
import FullCalendar from 'fullcalendar-reactwrapper';
import 'fullcalendar-reactwrapper/dist/css/fullcalendar.min.css';

const calTarget = {
    canDrop(props, monitor) {
        return true;
    },

    drop(props, monitor, component) {
        console.log(monitor.getDropResult());
    }
};

function collect(connect, monitor) {
    return {
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    };
}

const ItemTypes = {
    CARD: 'card'
};

class Calder extends Component {
    constructor(props) {
      super(props);
      this.state = {
      events:[
                  {
                      title: 'All Day Event',
                      start: '2017-05-01'
                  },
                  {
                      title: 'Long Event',
                      start: '2017-05-07',
                      end: '2017-05-10'
                  },
                  {
                      id: 999,
                      title: 'Repeating Event',
                      start: '2017-05-09T16:00:00'
                  },
                  {
                      id: 999,
                      title: 'Repeating Event',
                      start: '2017-05-16T16:00:00'
                  },
                  {
                      title: 'Conference',
                      start: '2017-05-11',
                      end: '2017-05-13'
                  },
                  {
                      title: 'Meeting',
                      start: '2017-05-12T10:30:00',
                      end: '2017-05-12T12:30:00'
                  },
                  {
                      title: 'Birthday Party',
                      start: '2017-05-13T07:00:00'
                  },
                  {
                      title: 'Click for Google',
                      url: 'http://google.com/',
                      start: '2017-05-28'
                  }
              ],        
      }
    }

    render() {

      const { connectDropTarget, isOver, canDrop } = this.props;        

      return connectDropTarget(
        <div>
          <FullCalendar
               id = "your-custom-ID"
           header = {{
              left: 'prev,next today myCustomButton',
              center: 'title',
              right: 'month,basicWeek,basicDay'
          }}
           defaultDate={'2017-09-12'}
          navLinks= {true} // can click day/week names to navigate views
          editable= {true}
          eventLimit= {true} // allow "more" link when too many events
          events = {this.state.events}
          droppable = { true }  
      />
        </div>
      );
    }
  }

  export default DropTarget(ItemTypes.CARD, calTarget, collect)(Calder);

Answer 1

来自https://github.com/mapbox/mapbox-gl-js/issues/4222#issuecomment-279446075：

您可以查看map.loaded()（https://www.mapbox.com/mapbox-gl-js/api/#map#loaded）以确定是否已加载地图，并且可以安全地查询要素。

例如代码请参阅GitHub上的链接问题评论。

Answer 2

我从上一个答案中的Github链接获得了以下代码，这对我有用：

map.addLayer(...) // make your change
map.on('render', afterChangeComplete); // warning: this fires many times per second!

function afterChangeComplete () {
  if (!map.loaded()) { return } // still not loaded; bail out.

  // now that the map is loaded, it's safe to query the features:
  map.queryRenderedFeatures(...);

  map.off('render', afterChangeComplete); // remove this handler now that we're done.
}

请务必将其与要查询的图层放在同一个map.on('load', function() {});。

加载时的Mapbox queryRenderedFeatures

2 个答案: