Question

我想从mapbox中添加聚类到我的地图，我按照他们的建议进行了入门：

https://www.mapbox.com/install/js/cdn-add/

现在我有了一张地图，我还添加了一些自己的标记，这些标记来自后端的用户都有纬度和经度。

所以我有一张地图和一些标记。

现在，我想添加集群，在示例中：

https://docs.mapbox.com/mapbox-gl-js/example/cluster/

他们添加了来源：

map.addSource("earthquakes", {
})

我没有，而现在我什至不需要。因为我可以看到磁贴和标记。

我考虑添加一个源，但是哪个源？我不需要源，已经有了所需的磁贴和标记...，但是cluster选项在地图上的addSource方法中。所以..我在这里迷路了。

这就是示例中显示的内容，但是正如我说的，我没有或不需要任何其他资源，因为我已经看到了图块和标记，我只想聚类。

map.addSource("earthquakes", {
type: "geojson",
data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});```

Answer 1

我找到了解决方法，

我必须像这样从我的用户创建一个geoJson对象：

  const geoJsonMarkers = users.map( (place, i ) => {
    const [placeLng, placeLat] = place.location.coordinates;
    const position = { lat: placeLat, lng: placeLng };
    return {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [position.lng, position.lat]
      },
      "properties": {
        "name": place.name
      }
    }
  })
  const usersArray = {
    "features": geoJsonMarkers
  }

然后将其传递给源的data属性，如下所示：

  map.on('load', function() {
    // Add a new source from our GeoJSON data and set the
    // 'cluster' option to true. GL-JS will add the point_count property to your source data.
    map.addSource("users", {
    type: "geojson",
    // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
    // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
    data: usersArray,
    cluster: true,
    clusterMaxZoom: 14, // Max zoom to cluster points on
    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
    });
     ...

addSource名称是任意的，在我的情况下可以是用户，所以我称它为用户。

我是否需要向地图添加源才能使用聚类？

1 个答案: