从JSON使用烬车型解析余烬,单张坐标余烬、坐标、车型、JSON

2023-09-11 00:59:23 作者:醉梦人生

我是新来的烬-leaflet.js 。我试图(通过 AJAX 调用一个 JSON 文件)数据传给我的两个把手的模板和我的灰烬-leaflet地图。随着我的当前设置,数据达到我的车把模板就好了,但并没有使坐标数据余烬,单张地图。

我使用下面列出我的导游了两个例子,但打的,因为我缺乏与Ember经验墙。任何人都可以点我朝着正确的方向吗?

Ajax和烬例如

了什么,我试图完成部分例如

把手模板:

 <脚本类型=文/ X-车把数据模板名称=应用程序>
    {{出路}}

  < / SCRIPT>

   <脚本类型=文/ X-车把数据模板名称=指数>
      {{视图App.MapView的id =地图}}
      < D​​IV ID =博客>
        < UL>
            {{#each模型项}}
                <李> {{item.headline}}< /李>
            {{/每}}
        < / UL>
    < / DIV>
  < / SCRIPT>
 
余烬

恩贝尔:

 程序= Ember.Application.create();

App.Router.map(函数(){
  //把你的路线在这里
});

App.IndexRoute = Ember.Route.extend({
    型号:函数(){
        返回App.Item.all();
    }
});

App.Item = Ember.Object.extend();

App.Item.reopenClass({
  所有:函数(){
      返回$ .getJSON(JS /数据/ test_e.json),然后(函数(响应){
        变种项= [];

        response.features.forEach(功能(数据){
          items.push(App.Item.create(数据));
        });

          返回的项目;
      });
  }
});

App.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    locationBinding:'controller.item.center'});

App.MapView = EmberLeaflet.MapView.extend({
    childLayers:
      EmberLeaflet.DefaultTileLayer,
      App.MarkerCollectionLayer]
});

App.IndexController =
  Ember.Controller.extend({});
 

JSON文件:

  {
    特征: [
        {
            头条:泊坞窗,在Linux容器运行时:现在开源,
            中心:40.714,-74.000]
        },
        {
            头条:有什么实际上是错误的与雅虎的收购Summly的,
            中心:40.714,-73.989]

        }
    ]
}
 

解决方案

在这里所需要的主要解决办法是在 locationBinding 在MarkerCollectionLayer。该位置绑定需要是在MarkerLayer类。此外,你需要使用 EmberLeaflet.computed 功能简单纬度经度数组转换为单张经纬度对象。参见下面的例子:

  App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  内容:Ember.computed.alias(控制器),
  itemLayerClass:EmberLeaflet.MarkerLayer.extend({
    位置:EmberLeaflet.computed.latLngFromLatLngArray('content.center),
  })
});
 

看看这个的jsfiddle一个完整的工作的例子: http://jsfiddle.net/xALu4/2/

I am new to ember and ember-leaflet.js. I am trying to feed data (via an ajax call to a json file) to both my handlebars template and my ember-leaflet map. With my current setup, the data reaches my handlebars template just fine, but doesn't render the coordinates data to the ember-leaflet map.

I am using the two examples listed below as my guides, but have hit a wall because of my lack of experience with ember. Can anyone point me in the right direction please?

Ajax and ember example

Partial example of what I'm trying to accomplish

Handlebars template:

 <script type="text/x-handlebars" data-template-name="application">
    {{outlet}}

  </script>

   <script type="text/x-handlebars" data-template-name="index">
      {{view App.MapView id="map"}}
      <div id="blog">
        <ul>
            {{#each item in model}}
                <li>{{item.headline}}</li>
            {{/each}}
        </ul>    
    </div>  
  </script>

Ember:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    model: function(){
        return App.Item.all();
    }
});

App.Item = Ember.Object.extend();

App.Item.reopenClass({
  all: function() {
      return $.getJSON("js/data/test_e.json").then(function(response) {
        var items = [];

        response.features.forEach( function (data) {
          items.push( App.Item.create(data) );
        });

          return items;
      });
  }
});

App.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    locationBinding: 'controller.item.center'});

App.MapView = EmberLeaflet.MapView.extend({
    childLayers: [
      EmberLeaflet.DefaultTileLayer,
      App.MarkerCollectionLayer]
});

App.IndexController =
  Ember.Controller.extend({});

JSON file:

{
    "features": [
        {
            "headline": "Docker, the Linux container runtime: now open-source",
            "center" : [40.714, -74.000]
        },
        {
            "headline": "What's Actually Wrong with Yahoo's Purchase of Summly",
            "center" : [40.714, -73.989]

        }
    ]
}

解决方案

The main fix needed here is the locationBinding in the MarkerCollectionLayer. The location binding needs to be in the MarkerLayer class. Furthermore, you need to use the EmberLeaflet.computed functions to convert simple lat lng arrays to a Leaflet LatLng object. See this example:

App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  content: Ember.computed.alias('controller'),
  itemLayerClass: EmberLeaflet.MarkerLayer.extend({
    location: EmberLeaflet.computed.latLngFromLatLngArray('content.center'),
  })
});

Check out this JSFiddle with a full working example: http://jsfiddle.net/xALu4/2/