添加功能的小冊子

Question

我試圖在配置文件頁面上使用小冊子（https://github.com/gabesmed/ember-leaflet）。問題在於將特徵放入圖層中。任何有關如何最好地將與中心功能相同的座標添加到「圖層」的建議。

嘗試在childLayers中創建一個函數，該函數返回一個帶有座標的新圖層，但隨後會發出一個錯誤。

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時，它會使用解析的座標返回圖塊/標記。