1

我想在地图下方显示不同的视图（例如一些动画），并且需要为此使地图部分透明。如何使用 CARTO Mobile SDK 做到这一点？

4

1 回答 1

0

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

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

  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 的航海者风格可在此处获得。

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

水电.mss：

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

样式.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 呈现时看到以下内容：

在此处输入图像描述

于 2018-01-18T11:21:23.877 回答