时间戳

首页 > 解决方案 > 在 Mapbox Android SDK 中显示具有自定义属性的圆环图集群

mapbox - 在 Mapbox Android SDK 中显示具有自定义属性的圆环图集群

问题描述

Mapbox SDK Android 地图上有不同的类型标记。我正在使用带有自定义过滤器的标记源聚类来显示不同类型的计数。

      let geoJsonOptions = new this.mapboxSdk.style.sources.GeoJsonOptions()
        .withCluster(true)
        .withClusterMaxZoom(13)
        .withClusterRadius(51);

      for(let type in this.ChecklistAttributes){
        geoJsonOptions.withClusterProperty(type,
          this.mapboxSdk.style.expressions.Expression.literal("+"),
          this.mapboxSdk.style.expressions.Expression.raw('["case",["==",["get","type"],"'+type+'"],1,0]')
        )
      }

      //Add GeoJson Source
      this.ChecklistMarkersSource = new this.mapboxSdk.style.sources.GeoJsonSource("checklist-markers-source",
        JSON.stringify(this.ChecklistsGeoJson),
        geoJsonOptions
      );
      style.addSource(this.ChecklistMarkersSource);

当我查询源特征时，这可以按预期工作，我正在获取具有不同计数的集群数据。

我想根据不同类型的数量显示一个圆环图，但我找不到如何绘制自定义集群并添加到地图的方法。

这是一个现成的 mapbox gl-js 示例，但它使用了 Mapbox Android SDK 不支持的 HTML/SVG，或者我找不到方法：

https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/

我尝试生成光栅图像并将它们添加为图像源层，但这感觉非常占用资源和糟糕的方法。另外，我不知道如何在放大过程中处理图像的大小。

标签： mapboxmapbox-androidmapbox-marker

解决方案

我也遇到了集群问题，特别是 Mapbox Android 的withClusterProperty字段。这对我有用。

要创建一个名为myClusterProperty - 的集群属性，如果特征属性myFeatureProperty等于"red"，则添加 1，否则添加 0：

GeoJsonOptions()
    .withClusterProperty("myClusterProperty",
        sum(accumulated(), get("myClusterProperty")),
            switchCase(eq(get("myFeatureProperty"), "red"),
                       literal(1), literal(0)))

并用于创建集群圈层：

  1. 添加集群源数据
  2. 添加指向源数据的圆形图层
  3. 过滤圆形图层以仅显示集群

添加源数据：

val mySourceData = GeoJsonSource("mySourceData",
            FeatureCollection.fromFeatures(emptyList()),
    GeoJsonOptions().withCluster(true).withClusterProperty(...)

要为集群添加圆圈：

// "point_count" is the Mapbox built-in property that only clusters have 
val isInCluster = has("point_count") 

val circleLayer = CircleLayer("myClusterLayerId", "mySourceData")
circleLayer.setProperties()
circleLayer.setFilter(isInCluster)

addLayer(circleLayer)

要通过新创建的集群属性过滤此集群，请myClusterProperty替换circleLayer.setFilter(isInCluster)为：

val hasCountAtLeastOne = gte(toNumber("myClusterProperty"), literal(1))
circleLayer.setFilter(all(isInCluster, hasCountAtLeastOne))

推荐阅读