Как использовать суперкластер - PullRequest
Новая
       8

Как использовать суперкластер

0 голосов
/ 26 июня 2018

Я новичок в mapbox.Мне нужно использовать проект суперкластера mapbox , чтобы отобразить на карте 6 миллионов GPS.я пытался использовать демо в localhost, но я получаю только пустую карту!?

это мой код в 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>

Примечание : GeoObs - это мой geojson файл

что не так?

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

FWIW - это автономный пример того, как использовать сверхскопление без Web Worker.Это также просто основано на демо репо. 

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);
<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>
0 голосов
/ 29 июня 2018

Я решил мою проблему.

, чтобы использовать нужный вам проект суперкластера:

1) скачать и установить: узел и npm

2) с помощью npm установите суперкластер: npm i supercluster

, тогда вы получите папку с именем node_modules , в которой вы найдете папку суперкластера под нейскопируйте папку с именем dist (node_modules> supercluster> dist)

3), скачайте с github проект supercluster здесь вы получите папкус именем supercluster-master мимо в нем находится папка dist , скопированная на шаге 2)


  • Теперь вы можете проверить это, выбрав index.html в своем браузере (supercluster-master> demo> index.html)

  • , если хотитепротестируйте другой файл JSON или GEOJSON просто:

1 ) поместите этот файл в папку приспособлений (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

...