mapbox 数据驱动样式

data-driven styling

1. 画面或者带孔的面(FillLayer)

DrawPolygonActivity | PolygonHolesActivity | SatelliteLandSelectActivity | RevealedPolygonHoleOutlineActivity

• 构造面的点集合一定要闭合，也就是最后一个点坐标要和第一个点坐标完全相同。
• 不论是外部的点集合，还是里面孔的集合，都要闭合。

1.1 普通面

  style.addSource(new GeoJsonSource("source-id", Polygon.fromLngLats(POINTS)));
  style.addLayerBelow(new FillLayer("layer-id", "source-id").withProperties(
    fillColor(Color.parseColor("#3bb2d0"))), "settlement-label"
  );

1.2 带孔面

• 重点是 Polygon.fromOuterInner(@NonNull LineString outer, @Nullable @Size(min = 1) List inner)

  style.addSource(new GeoJsonSource("source-id",
    Feature.fromGeometry(Polygon.fromOuterInner(outerLineString, innerList))));

  FillLayer polygonFillLayer = new FillLayer("layer-id", "source-id")
    .withProperties(fillColor(BLUE_COLOR));

  style.addLayer(polygonFillLayer);

2. 热力图(HeatmapLayer)

HeatmapActivity

• Source 中的图形必须都是点，像聚合一样。

3. 聚合(Cluster)

CircleLayerClusteringActivity | ImageClusteringActivity

• Source 中的图形必须都是点

  loadedMapStyle.addSource(
      // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes from
      // 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
      new GeoJsonSource(EARTHQUAKE_SOURCE_ID,
        new URI("https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"),
        new GeoJsonOptions()
          .withCluster(true)
          .withClusterMaxZoom(14)
          .withClusterRadius(50)
      )
  );

4. 圆图层(CircleLayer)

StyleCirclesCategoricallyActivity

  style.addSource(new VectorSource(
    "ethnicity-source",
    "http://api.mapbox.com/v4/examples.8fgz4egr.json?access_token=" + Mapbox.getAccessToken()
  ));

  CircleLayer circleLayer = new CircleLayer("population", "ethnicity-source");
  circleLayer.setSourceLayer("sf2010");
  circleLayer.withProperties(
    circleRadius(
      interpolate(
        exponential(1.75f),
        zoom(),
        stop(12, 2f),
        stop(22, 180f)
      )),
    circleColor(
      match(get("ethnicity"), rgb(0, 0, 0),
        stop("white", rgb(251, 176, 59)),
        stop("Black", rgb(34, 59, 83)),
        stop("Hispanic", rgb(229, 94, 94)),
        stop("Asian", rgb(59, 178, 208)),
        stop("Other", rgb(204, 204, 204))
      ))
  );

  style.addLayer(circleLayer);

5. 图层过滤点线面(Filter)

MultipleGeometriesActivity

  countryPolygonFillLayer.setFilter(eq(literal("$type"), literal("Polygon")));
  individualCirclesLayer.setFilter(eq(literal("$type"), literal("Point")));

6. 弹窗(Info Window)

InfoWindowSymbolLayerActivity

 GenerateViewIconTask

7. 碰撞检测(Collision Detection)

SymbolCollisionDetectionActivity

• 忽略位置是当本图层内的图标或文字发生碰撞，是否会不显示。
• 允许重叠是在本图层已经显示的区域内，是否还允许重叠显示其它图层的文字或者图标

  // 文字和图标都可以设置忽略放置和允许重叠
  singleLayer.setProperties(
    adjustTextIgnorePlacement ? textIgnorePlacement(checked) : textAllowOverlap(checked),
    adjustIconIgnorePlacement ? iconIgnorePlacement(checked) : iconAllowOverlap(checked)
  );