大头针显隐跟随楼层功能探索：从无到有，实现楼层切换时只显示对应楼层的大头针效果

2023-09-09 11:48:48

大家好，我是[你的名字]，一位热衷于技术博客创作的专家。今天，我想和大家分享一下我在探索大头针显隐跟随楼层功能时踩过的坑，以及最终如何找到一个可行的解决方案。

事情是这样的，mapbox 提供的大头针默认没有楼层相关属性，因此无法实现切换楼层时，只显示对应楼层的大头针效果。客户端同事无法解决这个问题，希望我在 SDK 端解决此问题，于是我开始了相关探索。

由于有段时间没有做地图 SDK 开发了，所以我踩了一些坑。首先，我尝试在 mapbox 的文档和 API 中寻找相关信息，但没有找到任何有用的内容。然后，我尝试在网上搜索相关资料，但也没有找到任何有价值的信息。

最后，我决定自己动手尝试。我首先从mapbox官方库中下载了最新的 SDK，然后在示例代码的基础上进行了修改。经过一番摸索，我终于找到了一个可行的解决方案。

下面，我将分享一下详细的步骤和示例代码：

步骤一：导入必要的库

import com.mapbox.maps.Mapbox;
import com.mapbox.maps.MapView;
import com.mapbox.maps.Style;
import com.mapbox.maps.CameraOptions;

// 这里引入大头针相关库
import com.mapbox.geojson.Point;
import com.mapbox.geojson.Feature;
import com.mapbox.geojson.FeatureCollection;
import com.mapbox.mapboxsdk.geometry.LatLng;

步骤二：初始化地图

MapView mapView = findViewById(R.id.mapView);
mapView.onCreate(savedInstanceState);

// 设置地图样式
Mapbox.getInstance(this, getString(R.string.mapbox_access_token));
mapView.getMapboxMap().loadStyleUri(Style.MAPBOX_STREETS);

// 设置地图视角
CameraOptions cameraOptions = CameraOptions.Builder()
        .center(new LatLng(37.7749, -122.4194))
        .zoom(16)
        .build();
mapView.getMapboxMap().setCamera(cameraOptions);

步骤三：添加大头针

// 创建一个大头针 FeatureCollection
FeatureCollection featureCollection = FeatureCollection.fromFeatures(new ArrayList<>());

// 创建一个大头针 Feature
Feature feature = Feature.fromGeometry(Point.fromLngLat(122.4194, 37.7749));

// 设置大头针属性
feature.addStringProperty("title", "这里是标题");
feature.addStringProperty("description", "这里是");
feature.addNumberProperty("floor", 1); // 楼层属性

// 将大头针 Feature 添加到 FeatureCollection 中
featureCollection.add(feature);

// 将 FeatureCollection 添加到地图中
mapView.getMapboxMap().addMarkers(featureCollection);

步骤四：添加楼层切换按钮

Button floorButton = findViewById(R.id.floorButton);

floorButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 获取当前楼层
        int currentFloor = 1;

        // 获取地图上的所有大头针
        List<Marker> markers = mapView.getMapboxMap().getMarkers();

        // 循环遍历大头针，只显示当前楼层的大头针
        for (Marker marker : markers) {
            int markerFloor = marker.getFeature().getNumberProperty("floor").intValue();
            marker.setVisible(markerFloor == currentFloor);
        }
    }
});

示例代码

import com.mapbox.maps.Mapbox;
import com.mapbox.maps.MapView;
import com.mapbox.maps.Style;
import com.mapbox.maps.CameraOptions;
import com.mapbox.geojson.Point;
import com.mapbox.geojson.Feature;
import com.mapbox.geojson.FeatureCollection;
import com.mapbox.mapboxsdk.geometry.LatLng;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private MapView mapView;

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

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);

        // 设置地图样式
        Mapbox.getInstance(this, getString(R.string.mapbox_access_token));
        mapView.getMapboxMap().loadStyleUri(Style.MAPBOX_STREETS);

        // 设置地图视角
        CameraOptions cameraOptions = CameraOptions.Builder()
                .center(new LatLng(37.7749, -122.4194))
                .zoom(16)
                .build();
        mapView.getMapboxMap().setCamera(cameraOptions);

        // 创建一个大头针 FeatureCollection
        FeatureCollection featureCollection = FeatureCollection.fromFeatures(new ArrayList<>());

        // 创建一个大头针 Feature
        Feature feature = Feature.fromGeometry(Point.fromLngLat(122.4194, 37.7749));

        // 设置大头针属性
        feature.addStringProperty("title", "这里是标题");
        feature.addStringProperty("description", "这里是");
        feature.addNumberProperty("floor", 1); // 楼层属性

        // 将大头针 Feature 添加到 FeatureCollection 中
        featureCollection.add(feature);

        // 将 FeatureCollection 添加到地图中
        mapView.getMapboxMap().addMarkers(featureCollection);

        Button floorButton = findViewById(R.id.floorButton);

        floorButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 获取当前楼层
                int currentFloor = 1;

                // 获取地图上的所有大头针
                List<Marker> markers = mapView.getMapboxMap().getMarkers();

                // 循环遍历大头针，只显示当前楼层的大头针
                for (Marker marker : markers) {
                    int markerFloor = marker.getFeature().getNumberProperty("floor").intValue();
                    marker.setVisible(markerFloor == currentFloor);
                }
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }

    @Override
    protected void onResume() {
        super.onResume();
        mapView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        mapView.onPause();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

    @Override
    public void onLowMemory() {
        super.onLowMemory();
        mapView.onLowMemory();
    }
}