MapBoxMap 之 FillLayer（围栏）

FillLayer:具有可选描边边框的填充多边形。

View On Github

这个其实与其它地图中的Polygon类似,多边形的形状取决于你添加点的集合。

 

预览一下效果:

                    

        图1 颜色填充多边形                                               图2 图片填充多边形

 

FillLayer添加到地图

 FillLayer初始化

public class FillLayerActivity extends AppCompatActivity {
    private static final String FILL_SOURCE_ID = "fill-source-id";
    private static final String FILL_LAYER_ID = "fill-layer-id";
    private static final String FILL_IMAGE_ID = "fill-image-id";

    private MapView mapView;
    private GeoJsonSource geoJsonSource;
    private FillLayer fillLayer;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fill_layer);

        //忽略其他view初始化...

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull final MapboxMap mapboxMap) {
                mapboxMap.setStyle(Style.MAPBOX_STREETS, new Style.OnStyleLoaded() {
                    @Override
                    public void onStyleLoaded(@NonNull final Style style) {
                        initFillLayer(style, switchUseImage.isChecked());
                    }
                });
            }
        });;
    }

    private void initFillLayer(Style style, boolean isUseImage) {
        //Source
        geoJsonSource = new GeoJsonSource(FILL_SOURCE_ID);
        style.addSource(geoJsonSource);
        //Layer
        fillLayer = new FillLayer(FILL_LAYER_ID, FILL_SOURCE_ID).withProperties(
                //填充抗锯齿 默认为true
                PropertyFactory.fillAntialias(true),
                //填充内部填充色
                PropertyFactory.fillColor(Config.BLUE_COLOR),
                //填充不透明度
                PropertyFactory.fillOpacity(0.5f),
                //填充轮廓线颜色
                PropertyFactory.fillOutlineColor(Config.RED_COLOR),
                //填充模式  可选的resolveImage。 Sprite中用于绘制图像填充的图像名称。对于无缝图案，图像的宽度和高度必须是两倍（2、4、8，...，512）。请注意，仅在整数缩放级别会评估与缩放相关的表达式。
//                PropertyFactory.fillPattern(FILL_IMAGE_ID),
                //填充排序键 基于此值按升序对要素进行排序。具有较高排序键的功能将显示在具有较低排序键的功能上方。
//                PropertyFactory.fillSortKey(),
                //填充翻译 几何的偏移量, 默认为0,0。值为[x，y]，其中负数分别表示左和上。 以像素为单位
                PropertyFactory.fillTranslate(new Float[]{0f, 0f}),
                /*
                 * 填充翻译锚 可选的枚举 "map" "viewport" 之一。默认为"map"。需要设置fill-translate。
                 * "map"：填充相对于地图进行转换。
                 * "viewport"：填充相对于视口平移。
                 */
                PropertyFactory.fillTranslateAnchor(Property.FILL_TRANSLATE_ANCHOR_MAP),
                //可见性 默认为可见
                PropertyFactory.visibility(Property.VISIBLE)
        );
        if (isUseImage){
            //image
            Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher_round);
            style.addImage(FILL_IMAGE_ID, drawable);
            fillLayer.setProperties(PropertyFactory.fillPattern(FILL_IMAGE_ID));
            Toast.makeText(this, "等待图源加载完成...", Toast.LENGTH_SHORT).show();
        }
        style.addLayer(fillLayer);
    }
}

绘制类型

1.添加多边形

 private void addFillLayerOnMap() {
    List<List<Point>> points = new ArrayList<>();
    points.add(Config.POLYGON_COORDINATES);
    geoJsonSource.setGeoJson(Polygon.fromLngLats(points));
}

 

2.添加有空洞的多边形

private void addFillLayerOnMapWithHole() {
        LineString outerLineString = LineString.fromLngLats(Config.POLYGON_COORDINATES);
        List<LineString> innerList = new ArrayList<>();
        for (int i = 0; i < Config.HOLE_COORDINATES.size(); i++) {
            LineString innerLineString = LineString.fromLngLats(Config.HOLE_COORDINATES.get(i));
            innerList.add(innerLineString);
        }
        geoJsonSource.setGeoJson(Polygon.fromOuterInner(outerLineString, innerList));
    }

 

动态更新

1.显示与隐藏

if (Property.VISIBLE.equals(fillLayer.getVisibility().getValue())) {

     fillLayer.setProperties(PropertyFactory.visibility(Property.NONE));
 } else {

     fillLayer.setProperties(PropertyFactory.visibility(Property.VISIBLE));
 }

2.更改透明度

int fillColorAsInt = fillLayer.getFillColorAsInt();

if (Config.BLUE_COLOR == fillColorAsInt) {
                                    
    fillLayer.setProperties(PropertyFactory.fillColor(Config.RED_COLOR)
                                            , 
    PropertyFactory.fillOutlineColor(Config.BLUE_COLOR)
                                            , PropertyFactory.fillOpacity(0.8f));
} else {
                                    
    fillLayer.setProperties(PropertyFactory.fillColor(Config.BLUE_COLOR)
                                            , 
    PropertyFactory.fillOutlineColor(Config.RED_COLOR)
                                            , PropertyFactory.fillOpacity(0.5f));
}

数据源

static final class Config {
        static final int BLUE_COLOR = Color.parseColor("#3bb2d0");
        static final int RED_COLOR = Color.parseColor("#AF0000");
        
        //多边形的点的集合
        static final List<Point> POLYGON_COORDINATES = new ArrayList<Point>() {
            {
                add(Point.fromLngLat(55.30122473231012, 25.26476622289597));
                add(Point.fromLngLat(55.29743486255916, 25.25827212207261));
                add(Point.fromLngLat(55.28978863411328, 25.251356725509737));
                add(Point.fromLngLat(55.300027931336984, 25.246425506635504));
                add(Point.fromLngLat(55.307474692951274, 25.244200378933655));
                add(Point.fromLngLat(55.31212891895635, 25.256408010450187));
                add(Point.fromLngLat(55.30774064871093, 25.26266169122738));
                add(Point.fromLngLat(55.301357710197806, 25.264946609615492));
                add(Point.fromLngLat(55.30122473231012, 25.26476622289597));
            }
        };
        //孔洞点的集合
        static final List<List<Point>> HOLE_COORDINATES = new ArrayList<List<Point>>() {
            {
                add(new ArrayList<>(new ArrayList<Point>() {
                    {
                        add(Point.fromLngLat(55.30084858315658, 25.256531695820797));
                        add(Point.fromLngLat(55.298280197635705, 25.252243254705405));
                        add(Point.fromLngLat(55.30163885563897, 25.250501032248863));
                        add(Point.fromLngLat(55.304059065092645, 25.254700192612702));
                        add(Point.fromLngLat(55.30084858315658, 25.256531695820797));
                    }
                }));
                add(new ArrayList<>(new ArrayList<Point>() {
                    {
                        add(Point.fromLngLat(55.30173763969924, 25.262517391695198));
                        add(Point.fromLngLat(55.301095543307355, 25.26122200491396));
                        add(Point.fromLngLat(55.30396028103232, 25.259479911263526));
                        add(Point.fromLngLat(55.30489872958182, 25.261132667394975));
                        add(Point.fromLngLat(55.30173763969924, 25.262517391695198));
                    }
                }));
            }
        };
    }

 

多边形的应用最多用于围栏功能

地图上的围栏目的：监听目标与围栏的位置关系。

对在于目标在围栏内的，出围栏需要告警通知。

对在于目标在围栏外的，进入围栏需要告警通知。