如何在iOS应用中的Mapbox中将GeoJSON字典显示为热图

Question

I have an iOS app in swift that is successfully displaying a map using the Mapbox iOS library.

I also have a some GeoJSON data, as a dictionary, which I have pulled from a Redis database. I have successfully printed this data in the Xcode console after pulling it and it looks like this:

Optional(["city": chicago, "data": {
    features =     (
                {
            geometry =             {
                coordinates =                 (
                    "-87.86810699999999",
                    "41.966483"
                );
                type = Point;
            };
            properties =             {
                weight = 1;
            };
            type = Feature;
        },
                {
            geometry =             {
                coordinates =                 (
                    "-87.866905",
                    "41.96288"
                );
                type = Point;
            };
            properties =             {
                weight = 3;
            };
            type = Feature;
        },
/*and so on with many more point features...*/

The line that converts the raw array returned from the Redis query into the above dictionary in the code is the following:

let geojson_dict = (message[0] as! String).convertToDictionary()

I want to now put this GeoJson data over my MapBox map view defined in the code as:

var mapBoxView: MGLMapView?

at the point I have the GeoJson data the mapBoxView is added as a view and visible.

This example touches on how to do this:

https://docs.mapbox.com/ios/maps/examples/heatmap-example/

but the GeoJson data has a different structure and it is not dealing with a dictionary in memory but rather pulling the GeoJson from a url. This coupled with the example being poorly documented/commented makes it hard to adapt to my particular use case.

I tried the following:

let feature = try! MGLShape(data: geojson_dict as Data, encoding: String.Encoding.utf8.rawValue) as! MGLShapeCollectionFeature

but this doesn't seem to want to work with geojson_dict being a dictionary, nor would it add a heat map to the mapbox view.

Answer 1

Your geojson_dict["data"] is your GeoJson dictionary. I suppose you already instantiate your mapboxView and added to your viewController (very much like MapBox's Heatmap sample ), so here is how you may instantiate your MGLShapeSource.

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

  guard let dict = geojson_dict else {
      return
  }

  var source : MGLShapeSource

  do {
    let json = try JSONSerialization.data(withJSONObject: dict[“data"], options: JSONSerialization.WritingOptions())
    let shape = try MGLShape(data: json, encoding: String.Encoding.utf8.rawValue)
    source = MGLShapeSource(identifier: dict[“city”], shape: shape, options: nil)
    mapView.style.addSource(source)

  } catch {

    // handle any exceptions here

  }

  // Continue defining your heat layer as on Mapbox sample
  …

}