问题
Goal
I need to add some aeronautical layers taken from FAA to the map. The layers are provided as GeoTIFF files.
Steps
- Downloaded a GeoTiff file from FAA website.
- Using QGis app clipped the legend from the file. Actually the issue occurs without this step as well.
- Reprojected it to
EPSG:3857using GDAL commandgdalwarp -q -t_srs EPSG:3857 -dstalpha -of vrt Albuquerque\ SEC\ 104-cut.tif /vsistdout/ | gdal_translate -co compress=lzw /vsistdin/ Albuquerque\ SEC\ 104-north-up-cut.tif. Otherwise I gotError creating Mapnik Datasource: Invalid raster: Invalid rotation value in geotransform arraywhen uploading to Mapbox. - Created a Tileset by uploading GeoTIFFs to Mapbox.
- Created a new style in the Mapbox Studio.
- Added the tilesets as layers.
Mapbox Studio Result
The map is showing well in Mapbox Studio:
Android Result
However in Android app this style shows with some black borders of random width depending on zoom level and camera position. Here is how it looks in android:
I tried it on Pixel 3a (Android 10), Nexus 5x (Android 8.1) and Android emulator (Android 10). I have good internet connection and gave it enough time so the tiles are loaded.
The source code where the map is embedded is official Demo app. I just replaced token and style URL:
mapView.getMapAsync(new OnMapReadyCallback() {
@Override
public void onMapReady(@NonNull MapboxMap mapboxMap) {
DefaultStyleActivity.this.mapboxMap = mapboxMap;
mapboxMap.setStyle("mapbox://styles/rustamg/ck8se724l23bh1io2b1hnbqls");
}
});
Here is GDALInfo for the GEOTiff I uploaded:
Driver: GTiff/GeoTIFF
Files: /Users/me/Desktop/Dev/Albuquerque SEC 104-north-up-cut.tif
Size is 16104, 11408
Coordinate System is:
PROJCS["WGS 84 / Pseudo-Mercator",
GEOGCS["WGS 84",
DATUM["WGS_1984",
SPHEROID["WGS 84",6378137,298.257223563,
AUTHORITY["EPSG","7030"]],
AUTHORITY["EPSG","6326"]],
PRIMEM["Greenwich",0,
AUTHORITY["EPSG","8901"]],
UNIT["degree",0.0174532925199433,
AUTHORITY["EPSG","9122"]],
AUTHORITY["EPSG","4326"]],
PROJECTION["Mercator_1SP"],
PARAMETER["central_meridian",0],
PARAMETER["scale_factor",1],
PARAMETER["false_easting",0],
PARAMETER["false_northing",0],
UNIT["metre",1,
AUTHORITY["EPSG","9001"]],
AXIS["X",EAST],
AXIS["Y",NORTH],
EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"],
AUTHORITY["EPSG","3857"]]
Origin = (-12154316.342745549976826,4340308.343459489755332)
Pixel Size = (51.194510520863538,-51.194510520863538)
Metadata:
AREA_OR_POINT=Area
TIFFTAG_DATETIME=2019:09:03 09:02:22
TIFFTAG_RESOLUTIONUNIT=2 (pixels/inch)
TIFFTAG_SOFTWARE=Adobe Photoshop CC (Windows)
TIFFTAG_XRESOLUTION=300
TIFFTAG_YRESOLUTION=300
Image Structure Metadata:
COMPRESSION=LZW
INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left (-12154316.343, 4340308.343) (109d11' 2.69"W, 36d17'16.43"N)
Lower Left (-12154316.343, 3756281.367) (109d11' 2.69"W, 31d56'47.16"N)
Upper Right (-11329879.945, 4340308.343) (101d46'40.96"W, 36d17'16.43"N)
Lower Right (-11329879.945, 3756281.367) (101d46'40.96"W, 31d56'47.16"N)
Center (-11742098.144, 4048294.855) (105d28'51.82"W, 34d 8'42.17"N)
Band 1 Block=16104x1 Type=Byte, ColorInterp=Palette
Mask Flags: PER_DATASET ALPHA
Color Table (RGB with 256 entries)
0: 255,255,255,255
1: 255,255,0,255
2: 255,0,255,255
3: 255,0,0,255
4: 0,255,255,255
5: 0,255,0,255
6: 0,0,255,255
7: 0,0,0,255
8: 252,252,254,255
9: 255,255,1,255
10: 252,236,170,255
11: 248,228,166,255
12: 228,200,154,255
13: 154,81,86,255
14: 120,103,105,255
15: 221,135,154,255
16: 166,87,106,255
17: 107,86,91,255
18: 172,104,124,255
19: 79,9,35,255
20: 141,59,88,255
21: 126,12,61,255
22: 229,107,161,255
23: 200,150,173,255
24: 234,178,204,255
25: 100,8,53,255
26: 200,81,137,255
27: 146,68,105,255
28: 136,38,88,255
29: 98,29,64,255
30: 190,113,151,255
31: 119,44,83,255
32: 214,182,199,255
33: 177,144,163,255
34: 116,13,75,255
35: 33,8,25,255
36: 143,116,141,255
37: 232,216,232,255
38: 248,232,248,255
39: 77,26,86,255
40: 75,69,104,255
41: 105,103,125,255
42: 40,36,105,255
43: 8,8,24,255
44: 232,232,248,255
45: 120,120,122,255
46: 8,14,85,255
47: 203,204,216,255
48: 60,62,80,255
49: 8,22,115,255
50: 86,88,104,255
51: 180,184,201,255
52: 8,54,179,255
53: 8,40,120,255
54: 28,56,120,255
55: 8,40,104,255
56: 143,152,171,255
57: 8,54,136,255
58: 37,47,65,255
59: 184,201,232,255
60: 25,72,152,255
61: 202,214,233,255
62: 31,56,95,255
63: 8,84,182,255
64: 8,72,158,255
65: 8,56,120,255
66: 9,42,86,255
67: 25,72,136,255
68: 37,88,152,255
69: 51,75,104,255
70: 11,100,202,255
71: 8,23,40,255
72: 27,72,120,255
73: 8,56,104,255
74: 44,88,133,255
75: 184,198,212,255
76: 80,84,88,255
77: 8,72,133,255
78: 22,104,178,255
79: 71,121,168,255
80: 91,134,173,255
81: 43,121,184,255
82: 80,113,140,255
83: 8,88,152,255
84: 24,88,136,255
85: 53,104,143,255
86: 8,88,136,255
87: 22,104,149,255
88: 114,144,162,255
89: 139,172,191,255
90: 104,124,134,255
91: 146,205,232,255
92: 136,197,216,255
93: 134,184,201,255
94: 153,200,216,255
95: 135,216,232,255
96: 85,105,109,255
97: 213,233,236,255
98: 152,195,200,255
99: 167,216,221,255
100: 181,232,237,255
101: 151,233,237,255
102: 8,24,24,255
103: 230,248,248,255
104: 182,183,183,255
105: 184,217,216,255
106: 120,136,134,255
107: 24,40,37,255
108: 174,207,200,255
109: 143,147,145,255
110: 225,248,232,255
111: 103,120,104,255
112: 8,24,8,255
113: 87,104,86,255
114: 212,232,210,255
115: 181,200,175,255
116: 163,171,158,255
117: 229,248,216,255
118: 198,216,184,255
119: 147,172,126,255
120: 231,248,200,255
121: 200,216,168,255
122: 216,232,178,255
123: 200,216,151,255
124: 232,248,184,255
125: 212,232,146,255
126: 232,248,167,255
127: 189,207,105,255
128: 199,200,152,255
129: 248,248,71,255
130: 24,24,8,255
131: 145,144,57,255
132: 248,248,104,255
133: 216,216,135,255
134: 248,248,168,255
135: 200,200,136,255
136: 216,216,152,255
137: 232,232,168,255
138: 248,248,184,255
139: 216,216,168,255
140: 232,232,184,255
141: 248,248,200,255
142: 200,200,168,255
143: 120,120,101,255
144: 232,232,200,255
145: 248,248,216,255
146: 216,216,193,255
147: 200,200,184,255
148: 232,232,216,255
149: 248,248,232,255
150: 170,168,56,255
151: 201,194,72,255
152: 179,174,78,255
153: 229,223,101,255
154: 214,205,88,255
155: 196,189,104,255
156: 232,218,133,255
157: 246,233,151,255
158: 42,40,29,255
159: 148,136,82,255
160: 200,184,120,255
161: 216,200,136,255
162: 232,216,152,255
163: 248,232,168,255
164: 165,152,104,255
165: 114,106,76,255
166: 182,173,141,255
167: 248,216,115,255
168: 183,168,119,255
169: 147,139,114,255
170: 200,168,72,255
171: 216,184,88,255
172: 200,184,136,255
173: 216,200,152,255
174: 232,216,168,255
175: 248,232,184,255
176: 228,184,72,255
177: 200,168,88,255
178: 216,184,104,255
179: 81,74,58,255
180: 248,188,71,255
181: 232,185,88,255
182: 248,199,101,255
183: 200,168,104,255
184: 216,184,120,255
185: 232,200,136,255
186: 248,216,152,255
187: 168,152,120,255
188: 200,184,152,255
189: 216,200,168,255
190: 232,216,184,255
191: 219,167,72,255
192: 178,144,82,255
193: 248,231,200,255
194: 184,136,56,255
195: 216,168,88,255
196: 232,185,104,255
197: 248,200,123,255
198: 220,150,49,255
199: 130,93,40,255
200: 200,152,84,255
201: 184,152,104,255
202: 200,168,120,255
203: 216,184,136,255
204: 232,200,152,255
205: 248,216,168,255
206: 179,119,36,255
207: 160,114,54,255
208: 216,168,104,255
209: 232,184,120,255
210: 200,137,56,255
211: 232,168,88,255
212: 61,53,43,255
213: 146,115,80,255
214: 216,168,120,255
215: 248,200,152,255
216: 168,136,104,255
217: 184,152,120,255
218: 200,168,136,255
219: 216,184,152,255
220: 232,200,168,255
221: 248,216,184,255
222: 216,200,184,255
223: 248,232,216,255
224: 110,87,68,255
225: 248,184,135,255
226: 170,151,137,255
227: 184,136,104,255
228: 200,152,120,255
229: 216,168,136,255
230: 232,184,150,255
231: 248,200,168,255
232: 171,114,77,255
233: 168,136,120,255
234: 232,200,184,255
235: 200,183,174,255
236: 232,164,134,255
237: 200,168,154,255
238: 248,167,139,255
239: 171,119,104,255
240: 216,168,154,255
241: 184,133,121,255
242: 140,117,111,255
243: 232,213,208,255
244: 201,148,137,255
245: 235,181,172,255
246: 216,138,126,255
247: 41,24,23,255
248: 24,8,8,255
249: 248,232,232,255
250: 201,200,200,255
251: 248,248,248,255
252: 232,232,232,255
253: 104,104,104,255
254: 24,24,24,255
255: 8,8,8,255
Band 2 Block=16104x1 Type=Byte, ColorInterp=Alpha
Question
How can I get rid of those black issues?
I'd be happy to provide more info if needed.
Update 2020-05-06
I tried what's suggested in troubleshooting page: both prepare tileset and create RasterSource within Android app. The first command rio calc "(asarray (take a 1) (take a 2) (take a 3))" --co compress=lzw --co tiled=true --co blockxsize=256 --co blockysize=256 --name a=filename.tif filename255.tif failed with an error:
IndexError: index 1 is out of bounds for size 1
However my tif already uses LZW compression. So I tried the second command:
rio edit-info --nodata 0 filename255.tif
and uploaded the result to Mapbox. The result was the same except that white background of the image became black as well:
I also tried the same steps with smaller image (409x306) as it's pointed here that Android has texture size limitation. The result is all the same:
回答1:
The black borders should be transparent, but the raster image format Mapbox is using (JPG) does not support transparency, which is a known issue that exists in every gl-native-based SDK. This issue presents itself when you reference a style that has the raster layer built in.
As a workaround, you can follow Mapbox's troubleshooting guide on troubleshooting raster images with black backgrounds to make your tileset transparent and then add the tileset as a RasterSource within your Android application to display the raster tile as expected.
Please take a look at the following example as a reference for adding a RasterSource:
- Add a WMS Source
Instead of calling the rasterSource using "mapbox://username.tilesetID", you need to call it similarly to the Add a WMS Source example. The code below will resolve your issue:
style.addSource(RasterSource( "albuquerque-source", TileSet( "tileset", "https://api.mapbox.com/v4/<username.tilesetID>/{z}/{x}/{y}.png?access_token=<your_access_token>" ), 256 ))
来源：https://stackoverflow.com/questions/61141793/mapbox-in-android-black-color-around-geotiff-raster-layers