安装heatmap

npm i maptalks.heatmap

热力分析

import { HeatLayer } from 'maptalks.heatmap'
// data为坐标数组，[{x:x,y:y},{x:x,y:y}]
addHeatLayer(data){
    var arr = []
    data.forEach(item => {
      const x = item.x;
      const y = item.y
      const xyz = [x,y,0.5]
      arr.push(xyz)
    });
    const layer = new HeatLayer('heat', arr)
    layer.addTo(this.map);
    return layer
  }

安装maptalks.markercluster

npm i maptalks.markercluster

聚合分析

import {ClusterLayer} from 'maptalks.markercluster'
addClusterLayer(){// 聚合分析
   var markers = []
   dataJson.forEach(item=>{
     conso marker= new maptalks.Marker([item.geometry.x,item.geometry.y])
     markers.push(marker)
   })
   var clusterLayer = new ClusterLayer('cluster', markers, {
      noClusterWithOneMarker : false,
      maxClusterZoom : 11,
      symbol: {
        markerType: 'ellipse',
        markerFill: { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [6, '#1bbc9b'], [12, 'rgb(216, 115, 149)']] },
        markerFillOpacity : 0.7,
        markerLineOpacity : 1,
        markerLineWidth : 3,
        markerLineColor : '#fff',
        markerWidth: { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] },
        markerHeight: { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] }
      },
      drawClusterText: true,
      geometryEvents: true,
      single: true
    })
    this.map.addLayer(clusterLayer)
},


ClusterLayer: 点聚合图层示例：https://github.com/maptalks/maptalks.markercluster

完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>maptalks.markercluster demo</title>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="../dist/maptalks.markercluster.js"></script>
    <script type="text/javascript" src="realworld.50000.1.js"></script>
    <script type="text/javascript" src="realworld.50000.2.js"></script>
    <style>
        html,body{
            margin:0px;
            height: 100%;
            width: 100%;
        }
        #map {
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" >
    //This demos is inspired by Leaflet.MarkerCluster
    //https://github.com/Leaflet/Leaflet.markercluster

    var map = new maptalks.Map("map",{
        center:   [175.27, -37.79],
        zoom   :  14,
        centerCross : true,
        baseLayer : new maptalks.TileLayer('tile',{
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          subdomains: ['a','b','c','d'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
    });

    var markers = [];
    // data from realworld.50000.1.js
    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        markers.push(new maptalks.Marker([a[1], a[0]]).on('mousedown', onClick));
    }
    // data from realworld.50000.2.js
    for (var i = 0; i < addressPoints2.length; i++) {
        var a = addressPoints2[i];
        markers.push(new maptalks.Marker([a[1], a[0]]).on('mousedown', onClick));
    }

    var clusterLayer = new maptalks.ClusterLayer('cluster', markers, {
        'noClusterWithOneMarker' : false,
        'maxClusterZoom' : 18,
        //"count" is an internal variable: marker count in the cluster.
        'symbol': {
            'markerType' : 'ellipse',
            'markerFill' : { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [9, '#1bbc9b'], [99, 'rgb(216, 115, 149)']] },
            'markerFillOpacity' : 0.7,
            'markerLineOpacity' : 1,
            'markerLineWidth' : 3,
            'markerLineColor' : '#fff',
            'markerWidth' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] },
            'markerHeight' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] }
        },
        'drawClusterText': true,
        'geometryEvents' : true,
        'single': true
    });

    map.addLayer(clusterLayer);

    map.on('click', function (e) {
        console.log(clusterLayer.identify(e.coordinate));
    });

    function onClick(e) {
        console.log(e.target);
    }
</script>
</body>
</html>