Mapbox群集的数据驱动样式

时间:2018-08-20 19:29:43

标签: javascript mapbox mapbox-gl-js mapbox-gl mapbox-gl-draw

当使用Mapbox的GL JS可视化群集时,如何将群集显示为大小/颜色与群集点的平均属性“ Rev”成比例而不是与点数属性成比例的圆,因为我的代码是现在就做。

有什么方法可以简单地做到这一点,还是应该研究其他方法?

这是我的GeoJson文件,后跟HTML / JS代码:

{
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.19829231731719,
          47.90908511753154
        ]
      },
      "properties": {
        "Rev": 35936
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.7755325786427,
          47.7306063942337
        ]
      },
      "properties": {
        "Rev": 47200
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.12815267767228,
          47.73181417578077
        ]
      },
      "properties": {
        "Rev": 39752
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.72131588657607,
          47.62538657582257
        ]
      },
      "properties": {
        "Rev": 68409
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.76859244063696,
          47.65315010018514
        ]
      },
      "properties": {
        "Rev": 58096
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.68193070272407,
          47.59749128620617
        ]
      },
      "properties": {
        "Rev": 47041
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.8242039862955,
          47.55099465271122
        ]
      },
      "properties": {
        "Rev": 51853
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.70419192685726,
          47.60802452425318
        ]
      },
      "properties": {
        "Rev": 72618
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.69693913078216,
          47.57162728442453
        ]
      },
      "properties": {
        "Rev": 52554
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.77082212541431,
          47.58519630791069
        ]
      },
      "properties": {
        "Rev": 47701
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.72274437525938,
          47.57540476604761
        ]
      },
      "properties": {
        "Rev": 63610
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.72121927445753,
          47.45263352979493
        ]
      },
      "properties": {
        "Rev": 38567
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.76290287271861,
          47.55429851907238
        ]
      },
      "properties": {
        "Rev": 35469
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.74269793343025,
          47.53953686427654
        ]
      },
      "properties": {
        "Rev": 49121
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.76163591227777,
          47.50644185305855
        ]
      },
      "properties": {
        "Rev": 47919
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.84542950324599,
          47.61777915571298
        ]
      },
      "properties": {
        "Rev": 60426
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.77801075058724,
          47.51816149102929
        ]
      },
      "properties": {
        "Rev": 47905
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.80767455969733,
          47.52848409139136
        ]
      },
      "properties": {
        "Rev": 45401
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.89213548996228,
          47.53451007871581
        ]
      },
      "properties": {
        "Rev": 65160
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.27195393835159,
          47.61583697105699
        ]
      },
      "properties": {
        "Rev": 41483
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.84749023832796,
          47.53243876693115
        ]
      },
      "properties": {
        "Rev": 56875
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.8314888595886,
          47.51782244114296
        ]
      },
      "properties": {
        "Rev": 46844
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.80527536508978,
          47.50451498771553
        ]
      },
      "properties": {
        "Rev": 55438
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.87559172093075,
          47.44430331307405
        ]
      },
      "properties": {
        "Rev": 64614
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.04097664266915,
          47.4746664178687
        ]
      },
      "properties": {
        "Rev": 49051
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.79453993380347,
          47.29481960119973
        ]
      },
      "properties": {
        "Rev": 54271
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.27362522622246,
          46.93872952966501
        ]
      },
      "properties": {
        "Rev": 40496
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.95310271439685,
          47.50726480344612
        ]
      },
      "properties": {
        "Rev": 50724
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.85227048096456,
          47.12576043063685
        ]
      },
      "properties": {
        "Rev": 41971
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.80575131531626,
          47.64731392392495
        ]
      },
      "properties": {
        "Rev": 43599
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.30450455023757,
          47.50616020238343
        ]
      },
      "properties": {
        "Rev": 41448
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-52.99853696654008,
          47.46071325746318
        ]
      },
      "properties": {
        "Rev": 43216
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-55.6341634538055,
          47.0235441308108
        ]
      },
      "properties": {
        "Rev": 36876
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-54.59106469230987,
          47.58288998217581
        ]
      },
      "properties": {
        "Rev": 41589
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-54.78972204950092,
          47.01558950634211
        ]
      },
      "properties": {
        "Rev": 45855
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-56.18216646812429,
          47.90876337708686
        ]
      },
      "properties": {
        "Rev": 35796
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-55.70784429742714,
          47.87535928809802
        ]
      },
      "properties": {
        "Rev": 33708
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-57.92125736143824,
          47.76215387234033
        ]
      },
      "properties": {
        "Rev": 34958
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-58.6714380511899,
          48.68732029080497
        ]
      },
      "properties": {
        "Rev": 35595
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-58.59978250200671,
          48.22999943196341
        ]
      },
      "properties": {
        "Rev": 32829
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-58.54838602886607,
          48.54786691695791
        ]
      },
      "properties": {
        "Rev": 35398
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-57.6584168422964,
          48.99080773133051
        ]
      },
      "properties": {
        "Rev": 53009
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-57.39261664236924,
          49.33955194626351
        ]
      },
      "properties": {
        "Rev": 36144
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-58.0409231988025,
          49.0206817167341
        ]
      },
      "properties": {
        "Rev": 36464
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-57.86226837634594,
          48.94064825318665
        ]
      },
      "properties": {
        "Rev": 44829
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-58.14944772884918,
          49.00481125619757
        ]
      },
      "properties": {
        "Rev": 36875
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-57.97295124074003,
          48.91990398869032
        ]
      },
      "properties": {
        "Rev": 37959
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-57.89350628857931,
          48.93652298696046
        ]
      },
      "properties": {
        "Rev": 53291
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-56.49906193316706,
          48.8227639083209
        ]
      },
      "properties": {
        "Rev": 34094
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-54.58950143236479,
          48.95764271638678
        ]
      },
      "properties": {
        "Rev": 48675
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-55.66330038586263,
          48.95778743717311
        ]
      },
      "properties": {
        "Rev": 40344
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-55.45649488665619,
          48.7019018412633
        ]
      },
      "properties": {
        "Rev": 36571
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-54.90874253491071,
          48.76734107890486
        ]
      },
      "properties": {
        "Rev": 39920
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-54.33974197493689,
          48.59373660344468
        ]
      },
      "properties": {
        "Rev": 36012
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.16774644648342,
          48.55634939882323
        ]
      },
      "properties": {
        "Rev": 32312
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.81331044039514,
          48.28629035968544
        ]
      },
      "properties": {
        "Rev": 34997
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.79701198717154,
          48.03064642044428
        ]
      },
      "properties": {
        "Rev": 47900
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.78741872849682,
          49.07728414094627
        ]
      },
      "properties": {
        "Rev": 34643
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-53.93968612391672,
          49.53745719648462
        ]
      },
      "properties": {
        "Rev": 35068
      }
    }
  ]
}
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Display a map</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

  <div id='map'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoicm9kb2xwaGVnIiwiYSI6ImNqZjlzdnhndTBsdnMycW9mb3BpbHE4azMifQ._NTOVMlFUt17lxImA6WEIg';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/rodolpheg/cjkvlobk505l92ro0caogtdl0',
      center: [-56, 48],
      zoom: 5
    });

    var min = 8000;
    var max = 100000;
    var color1 = 'F03434';
    var color2 = '446CB3';

    map.on('load', function() {
      map.addSource("rev-statcan", {
        type: "geojson",
        data: "geoJsonStatCanRevCourt.geojson",
        cluster: true,
        clusterMaxZoom: 14,
        clusterRadius: 40
      });

      map.addLayer({
        id: "clusters",
        type: "circle",
        source: "rev-statcan",
        filter: ["has", "point_count"],
        paint: {
          "circle-color": {
            property: "point_count",
            type: "interval",
            stops: [
              [0, "#71AAC4"],
              [100, "#71AAC5"],
              [750, "#71AAC6"],
            ]
          },
          "circle-radius": {
            property: "point_count",
            type: 'exponential',
            stops: [
              [0, 10],
              [2000, 50]
            ]
          }
        }
      });

      map.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "rev-statcan",
        filter: ["has", "point_count"],
        layout: {
          "text-field": "{point_count_abbreviated}",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12
        }
      });

      map.addLayer({
        id: "unclustered-point",
        type: "circle",
        source: "rev-statcan",
        filter: ["!has", "point_count"],
        paint: {
          'circle-color': {
            property: 'Rev',
            type: 'exponential',
            stops: [
              [8000, '#' + color1],
              [100000, '#' + color2]
            ]
          },
          'circle-radius': {
            property: 'Rev',
            type: 'exponential',
            stops: [
              [8000, 2],
              [100000, 30]
            ]
          }
        }
      });
    });
  </script>
</body>

</html>

0 个答案:

没有答案