余烬传单新增功能

Question

我试图在个人资料页面上使用余烬传单（https://github.com/gabesmed/ember-leaflet）。问题是如何将特征引入图层。任何关于如何最好地将与中心函数相同的和弦添加到“层”的建议。

尝试在子图层中创建一个函数，该函数返回一个带有代码的新图层，但随后余烬会产生一个错误。

var MarkerLayer =
  EmberLeaflet.MarkerLayer.extend(
    EmberLeaflet.PopupMixin, {
  popupContentBinding: 'content.title'
});

var MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
    contentBinding: 'controller',
    itemLayerClass: MarkerLayer
});




        var layer = EmberLeaflet.MarkerCollectionLayer.extend({
    content: [
      {location: L.latLng(63.429722, 10.393333)},
      {location: L.latLng(40.721, -73.991)}]});





export default EmberLeaflet.MapView.extend({

    latitude: 61,
    longitude: 8,
    center: function() {
        console.log(get(this, 'latitude'));
        var latitude =  get(this, 'latitude');
        var longitude = get(this, 'longitude');

        return L.latLng(latitude, longitude);
    }.property("latitude", "longitude"),  
    zoom: 16,
    options: {maxZoom: 19, minZoom: 7},
    childLayers: [
    WMSLayer,
    MarkerCollectionLayer,
    layer

    ]
});

Answer 1

我做了这样的事：

export default EmberLeafletComponent.extend({

  center: Ember.computed(function() {
    return this.get('coordinates');
  }),

  /////////////////////////////////////
  // PROPERTIES
  /////////////////////////////////////

  geoJSON: null,

  /////////////////////////////////////
  // COMPUTED PROPERTIES
  /////////////////////////////////////

  childLayers: Ember.computed('coordinates', function() {

    return [
      TileLayer.extend({
        tileUrl: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
        options: {
          id: 'scoutforpets.o2ml3nm1',
          accessToken: ENV.APP.MAPBOX_KEY
        }
      }),
      MarkerCollectionLayer.extend({
        content: [{ location: this.get('coordinates') }]
      })
    ];
  }),

  coordinates: Ember.computed('geoJSON', function() {

    if (this.get('geoJSON')) {

      const coordinates = JSON.parse(this.get('geoJSON')).coordinates;

      if (coordinates) {
        return L.latLng(coordinates[1], coordinates[0]);
      }
    }

    return null;
  }),
});

然后我使用组件：

{{传单地图geoJSON=坐标}

在我的例子中，我传入一个GeoJSON字符串，coordinatescomputed属性解析它。当地图调用childLayers时，它会使用解析后的坐标返回瓷砖/标记。