Question

我已在ember-cli应用内为地图集地图创建了一个组件。

我在我的组件的didInsertElement回调中添加了地图和一些标记，并且想要添加一个观察者来更新标记，因为基础数据会实时更改。

但是，我不知道如何在我的观察者中访问地图。而且每次我的标记发生变化时，我都不会重绘整个地图。

这是我的代码：

import Ember from 'ember';
import ENV from 'ember-geofire-demo/config/environment';

export default Ember.Component.extend({
  attributeBindings: ['id'],
  id: 'map',

  // this is what doesn't work
  markersObserver: function() {
    // retrieve the map - ??
    // retrieve the markerLayer on the map - ??
    var markerLayer = // ...

    // regenerate the geoJSON with the new marker positions
    var geoJSON = generateGeoJSON(markers);

    // re-set the markerLayer's geoJSON
    markerLayer.setGeoJSON(geoJSON);
  }.observes('markers'),

  // works! adds the map and markers as expected
  didInsertElement: function() {
    // create the map
    L.mapbox.accessToken = ENV.mapboxAccessToken;
    var map = L.mapbox.map('map', 'hchood.blahblah');

    // add a featureLayer to hold all the markers
    var markerLayer = L.mapbox.featureLayer().addTo(map);

    // generate GeoJSON for a series of points to add onto the markerLayer
    var markers = this.get('markers');
    var features = [];

    markers.map(function(marker) {
      var latitude = marker.get('vehicle_lat');
      var longitude = marker.get('vehicle_lon');

      features.push({
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [longitude, latitude]
        },
        properties: {
          'marker-size': 'large',
          'marker-symbol': 'rail-light',
          'marker-color': '#f86767'
        }
      });
    });

    var geoJSON = {
      type: 'FeatureCollection',
      features: features
    };

    // set the markers as the GeoJSON on the markerLayer
    markerLayer.setGeoJSON(geoJSON);
  }
});

任何建议都非常感谢！

Answer 1

假设markers.map返回地图对象，最简单的方法可能是通过调用this.set('map', <map object>)将该对象添加到组件，并通过this.get('map')在观察者中检索它。 / p>

Mapbox.js＆amp; Ember - 检索＆amp;修改组件中的映射

1 个答案: