Mapbox仅渲染最后一个点而非全部的技术求助

嘿，我一眼就找到问题根源啦！你的代码里犯了一个很容易忽略的小错误——在同一个Feature对象里重复定义了geometry属性。

在JavaScript对象中，重复的属性键会被后面的值直接覆盖，所以你第一个点的坐标直接被第二个点的坐标覆盖了，这就导致Mapbox只渲染了最后一个点。

修正后的代码 #

map.on('load', function() { 
  map.loadImage('images/celltower.png', function(error, image) { 
    if (error) throw error; 
    map.addImage('tower', image); 
    map.addLayer({ 
      "id": "points", 
      "type": "symbol", 
      "source": { 
        "type": "geojson", 
        "data": { 
          "type": "FeatureCollection", 
          "features": [
            { 
              "type": "Feature", 
              "geometry": { 
                "type": "Point", 
                "coordinates": [21.42559803007430, 42.00038270989050] 
              }
            },
            { 
              "type": "Feature", 
              "geometry": { 
                "type": "Point", 
                "coordinates": [21.38529272846381, 42.0080397578202] 
              }
            }
          ] 
        } 
      }, 
      "layout": { 
        "icon-image": "tower", 
        "icon-size": 0.25 
      } 
    }); 
  }); 
});

关键修改说明 #

• 把原来的单个Feature对象拆成两个独立的Feature对象，每个对象只包含一个点的geometry属性
• 确保每个点都作为FeatureCollection里的一个单独元素存在

这样修改后，两个标记就都会正常显示啦，而且控制台也不会有报错~

内容的提问来源于stack exchange，提问作者MatejMecka