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)
);