与Mapbox Android上的数千个标记(或GeoJSON点)交互

时间:2018-02-22 15:27:18

标签: mapbox geojson mapbox-gl mapbox-android mapbox-marker

我确信我可能会遗漏Mapbox实施的内容,因为我一直在研究很多替代方案(Tangram ES,Mapzen等)。

我需要在Android上本地显示数千(而不是数百万)的交互点(或标记)。我只需要能够捕获点击了哪个点/标记。

我在Mapbox for Android上成功实现了标记。但我不喜欢在缩小手机时显示这么多标记的结果。

在Leaflet中有一个很棒的插件,名为Markercluster,它在一个圆圈中分组,下面有隐藏的标记。我发现解决方案很简单。

我无法为Mapbox(或其他API)找到类似的解决方案。到目前为止,我发现的唯一能够接近我正在寻找的东西的是在Mapbox上加载GeoJSON文件。而且它简单易行。以后容易隐藏图层。但我无法知道点击了哪个Point,因此我可以加载与该点相关的信息并在屏幕上显示。

所以,简报,标记缺少我用GeoJSON点得到的外观(当我放大或缩小时显示隐藏,当我放大时显示或多或少显示)。但是,标记允许我点击它们。

P.S。如果有人知道Mapbox的替代品,那么我可以根据需要显示POI(兴趣点),请告诉我。我很乐意给它一个机会。

1 个答案:

答案 0 :(得分:1)

嗯,显然有一种方法可以使用Mapbox for Android SDK做我想做的事情。方法就是这个:

  1. 使用GeoJson文件(添加数据源)
  2. 加载点(标记)
  3. 包含标记的图标(Mapbox提供各种默认标记https://www.mapbox.com/maki-icons/
  4. 将GeoJson点与图标相关联(因此每个点至少与图标相关,可能是您希望所有标记都使用相同的图标)(添加可视化表示)
  5. 添加onClick事件侦听器以检测已单击的点(添加交互性)
  6. 1.使用GeoJson文件(添加数据源)加载点(标记)

    URL geoJsonUrl = new URL("https://your-website.com/list.json");
    final GeoJsonSource geoJsonSource = new GeoJsonSource("geojson-source", geoJsonUrl);
    mapboxMap.addSource(geoJsonSource);
    

    2.包含标记的图标(Mapbox提供各种默认标记https://www.mapbox.com/maki-icons/)(添加可视化表示)

    Bitmap marker_type1_icon = BitmapFactory.decodeResource(getResources(), R.drawable.marker_type1_icon);
    mapboxMap.addImage("marker_type1", marker_type1_icon);
    Bitmap marker_type2_icon = BitmapFactory.decodeResource(getResources(), R.drawable.marker_type2_icon);
    mapboxMap.addImage("marker_type2", marker_type2_icon);
    

    3.将GeoJson点与图标相关联(因此每个点至少与图标相关,可能是您想要所有标记的相同图标)(添加可视化表示) < / p>

    SymbolLayer symbolLayer = new SymbolLayer("layer-id", "geojson-source");
    symbolLayer.setProperties(
        // This is the bit that makes the map to display an icon or another. "poi" is a property of a Point in a GeoJSON document.
        // If you enclosed between keys,, it will introduce the value of the poi property.
        // If you want a fixed icon for all markers, change this for "marker_type1", following my example from point 2.
        PropertyFactory.iconImage("{poi}"),
        // With this property we will show which Point was clicked, making the icon look bigger
        PropertyFactory.iconSize(
            Function.property(
                "selected",
                Stops.categorical(
                    Stop.stop(true, PropertyFactory.iconSize(2.0f)),
                    Stop.stop(false, PropertyFactory.iconSize(1.0f))
                )
            )
        )
    );
    mapboxMap.addLayer(symbolLayer);
    

    4.添加onClick事件侦听器以检测已单击的点(添加交互性)

    mapboxMap.addOnMapClickListener(new MapboxMap.OnMapClickListener() {
        @Override
        public void onMapClick(LatLng point) {
            PointF screenPoint = mapboxMap.getProjection().toScreenLocation(point);
            List<Feature> features = mapboxMap.queryRenderedFeatures(screenPoint, "layer-id");
            if (!features.isEmpty()) {
                Feature selectedFeature = features.get(0);
                selectedFeature.getProperties().addProperty("selected", true);
                String title = selectedFeature.getStringProperty("title");
                Toast.makeText(MapActivity.this, "You selected " + title, Toast.LENGTH_SHORT).show();
    
                // This triggers the update of the feature (Point) on the data source so it updates the SymbolLayer and you can see the feature enabled (bigger in this example)
                geoJsonSource.setGeoJson(selectedFeature);
            }
        }
    });
    

    我找到的完整指南是https://blog.mapbox.com/a-guide-to-the-android-symbollayer-api-5daac7b66f2c这个非常棒,尽管已经弃用了一两个函数,但我找了他们的替代品。除此之外,可以更好地深入了解Mapbox SDK的SymbolLayer。你可以用它做很好的事情。