maptalks / maptalks.markercluster

A layer of maptalks to cluster markers.

maptalks.markercluster

A plugin of maptalks.js to draw markers as clusters.

Examples

• marker clusters of 50000 points. (data from Leaflet.Heat)

Install

• Install with npm: npm install maptalks.markercluster.
• Download from dist directory.
• Use unpkg CDN: https://unpkg.com/maptalks.markercluster/dist/maptalks.markercluster.min.js

Usage

As a plugin, maptalks.markercluster must be loaded after maptalks.js in browsers.

<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.markercluster/dist/maptalks.markercluster.min.js"></script>
<script>
var data = [marker1, marker2, marker3];
var clusterLayer = new maptalks.ClusterLayer('cluster', data).addTo(map);
</script>

Supported Browsers

IE 9-11, Chrome, Firefox, other modern and mobile browsers.

API Reference

ClusterLayer is a subclass of maptalks.VectorLayer and inherits all the methods of its parent.

Constructor

new maptalks.ClusterLayer(id, data, options)

• id String layer id
• data Marker[] layer data, an array of maptalks.Marker
• options Object options
  • maxClusterRadius Number max cluster radius (160 by default)
  • symbol Object symbol of clusters
  • textSymbol Object symbol of cluster texts
  • drawClusterText Boolean whether to draw cluster texts (true by default)
  • textSumProperty String property name to sum up to display as the cluster text
  • maxClusterZoom Number the max zoom to draw as clusters (null by default)
  • animation Boolean whether animate the clusters when zooming (true by default)
  • animationDuration Number the animation duration
  • noClusterWithOneMarker Boolean whether display cluster with only one marker (false by default)
  • Other options defined in maptalks.VectorLayer

config(key, value)

config layer's options and redraw the layer if necessary

clusterLayer.config('maxClusterRadius', 100);
clusterLayer.config({
    'textSymbol' : {
        'textFaceName'      : 'monospace',
        'textSize'          : 16
    }
});

Returns this

addMarker(marker)

add more markers

• marker Marker[] markers to add

Returns this

toJSON()

export the layer's JSON.

var json = clusterLayer.toJSON();

Returns Object

Contributing

We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.

Develop

The only source file is index.js.

It is written in ES6, transpiled by babel and tested with mocha and expect.js.

Scripts

• Install dependencies

$ npm install

• Watch source changes and generate runnable bundle repeatedly

$ gulp watch

• Tests

$ npm test

• Watch source changes and run tests repeatedly

$ gulp tdd

• Package and generate minified bundles to dist directory

$ gulp minify

• Lint

$ npm run lint

maptalks.markercluster's Issues

你好，请问这个有配置文档之类的吗？好多东西都不知道咋配置

请问怎么修改聚合的图形大小？

想修改聚合图形的大小，要怎么修改？

在聚合的效果下，如果Marker设置为hide，聚合怎么设置只计算show的数量

transfered from maptalks/maptalks.js#969

maptalks's version and what browser you use?

Issue description
在聚合的效果下，如果Marker设置为hide，聚合怎么设置只计算show的数量？
比如把一个marker隐藏了，那么这个时候聚合就不需要计算被隐藏的marker；反则计算显示的marker

---

Please provide a reproduction URL (on any jsfiddle like site)

Click event on cluster marker

how to add click event on cluster marker ?

是否可以在聚合的图标上添加点击事件?

请问_initGridSystem是不是有问题？

_class.prototype._initGridSystem = function _initGridSystem() {
var points = [];
var extent = void 0,
extent_1 = void 0,
c = void 0;

    this.layer.forEach(function (g) {
        if (!g.isVisible()) {
            return;
        }
        c = g._getPrjCoordinates();
        if (!extent) {
            extent = g._getPrjExtent();
            extent_1=g.getExtent();
        } else {
            //这里用投影的Extent做合并，并不是想要的结果，我理解extent是不是应该和extent_1是对应的extent 是投影坐标，extent_1是经纬度，但我这里测试了，并不对应
            extent = extent._combine(g._getPrjExtent());       
            extent_1=extent_1._combine(g.getExtent());        
        }
          
        points.push({
            x: c.x,
            y: c.y,
            id: g._getInternalId(),
            geometry: g
        });
    });
    this._markerExtent = extent;
    this._markerPoints = points;

}

在_combine方法中
this.projection.project({x:-13720.015920780175,y:6715329.280305414})={x:-1527305185.9768558,y:20037508.34278074}

this.projection.unproject({x:-1527305185.9768558,y:20037508.34278074})={x:-40.01592078017529,y:85.0511287798}

不是原来的坐标了

聚合图模式下，点击单个要素，返回为空数组

修改非cluster状态下的函数逻辑，如上图所示，即可有返回值

点击 cluster 聚合图形 ,返回返回聚合中集合不准确问题(即 identify 方法不准确 问题)

添加 地图click监听, map.on('click',fn)
fn 中 使用 layer.identify (point) 获取聚集中的 数组.
但是 点击 聚集 周围区域, 也会返回 聚集中的 数组.
是不是 判断距离精度的问题?

假设maxClusterZoom=8，聚合点在9级以后不显示了，但聚合的叶子节点就不显示了，咋回事？

假设maxClusterZoom=8，聚合点在9级以后不显示了，但聚合的叶子节点就不显示了，咋回事？
没有children的节点在9级以后也不显示,很奇怪

在生产环境中聚合图层和添加到聚合图层中的所有marker同时显示出来， 在开发环境中又是正常的

在生产环境中聚合图层和添加到聚合图层中的所有marker同时显示出来， 在开发环境中又是正常的，
初始化聚合图层的代码：

  new ClusterLayer('cluster', [], {
          zIndex: 100,
          noClusterWithOneMarker: false,
          noClusterWithHowMany: 8, //聚合的最小个数
          maxClusterZoom: 15,
          //"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'],
                [50, 'rgb(116, 115, 149)'],
                [99, 'rgb(216, 115, 149)'],
              ],
            },
            markerFillOpacity: 0.7,
            markerLineOpacity: 1,
            markerLineWidth: 3,
            markerLineColor: '#fff',
            markerWidth: {
              property: 'count',
              type: 'interval',
              stops: [
                [0, 40],
                [9, 60],
                [50, 70],
                [99, 80],
              ],
            },
            markerHeight: {
              property: 'count',
              type: 'interval',
              stops: [
                [0, 40],
                [9, 60],
                [50, 70],
                [99, 80],
              ],
            },
          },
          drawClusterText: true,
          geometryEvents: true,
          single: true,
      })

添加marker的代码

 if (isArray(data) && !isEmpty(data)) {
        const markerImg = require('@jdhnw/assets/images/dashboard/soil-position-blue.png')
        const markers = []
        data.forEach((m) => {
          const { latitude, longitude, status, id } = m
          const point = new maptalks.Marker([longitude, latitude], {
            id,
            symbol: [
              {
                markerFile: markerImg,
                markerWidth: 46,
                markerHeight: 32,
              },
            ],
          })
          point.on('click', () => {
            this.map.setCenter([longitude, latitude])
            this.$nextTick(() => {
              const { soildMapDialogRef } = this.$refs
              soildMapDialogRef.open({ type: 'ID', data: { cropCateId: this.filter.cropCategory, quotaDataId: m.id } })
            })
          })
          markers.push(point)
          // 添加聚合图层
          this.clusterLayer.addMarker(point)
          console.log('添加聚合图层： ', point)
        })
        this.map.addLayer(this.clusterLayer)
      }

新增对这三个属性的支持：forceRenderOnMoving、forceRenderOnZooming、forceRenderOnRotating

新增对这三个属性的支持：forceRenderOnMoving、forceRenderOnZooming、forceRenderOnRotating

'Only a point(Marker) can be added into a ClusterLayer'

你好， 参考图示，而且我有3个点，画红框 的代码不太明白什么意思。

cluster text's position offset

Cluster text has some offset (a little bit higher than expected)

vue引入编译会报错，对于工程化项目如何正确引入？

"export 'ClusterLayer' (imported as 'maptalks') was not found in 'maptalks'

readme image

config （conf） 设置没有生效，是设计如此吗 ？

我不知道是是因为对象所以没有效果吗 ？ setOptions也有类似问题。

再询问一下支持 symbol 重新设置吗 ？

你好，请问怎么更新聚合中的某一marker的位置

enable markers to flash/show/hide on clusterlayer

聚合插件不能正常使用

我在地图初始化完成之后创建了一个Cluster图层，并添加到map上，然后在请求到数据之后添加到Cluster图层中之后，只有第一次能正常显示，当我进行缩放之后，聚合图层就会不显示了，只有在缩放过程中会显示，缩放完成就没了。并且会报错，见下图：

• 效果GIF: 好像gif放不上来，链接:http://p7wghdplg.bkt.clouddn.com/gif.gif
  

通过identify方法在聚合图层上捕获聚合点位，触发事件时，定位不准确问题

如题，点击聚合图形周边区域的时候也会成功触发该聚合点位的回调，设置tolerance 属性 感觉没生效

How to add altitude for cluster layer or directly cluster itself

Hi there. I have maptalks with drawn 3d polygons through three layer, and than only needs to add markers and clusters with altitude above them. I spent a week to understand how to add altitude for clusters, delved all sources for markercluster and maptalks, but anyway couldn't get it. Could you explain to me how to do that or point to a way?

聚合动画

设置聚合动画效果的时候，不在聚合内的marker能否不加动画显示效果？

最新版maptalks地图会使聚合失效

"maptalks": "^1.0.0-rc.29",
"maptalks.markercluster": "^0.8.5",
该版本maptalks会使地图上应当聚合的marker以及聚合后的marker同时出现在地图上

无法设置聚合效果的 altitude

无法设置聚合效果的 altitude

十几万个标注，用cluster,但到叶子节点层级时，地图就非常卡慢，咋解决

vue引入聚合报错

[Vue warn]: Error in nextTick: "TypeError: _maptalks3.Clusterlayer is not a constructor"

请问如何给每个聚合点初始化开始的值

每个聚合点有个初始数字，比如10，100啥的。 然后在聚合的时候，需要把这个初始值进行累加得出聚合后的数量，但目前聚合图层只是简单的累加marker点的数量。 请问有没有方法能够实现这样的需求呢？

请问聚合图层的数据源怎么样才能支持marker以外的类型，比如3d物体mesh之类的

现在我需要对maptalk.three创建的三维物体进行聚合，但聚合图层只支持marker类型，请问如何可以支持其他类型的物体

No cluster spiderfication?

Leaflet has a really nice marker clusterer that offers the ability to spidery the markers in a cluster when the cluster icon is clicked/tap. How, if at all possible, can this be done with the Maptalks Clusterer?

点击当前聚合点不能展示下一个层级的聚合点