Question

我正在尝试在个人资料页面上使用ember-leaflet（https://github.com/gabesmed/ember-leaflet）。问题是将功能纳入图层。关于我如何最好的建议可以将中心函数中的相同坐标添加到＆＃34;层＆＃34;。

尝试在childLayers中创建一个函数，该函数返回带有coords的新图层，但是ember会生成错误。

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;
  }),
});

然后我按原样使用该组件：

{{leaflet-map geoJSON=coordinates}}

在我的例子中，我传入一个GeoJSON字符串，coordinates计算属性解析它。当地图调用childLayers时，它会使用已解析的坐标返回切片/标记。

ember-leaflet添加功能

1 个答案: