如何使用geoJson在Leaflet地图上添加多个点标记

Question

我正在尝试使用带有点的geoJson在地图上添加一些标记，我正在遵循leaflet 文档，但它仍然显示：

错误：无效的GeoJSON对象。
throw new Error('无效的GeoJSON对象。');

我的GeoJson：

var meta1nJson={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3613558,
          -8.8044875
        ]
      },
      "properties": {
        "Ordem": "193",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Petrolândia",
        "Estado": "PE",
        "Nome da Comunidade": "Agrovila 4"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3445892,
          -8.7940031
        ]
      },
      "properties": {
        "Ordem": "194",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Petrolândia / Floresta",
        "Estado": "PE",
        "Nome da Comunidade": "Agrovila 5"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -37.8521847,
          -8.6774657
        ]
      },
      "properties": {
        "Ordem": "195",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Inajá/Ibimirim",
        "Estado": "PE",
        "Nome da Comunidade": "Indígena Kambiwá - Baxa da Alexandra"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -37.9229577,
          -8.645232
        ]
      },
      "properties": {
        "Ordem": "196",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Inajá",
        "Estado": "PE",
        "Nome da Comunidade": "Indígena Kambiwá -  Barracão"
      }
    }
  ]
};

如何尝试渲染标记：

var layerComunidades1N = L.geoJson(meta1nJson).addTo(map);

我找不到我的错误，根据leaflet文档，如果我不传递pointToLayer选项，它应该渲染默认标记，我错了吗？

- Victor Laerte

---

检查一下你的变量名？ - Ju66ernaut

你是正确的，但那只是一个笔误，问题仍然存在。 - Victor Laerte

将您的JavaScript转换为JSON，然后在GeoJSONLint上进行测试是可行的。 - ComFreek

Answer 1

我认为你的geojson没有问题。我将你的geojson复制到geojson.io中，它运行良好。

看起来你在错误地调用GeoJSON（你上面的例子显示了对geoJson的调用），但这并不能解释你得到的错误...

无论如何，这里有一个工作正常的jsfiddle，将你的geojson可视化为leaflet地图上的标记。

以下是相关代码（附带一个基础层）：

var map = L.map('map', {
    center: [-9, -38],
    zoom: 7
});

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {       
    id: 'examples.map-20v6611k'
}).addTo(map);

new L.GeoJSON(meta1nJson).addTo(map);

希望这有所帮助。

- sfletche

---

首先，感谢您花时间帮助我。我在我的帖子中犯了一些错误，首先我没有粘贴完整的geojson代码，因为我认为它是太多的代码并决定简化它，但这样做我忽略了错误的确切位置。根据您的提示和@ComFreek的建议，我能够检测到错误所在并进行修复。非常感谢，对此我很抱歉。 - Victor Laerte

Answer 2

尝试这个：

/* 实例化一个图标。您也可以拥有多个图标 */

var ComunidadeIcon = L.icon({
  iconUrl: 'http://iambrony.dget.cc/mlp/gif/angel_stand_right.gif',
  iconSize: [32, 37],
  iconAnchor: [16, 37],
  popupAnchor: [0, -28]
});

/* 从GJson的FeatureCollection中列出对象特征 */

var layerComunidades1N = L.geoJson(meta1nJson, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {icon: ComunidadeIcon});
  }, onEachFeature: onEachFeature
}).addTo(map);

/* 这个函数可以包含很多东西。我用它来显示弹出窗口 */

function onEachFeature(feature, layer) {
  var popupContent = "<p>DaTerra Web</p>";
  if (feature.properties && feature.properties.popupContent) {
    popupContent += feature.properties.popupContent;
  }
  layer.bindPopup(popupContent);
}

- Vinicius Santana