如何从 google 热图中删除绿色边框？

Question

如何从 android google 热图中删除边框颜色？我正在使用这段代码来绘制：

fun drawPolygons(polygons: Array<NetworkMapPolygonModel>, scale: Float) {
        map?.let { map ->
            val points = ArrayList<WeightedLatLng>()
            polygons.forEach {
                val intensity = ((it.signalStrength - 12) * -1).toDouble()

                points.add(WeightedLatLng(
                    LatLng(it.aLatitude, it.aLongitude), intensity
                ))
            }
            
            val radius = 40
            val provider = HeatmapTileProvider.Builder()
                .weightedData(points)
                .radius(radius)
                .maxIntensity(48.0)
                .build()

            map.addTileOverlay(TileOverlayOptions().tileProvider(provider))
        }
    }

但是 google 地图绘制了我这张地图：

我想去掉外绿色边框（截图中的红色方块）。但找不到如何做到这一点。请帮忙！

Answer 1

为了简单地消除绿色（以及数据的表示），使用 HeatmapFileProvider.Builder 的梯度属性将初始颜色从绿色（默认）更改为黄色并更改起始阈值从对应于绿色（0.2 默认值）的阈值到大约 (0.4)（您必须试验这个数字 - 在这个答案的底部，我展示了如何确定它，它是 0.454）。而不是从透明渐变 fade-in 我将展示如何以所需的颜色开始完全不透明。

在深入修改之前，了解有一个未指定的默认渐变，它是这样的：

// Create the gradient.
val colors = intArrayOf(
     Color.rgb(120, 225, 0),  // green
    Color.rgb(255, 0, 0) // red
)
val startPoints = floatArrayOf(0.2f, 1f)
val gradient = Gradient(colors, startPoints)

// Create the tile provider.
val provider = HeatmapTileProvider.Builder()
    .data(latLngs)
    .gradient(gradient)
    .build()

下面修改colors数组和startPoints来演示每次调整的点。所以在这个片段中，它显示消除绿色但从透明过渡到黄色（不是你要找的，只是一个例子）。

// Create the gradient.
val colors = intArrayOf(
     Color.rgb(255, 225, 0),  // yellow
    Color.rgb(255, 0, 0) // red
)
val startPoints = floatArrayOf(0.4f, 1f)
val gradient = Gradient(colors, startPoints)

在这个回答中，我使用了我自己的数据来代表萨克门托的犯罪统计数据。您很快就会明白为什么绿色是边缘数据的好选择。

渐变属性由两个控件组成：

颜色
起点（0.0 到 1.0）

默认颜色为 (GREEN,RED)，起点为 (0.2, 1.0)。需要注意的一点是，如果第一个起点是 non-zero（默认情况下），则从 pts 0.0 到 0.2 的渐变从透明过渡到颜色；否则它从 pt 0.0 处的第一种颜色开始。

图像 (A) 是我的数据的默认设置。

然后我想看看绿色实际从哪里开始 (0.2)，而没有从透明过渡到绿色 (0.0 - 0.2)。为此，我将渐变修改为透明，直到接近 2.0 - 然后引入从 close-to-2.0 到 2.0 的边框（黑色），其余为默认值。

// Create the gradient.

val colors = intArrayOf(
     Color.argb(0, 0, 0, 0),  // transparent
     Color.argb(0, 0, 0, 0),  // transparent
     Color.rgb(0, 0, 0),      // black
     Color.rgb(120, 255, 0),    // green
     Color.rgb(255, 0, 0)    // red
)
val startPoints = floatArrayOf(0.0f, 0.15f, 0.18f, 0.2f, 1f)
val gradient = Gradient(colors, startPoints)

图片 (B) 是添加此“边框”以显示纯绿色数据 (2.0+) 开始的位置：

现在来解决删除绿色的问题。默认插值总结如下：0 - 0.2f（透明到绿色）和 0.2f - 1.0f（绿色到红色）。所以在某处有插值黄色。对于这个答案，一个近似值是黄色大约是 0.4（但我会跟进一个计算来展示如何计算出来）。我再次添加边框以准确显示黄色 (0.4) 的起始位置：

// Create the gradient.
val colors = intArrayOf(
     Color.argb(0, 0, 0, 0),  // transparent
     Color.argb(0, 0, 0, 0),  // transparent
     Color.rgb(0, 0, 0),      // black
     Color.rgb(255, 255, 0),    // yellow
     Color.rgb(255, 0, 0)    // red
)
val startPoints = floatArrayOf(0.0f, 0.35f, 0.38f, 0.4f, 1f)
val gradient = Gradient(colors, startPoints)

这个答案演示了如何控制颜色结果；我无法回答的更相关的问题是你想传达什么信息：消除“绿色”就是消除数据，而使用默认起点将数据转换为从黄色数据过渡不会消除数据，只会消除绿色。（我没有 post 这方面的例子，但值得考虑。）

(一)

(乙)

(C)

答案的下一部分着重于颜色；希望不要离题太远。

同样，在默认渐变中指定了 2 个百分位数 (0.2, 1.0) 和一个隐含的从 0.0 开始的百分位数。同样，这三个的颜色是：（0x0078E100（完全透明的绿色（120,225,0）），0xFF78E100（不透明的绿色），0xFFFF0000（不透明的红色）。

在 OP 中，问题是关于颜色（“删除绿色边框”）的问题，这导致必须做出假设：删除应该停止到什么点。我选择假设黄色 - 但由于颜色代表数据的百分位数，所以问题应该用百分位数来表述才能准确。）但是根据颜色查看数据表示会出现一个问题：黄色的数据百分位数在哪里给定默认梯度。

因此，为了帮助讨论，我创建了一个简单的 TileProvider，其目的是在渲染的每个图块中显示颜色渐变。这是一个示例：

这张图片在顶部和底部显示了一个完整的图块和两个部分图块；所以这里把重点放在中间的一个完整的瓷砖上。

一些关键点：(1) 图块从完全透明（数据百分位数 0.0）开始，过渡到默认渐变中的第一种颜色，此时绘制一条黑色线段，代表第 20 个百分位数。从那里开始，图块从绿色过渡到默认渐变（红色）中的第二种颜色，代表第 100 个百分位数。沿途为“最接近”“黄色”的渐变颜色绘制第二条黑色线段。

为了发现最接近黄色的数据百分位数，需要了解如何创建渐变。简而言之，将提供的颜色的 RGB 值中每个颜色段的端点 () 转换为 HSV 值。根据这些 HSL 值，起点和终点之间的比率应用 HSV 值，然后转换回 RGB。

一旦确定了渐变段内的 RGB 颜色，它就会计算到目标（“tgt”）颜色（黄色）的“距离”，并找到最小距离：

int deltaR = Color.red(tgt) - Color.red(ic);
int deltaG = Color.green(tgt) - Color.green(ic);
int deltaB = Color.blue(tgt) - Color.blue(ic);
double d = Math.sqrt(deltaR*0.3F*deltaR*0.3F + deltaG*0.59F*deltaG*0.59F + deltaB*0.11*deltaB*0.11);

事实证明，最接近黄色的数据百分位数是 45.4%。所以上图 (3) 中显示的数据代表了数据的上层 54.6%。

此处供参考的是所用 TileProvider 的实现。 mColors数组是热力图默认生成的1000个元素颜色图：

private class MyTileProvider implements TileProvider {

    public MyTileProvider() {
    }

    @Override
    public Tile getTile(int x, int y, int zoom) {

        Bitmap tile = Bitmap.createBitmap(512,512,Bitmap.Config.ARGB_8888);
        tile.setPixels(mColors,0,Math.max(512,mPixelsPerColor),0,0,512,512);

        Log.d(TAG,"Tile gen done: "+x+","+y+" "+zoom);
        return convertBitmap(tile);
    }
}

有关梯度和热图的参考，请使用此答案：

计算“色距”参考：

参考地图实用程序热图实现（andoid-maps-utils 存储库中的子目录）：https://github.com/googlemaps/android-maps-utils/tree/ac9684d627905587b020a0eac301e94478804a48/library/src/main/java/com/google/maps/android/heatmaps

如何从 google 热图中删除绿色边框？

How to remove green border from google heatmap?

android

google-maps

heatmap

(一)

(乙)

(C)