如何在地图上添加标记从geoJson与许多点(传单)

How to add Markers on Map from geoJson with many points (Leaflet)

本文关键字：许多点 多点 传单 geoJson 地图 加标记 添加      更新时间：2023-09-26

我试图在我的地图上添加一些标记使用geoJson与点，我遵循传单文档，但它仍然说:

错误:无效GeoJSON对象。
throw new Error('Invalid GeoJSON object.');

我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);

我找不到我做错了什么，根据传单文档，如果我不通过选项pointToLayer它应该渲染默认标记，我错了吗?

我看不出你的geojson有什么问题。我复制了你的geojson到geojson。IO，它工作得很好。

它看起来像你不正确地调用GeoJSON(你上面的例子显示了对geoJson的调用)，但是这并不能解释你得到的错误…

无论如何，这里是一个工作的jsfiddle，将您的地理信息可视化为传单地图上的标记。

下面是相关代码(为了更好地测量，有一个基础层):

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

试试这个:

/*实例化图标。你也可以有多个图标*/

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);
}
相关文章：