将 GeoJSON 加载到 Meteor 的传单中答案

【问题标题】：Loading GeoJSON into Meteor's leaflet将 GeoJSON 加载到 Meteor 的传单中
【发布时间】：2015-04-22 13:48:37
【问题描述】：

我对 Meteor 很陌生。我正在尝试将此示例的自定义版本从传单实现到 Meteor：Interactive Choropleth Map

它使用此文件导入 GeoJson 数据：us-states

我的问题是：导入这个文件或让它渲染。

我做了什么：

Template.map.rendered = function() {

  var map = L.map('map').setView([37.8, -96], 5);

  L.tileLayer.provider('Stamen.Watercolor').addTo(map);
  
  HTTP.get(Meteor.absoluteUrl("/us-states.js"), function(err,result) {
    var statesData = result.content;

    console.log(statesData);

    var myStyle = {
        "fillColor": "#487ba1",
        "weight": 3,
        "opacity": 1,
    	"color": "#487ba1",
    	"fillOpacity": 0.1
    };
    
    var statesLayer = L.geoJson(statesData,  {
        style: myStyle
      }).addTo(map);
  });
  
}

#map {
  width: 100%;
  height: 100%;
}

<div id="column">
  {{> map}}
</div>
<template name="map">
  <div id='map'></div>
</template>

我得到了什么：未捕获的错误：无效的 GeoJSON 对象。

变量“stateData”作为对象返回。我只想将 GeoJson 数据渲染到地图上。我可以很容易地在纯 html 上做到这一点。我不知道如何正常工作？

【问题讨论】：

为什么要将对象 result.content 转换为 String ？如果 geoJSON 函数正在寻找一个对象，它将无法工作。
糟糕。那不应该在那里。但是，即使我删除 .toString() 它仍然会抛出异常。
result.content 的格式如何？是否有可能它不会自动解析为 JSON 并且需要使用 JSON.parse(result.content) 解析？此外，GeoJSON 对象应具有以下形式：{type: '...', coordinates: [Number, Number]}
当我使用 JSON.parse(result.content) 时，meteor 崩溃了。我认为这是因为 JSON.parse 试图解析一个对象，而 JSON.parse 只能接受其参数中的字符串。如您之前所见，我尝试将 .toString() 添加到其中，并且在对其使用 JSON.parse 时得到了相同的对象。也许是传单有问题？但我对此表示怀疑，因为我复制了整个 us-state.js 并将其直接注入到模板中，并且效果很好。
我不确定是什么问题。你的 sn-p 坏了。它只显示{{> map}}，即它不解释空格键语法。这可能是 sn-p 的问题，而不是您的实际代码。你能在你的html中显示实际的<body>吗？或者，您看到了什么错误或意外行为？

标签： javascript json meteor leaflet geojson

【解决方案1】：

问题似乎来自您的us-states.js 文件。你想从中加载数据，但你有一个变量声明而不是数据：

var statesData = {
  "type":"FeatureCollection",
  "features": [
    ....
  ]
}

您应该只保留文件中的数据并删除var statesData = 部分：

{
  "type":"FeatureCollection",
  "features": [
    ....
  ]
}

【讨论】：