如何使用超级集群

Question

如何使用超级集群

我是 mapbox 的新手。我需要使用mapbox 的 supercluster 项目才能在地图中绘制 600 万个 gps。我试图在本地主机中使用演示，但我只得到一张空地图！？

这是我在index.html 中的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Supercluster Leaflet demo</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>

        <link rel="stylesheet" href="cluster.css" />

        <style>
            html, body, #map {
            height: 100%;
            margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
         <script src="index.js"></script>
      <script src="https://unpkg.com/supercluster@3.0.2/dist/supercluster.min.js">

    var index = supercluster({
      radius: 40,
      maxZoom: 16
     });
       index.load(GeoObs.features);
       index.getClusters([-180, -85, 180, 85], 2);
     </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

注意：GeoObs是我的geojson文件

怎么了？

Answer 1

ghy*_*ybs 8

这里的 FWIW 是一个独立的示例，说明如何在没有 Web Worker 的情况下使用supercluster。它也只是基于 repo 演示。

var map = L.map('map').setView([0, 0], 0);

// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
  pointToLayer: createClusterIcon
}).addTo(map);

// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);

function update() {
  if (!ready) return;
  var bounds = map.getBounds();
  var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
  var zoom = map.getZoom();
  var clusters = index.getClusters(bbox, zoom);
  markers.clearLayers();
  markers.addData(clusters);
}

// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
  var clusterId = e.layer.feature.properties.cluster_id;
  var center = e.latlng;
  var expansionZoom;
  if (clusterId) {
    expansionZoom = index.getClusterExpansionZoom(clusterId);
    map.flyTo(center, expansionZoom);
  }
});

// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;

jQuery.getJSON(placesUrl, function(geojson) {
  // Initialize the supercluster index.
  index = supercluster({
    radius: 60,
    extent: 256,
    maxZoom: 18
  }).load(geojson.features); // Expects an array of Features.

  ready = true;
  update();
});

function createClusterIcon(feature, latlng) {
  if (!feature.properties.cluster) return L.marker(latlng);

  var count = feature.properties.point_count;
  var size =
    count < 100 ? 'small' :
    count < 1000 ? 'medium' : 'large';
  var icon = L.divIcon({
    html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
    className: 'marker-cluster marker-cluster-' + size,
    iconSize: L.point(40, 40)
  });

  return L.marker(latlng, {
    icon: icon
  });
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/supercluster@4.0.1/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="map" style="height: 180px"></div>

Run Code Online (Sandbox Code Playgroud)

很可能与浏览器中的相同，只是查询会有所不同，但这不是插件的范围。如果您需要帮助，请随时提出包含具体细节的新问题。 (2认同)

Answer 2

A.H*_*DAD -3

我解决了我的问题。

要使用您需要的超级集群项目：

1）下载并安装：node和npm

2）使用 npm install supercluster：npm i supercluster

然后你会得到一个名为node_modules的文件夹，在其中你会找到supercluster文件夹，复制名为dist的文件夹（node_modules>supercluster>dist）

3) 从 github 下载supercluster 项目，您将得到一个名为supercluster-master 的 文件夹，其中包含步骤 2 中复制的文件夹dist )

现在您可以通过在浏览器中选择index.html来测试它（supercluster-master>demo>index.html）
如果您想测试另一个 JSON 或 GEOJSON 文件：

1）将此文件放在fixtures文件夹下（supercluster-master>test>fixtures）

然后

2）打开worker.js（supercluster-master>demo>worker.js）并将geojson函数的第一个变量更改为指向该文件

例子：

getJSON('../test/fixtures/myFile.geojson', function (geojson) {

或者

您可以直接在mapbox gl js mapBox gl js 示例或 jupyter 版本中使用超级聚类算法；mapbox-jupyter mapbox-jupyter 示例

归档时间：	7 年，6 月前
查看次数：	5897 次
最近记录：	5 年，5 月前