如何使用CARTO mobile SDK制作透明的地图背景

Question

我想在地图下方显示不同的视图（例如某些动画），并且需要使地图部分透明。如何使用CARTO Mobile SDK执行此操作？

Answer 1

好的，谢谢你的提问，这实际上不是最琐碎的任务。

详细信息取决于您希望透明的地图部分。我们假设您希望海域透明。从本质上讲，您有四个不同的级别需要透明：

1. 底图的水层
2. 底图的地面颜色（技术上映射背景颜色）
3. GLView的背景颜色
4. MapView的背景位图

我的示例代码段在Swift中，但应该可以轻松转换为其他语言。

在Carto的Mobile SDK中，土地实际上是覆盖整个地图的纯色背景颜色，水作为蓝色（或深色）彩色多边形放置在其上面。因此，如果您希望使水层透明，您还需要使地图背景透明，但这也会创建透明的土地。为了避免这种情况，你需要用一些多边形“着色”土地边;普通矢量图块没有土地覆盖，但是我们在mapbox帐户中创建了特殊图块集，可以用作VectorTileLayer：

    // Purple land for visibility. You probably want to keep it white
    let css = "#land-polygons { polygon-fill: #826DBA; polygon-opacity: 1.0;}"
    // Load the land layer (polygons) from a tileset in MapBox
    let url = "https://a.tiles.mapbox.com/v4/jaakl.landpolygons-mz12/{z}/{x}/{y}.vector.pbf?access_token=YOUR_MAPBOX_TOKEN"

    let baseSource = NTHTTPTileDataSource(minZoom: 0, maxZoom: 12, baseURL: url)

    let baseDecoder = NTMBVectorTileDecoder(cartoCSSStyleSet: NTCartoCSSStyleSet(cartoCSS: css))
    let baseLayer = NTVectorTileLayer(dataSource: baseSource, decoder: baseDecoder)

    contentView!.mapView?.getLayers().add(baseLayer)

现在您的土地面积已变色，您将添加另一个具有真实底图的图层。为此，我们需要一个自定义的底图样式 - 透明的水/海 - 并将其与您的应用程序捆绑在一起。 Carto的旅行者风格可用here。

解压缩它，并在以下文件中进行以下更改：

<强> hydro.mss ：

@water: transparent;// desaturate(#A0DBE6,26%);
@water_shadow: transparent; // rgb(210,234,237);

<强> style.mss ：

Map {
  background-color: transparent;

压缩文件（确保zip中没有文件夹，否则SDK将找不到任何文件）并将新样式添加到assets文件夹（如果是Android）或任何地方（如果是iOS）。

现在您可以从以下资产文件中加载您的样式：

    let baseDecoder = NTMBVectorTileDecoder(cartoCSSStyleSet: NTCartoCSSStyleSet(cartoCSS: css))
    let baseLayer = NTVectorTileLayer(dataSource: baseSource, decoder: baseDecoder)
    contentView!.mapView?.getLayers().add(baseLayer)

    let data = NTAssetUtils.loadAsset("cartostyles-custom.zip")
    let package = NTZippedAssetPackage(zip: data)
    let styleSet = NTCompiledStyleSet(assetPackage: package)

    let source = NTCartoOnlineTileDataSource(source: "carto.streets")
    let decoder = NTMBVectorTileDecoder(compiledStyleSet: styleSet)

    let layer = NTVectorTileLayer(dataSource: source, decoder: decoder)
    contentView!.mapView!.getLayers().add(layer)

然后将GlView的背景设置为透明，并将mapview背景位图设置为null，您就可以开始了：

    // Set clear background for our GLView
    mapView?.backgroundColor = UIColor.clear

    // Ensure that there's no background bitmap
    mapView?.getOptions().setBackgroundBitmap(nil)

当您开发Android时，您还需要为透明的NTMapView背景添加以下两行以正确渲染，否则它将保持黑色：

mapView.setZOrderOnTop(true);
mapView.getHolder().setFormat(PixelFormat.RGBA_8888);

这里我将父视图背景设置为红色。现在，当MapView呈现时，我看到以下内容：