如何使用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)

現在，您的陸地區域已着色，您將添加具有真實底圖的另一層。 為此，我們需要定制的底圖樣式-具有透明的水/海-並將其與您的應用捆綁在一起。 卡托的航海風格，請點擊這里 。

解壓縮它，並在以下文件中進行以下更改：

水力發電 ：

@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呈現時，我看到以下內容：