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

与Mapbox Android上数千个标记(或GeoJSON点)的交互,mapbox,geojson,mapbox-gl,mapbox-android,mapbox-marker,Mapbox,Geojson,Mapbox Gl,Mapbox Android,Mapbox Marker,我敢肯定,我可能在Mapbox实现中遗漏了一些东西,因为我一直在研究很多备选方案(Tangram ES、Mapzen和其他) 我需要在Android上显示数千(而不是数百万)个交互点(或标记)。我只需要能够捕获单击的点/标记 我成功地在Android的Mapbox上实现了标记。但我不喜欢在缩小手机时显示这么多标记的结果 在传单中有一个很棒的插件,叫做Markercluster,它将一个圆圈分组,圆圈下面有一个隐藏的标记。我发现这个解决方案非常完美 我无法为Mapbox(或其他API)找到类似的解

我敢肯定,我可能在Mapbox实现中遗漏了一些东西,因为我一直在研究很多备选方案(Tangram ES、Mapzen和其他)

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

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

在传单中有一个很棒的插件,叫做Markercluster,它将一个圆圈分组,圆圈下面有一个隐藏的标记。我发现这个解决方案非常完美

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

因此,简而言之,标记缺少GeoJSON点的外观(当我缩小时,这些点会隐藏起来,或在放大时显示出来,在放大时或多或少地显示出来)。但是,标记允许我单击它们


另外,如果有人知道Mapbox的替代方案,可以根据我的需要显示POI(兴趣点),请告诉我。我非常乐意给它一个机会。

好吧,显然有一种方法可以实现我使用Mapbox for Android SDK的目的。方法是这样的:

  • 使用GeoJson文件加载点(标记)(添加数据源)
  • 包括标记的图标(Mapbox提供了广泛的默认标记)
  • 将GeoJson点与图标相关联(因此每个点至少与一个图标相关,但您可能希望所有标记都具有相同的图标)(添加视觉表示)
  • 添加onClick事件侦听器以检测单击了哪个点(添加交互性)
  • 1.使用GeoJson文件(添加数据源)加载点(标记)

    2.包括标记的图标(Mapbox提供了大量默认标记)(添加视觉表示)

    3.将GeoJson点与图标相关联(因此每个点至少与一个图标相关,可能是您希望所有标记使用相同的图标)(添加视觉表示)

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

    mapboxMap.addOnMapClickListener(新的mapboxMap.OnMapClickListener(){
    @凌驾
    公共空区(停车点){
    PointF screenPoint=mapboxMap.getProjection().toScreenLocation(点);
    List features=mapboxMap.queryRenderedFeatures(屏幕点,“图层id”);
    如果(!features.isEmpty()){
    功能选择功能=功能。获取(0);
    selectedFeature.getProperties().addProperty(“selected”,true);
    字符串标题=selectedFeature.getStringProperty(“标题”);
    Toast.makeText(MapActivity.this,“您选择了”+title,Toast.LENGTH_SHORT.show();
    //这会触发数据源上功能(点)的更新,因此它会更新SymbolLayer,您可以看到已启用的功能(在本例中更大)
    setGeoJson(selectedFeature);
    }
    }
    });
    
    我找到的完整指南是这本非常棒的指南,尽管有一两个函数被弃用了,我也在寻找它们的替代品。除此之外,这可能是深入了解Mapbox SDK的符号层的一个好方法。你可以用它做很多好事

    URL geoJsonUrl = new URL("https://your-website.com/list.json");
    final GeoJsonSource geoJsonSource = new GeoJsonSource("geojson-source", geoJsonUrl);
    mapboxMap.addSource(geoJsonSource);
    
    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);
    
    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);
    
    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);
            }
        }
    });