谷歌maps菜单语言设置_使用Android版Google Maps构建热图

Heat maps are a popular way to represent data where each entity is associated with some intensity or magnitude. This article serves as a guide to making heat maps for spatial data using Google Maps for Android.

热图是一种流行的表示数据的方式，其中每个实体都与某个强度或大小相关联。 本文是使用Android版Google Maps制作空间数据热图的指南。

Note: This blog expects you to know how to setup Google Maps in Android. If you are not aware of the same, check out the official guide by Google. This article uses Kotlin language for all Android code.

注意：此博客希望您知道如何在Android中设置Google Maps。 如果您不清楚， 请查看Google的官方指南 。 本文将Kotlin语言用于所有Android代码。

Source code of this project is available on my GitHub.

该项目的源代码 可在我的GitHub上找到 。

什么是热图？ (What is a heat map?)

Heat maps are way of representing data having some magnitude using colors, and are quite popular in showing spatial data.

热图是使用颜色表示某种程度的数据的方式，并且在显示空间数据时非常流行。

了解数据结构 (Understanding the data structure)

In order to show as a heat map, the data is stored as a collection of objects having a latitude, longitude and intensity value. The easiest way to do this is to store them as a JSON array of objects each having latitude, longitude and intensity fields. An example is given below.

为了显示为热图，将数据存储为具有纬度，经度和强度值的对象的集合。 最简单的方法是将它们存储为对象的JSON数组，每个对象都有纬度，经度和强度字段。 下面给出一个例子。

[
    {
        "intensity": 213.0,
        "lat": 14.68365,
        "lon": 77.58146
    }, 
    {
        "intensity": 275.0,
        "lat": 13.20588,
        "lon": 79.08805
    }, 
    {
        "intensity": 477.0,
        "lat": 16.96423,
        "lon": 82.23792
    }
]

使用Google Maps构建热图 (Building heatmaps using Google Maps)

For the sake this article, we will be showing a heat map of district-wise population density of India, represented as the number of people per square kilometre. I have already compiled the data as a JSON file, which we will be using later on to load our heatmap data. You can get a copy of the JSON file here.

为了本文方便起见，我们将显示一个印度地区人口密度的热图，以每平方公里的人数表示。 我已经将数据编译为JSON文件，稍后将用于加载热图数据。 您可以在此处获取JSON文件的副本。

While the basic Google Maps SDK does not contain any heat map utilities, Google has provided an extension library, called the Google Maps Utility Library, which adds complex features to your existing Google Maps setup.

尽管基本的Google Maps SDK不包含任何热图实用程序，但Google提供了一个扩展库，称为Google Maps Utility Library，该库向您现有的Google Maps设置中添加了复杂的功能。

添加依赖项 (Add dependencies)

Add the following gradle dependencies in your app module build.gradle. You might already have the Google Maps dependency added while you were setting up Google Maps in your project.

在您的应用程序模块build.gradle中添加以下gradle依赖项。 在项目中设置Google Maps时，可能已经添加了Google Maps依赖项。

implementation 'com.google.maps.android:android-maps-utils:1.0.2'
implementation 'com.google.android.gms:play-services-maps:17.0.0'

从资产加载热图数据 (Load heatmap data from assets)

In real life projects, spatial data is usually fetched from the server in real time. However, to reduce complexity for the sake of this example, we’ll be loading the data from a local JSON file.

在现实生活中的项目中，空间数据通常是从服务器实时获取的。 但是，为了减少复杂性，我们将从本地JSON文件加载数据。

In case you missed it, you can download the JSON file here.

如果您错过了它，可以在 此处 下载JSON文件 。

First, let’s set up our assets folder. Switch to Project view and in the app > src > main directory create a new directory called assets. Paste the downloaded JSON file in this assets folder.

首先，让我们设置assets文件夹。 切换到“项目”视图，然后在app > src > main目录中创建一个新的目录，称为assets 。 将下载的JSON文件粘贴到此资产文件夹中。

With the file in place, we’ll now read the file contents in our Android code. Our JSON file contains an array of objects, each having the following structure:

放置好文件后，我们现在将在Android代码中读取文件内容。 我们的JSON文件包含一个对象数组，每个对象都具有以下结构：

{
    "density": 123.4,
    "lat": 18.5544,
    "lon": 76.3324
}

In MainActivity, we’ll create a function called getJsonDataFromAsset which will read the file and retrieve its contents as a JSON array.

在MainActivity ，我们将创建一个名为getJsonDataFromAsset的函数，该函数将读取文件并以JSON数组的形式检索其内容。

private fun getJsonDataFromAsset(fileName: String): JSONArray? {
        try {
            val jsonString = assets.open(fileName).bufferedReader().use { it.readText() }
            return JSONArray(jsonString)
        } catch (e: Exception) {
            e.printStackTrace()
            return null
        }
}

显示热图 (Displaying the heatmap)

So far, we have our data as a JSON array. Great! But how do we use it? This is where Google Maps Utility library comes into the picture. The library has components that enable us to easily make heatmaps. One of them is the WeightedLatLng class, which can store latitude, longitude and the weight (intensity).

到目前为止，我们将数据作为JSON数组。 大！ 但是我们如何使用它呢？ 这是Google Maps Utility库出现的地方。 该库具有使我们能够轻松制作热图的组件。 其中之一是WeightedLatLng类，它可以存储纬度，经度和权重(强度)。

The Google Maps heat map overlay will expect an ArrayList of WeightedLatLng objects, so let’s generate one from our JSON data. We’ll write a function called getHeatMapData which will parse our JSON array and return us an ArrayList of WeightedLatLng objects.

Google Maps热图叠加层将期望一个WeightedLatLng对象的ArrayList ，因此让我们从JSON数据中生成一个。 我们将编写一个名为getHeatMapData的函数，该函数将解析我们的JSON数组并返回一个WeightedLatLng对象的ArrayList 。

private fun generateHeatMapData(): ArrayList<WeightedLatLng> {
        val data = ArrayList<WeightedLatLng>()        // call our function which gets json data from our asset file
        val jsonData = getJsonDataFromAsset("district_data.json")        // ensure null safety with let call
        jsonData?.let {
            // loop over each json object
            for (i in 0 until it.length()) {
                // parse each json object
                val entry = it.getJSONObject(i)
                val lat = entry.getDouble("lat")
                val lon = entry.getDouble("lon")
                val density = entry.getDouble("density")                // optional: remove edge cases like 0 population density values
                if (density != 0.0) {
                    val weightedLatLng = WeightedLatLng(LatLng(lat, lon), density)
                    data.add(weightedLatLng)
                }
            }
        }        return data
}

Now, in the overridden onMapReady function, we can write our code to generate our heat map. Let’s first generate our data by calling the generateHeatMapData function as follows.

现在，在重写的onMapReady函数中，我们可以编写代码以生成我们的热图。 首先，我们通过如下调用generateHeatMapData函数来生成数据。

val data = generateHeatMapData()

After that, we’ll be creating a HeatMapTileProvider object using its builder.

之后，我们将使用其生成器创建HeatMapTileProvider对象。

val heatMapProvider = HeatmapTileProvider.Builder()
            .weightedData(data) // load our weighted data 
            .radius(50) // optional, in pixels, can be anything between 20 and 50
            .build()

Finally, we’ll center Google Map over India (i.e. wherever our data is) so that we are able to see the heatmap.

最后，我们将Google Map(印度)放在整个印度的中心(即我们的数据在哪里)，以便我们可以查看热图。

val indiaLatLng = LatLng(20.5937, 78.9629)
googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(indiaLatLng, 5f))

That’s it! Here’s the entirety of onMapReady function for your reference.

而已！ 这是完整的onMapReady函数供您参考。

override fun onMapReady(googleMap: GoogleMap?) {
    val data = generateHeatMapData()    val heatMapProvider = HeatmapTileProvider.Builder()
        .weightedData(data) // load our weighted data 
        .radius(50) // optional, in pixels, can be anything between 20 and 50
        .build()    googleMap?.addTileOverlay(TileOverlayOptions().tileProvider(heatMapProvider))    val indiaLatLng = LatLng(20.5937, 78.9629)
    googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(indiaLatLng, 5f))
}

Let’s run the project and see how our map looks.

让我们运行该项目，看看地图的外观。

That worked! But hey, why is the map so empty? Weren’t you expecting the map to light up? After all, India’s population density is one of the highest in the world!

可行！ 但是，为什么地图这么空？ 您是否不希望地图点亮？ 毕竟，印度的人口密度是世界上最高的国家之一！

Well, here’s what happened. In places like Delhi, the population density goes to a whopping 36000 per square kilometer. Now consider a city like Bangalore which has a density of 4300 according to our data — although 4300 is a large value, it is nothing as compared to the density in Delhi. In other words, the relatively large value is shadowed by a gigantic other, and is hence considered a small value by the heat map utility when plotting on the map.

好吧，这就是发生的事情。 在德里这样的地方，人口密度高达每平方公里36000。 现在考虑像班加罗尔这样的城市，根据我们的数据，该城市的密度为4300 —尽管4300是一个很大的值，但与德里的密度相比，这算什么。 换句话说，相对较大的值被巨大的其他阴影遮盖，因此在绘制地图时，热图实用程序将其视为较小的值。

To overcome this, we have the ability to set a maximum intensity for the heat map when creating the heat map tile provider.

为了克服这个问题，我们可以在创建热图图块提供程序时为热图设置最大强度。

val heatMapProvider = HeatmapTileProvider.Builder()
    .weightedData(data) // load our weighted data
    .radius(50) // optional, in pixels, can be anything between 20 and 50
    .maxIntensity(1000.0) // set the maximum intensity
    .build()

Here, setting the maximum intensity overrides the global maximum, i.e. the highest intensity value in our data set, and sets it to whatever value we pass. Let’s try running our project again.

在这里，设置最大强度会覆盖全局最大值，即数据集中的最高强度值，并将其设置为我们通过的任何值。 让我们尝试再次运行我们的项目。

This seems perfect, doesn’t it? Congratulations, you just built your first heat map on Android!

这看起来很完美，不是吗？ 恭喜，您刚刚在Android上建立了第一个热图！

自定义热图 (Customizing the Heatmap)

You can style your heat map according to your requirements.

您可以根据需要设置热图样式。

You can change the display colors by passing a Gradient to the tile provider builder.

您可以通过将“ Gradient传递给图块提供程序构建器来更改显示颜色。

// Create the gradient with whatever start and end colors you wish to use
int[] colors = {Color.GREEN, Color.parseColor("#FF0000")};
float[] startPoints = {0.2f, 1f};
Gradient gradient = new Gradient(colors, startPoints);val heatMapProvider = HeatmapTileProvider.Builder()
    .weightedData(data)
    .radius(50)
    .maxIntensity(1000.0)
    .gradient(gradient) // set gradient
    .build()

You can also change the opacity of your heat map layer by passing in a value between 0 and 1 to the tile provider builder. This can be particularly helpful if you wish the map in the background to be legible in dark colors.

您还可以通过将0到1之间的值传递给图块提供程序构建器来更改热图图层的不透明度。 如果您希望背景中的地图以深色清晰可见，这将特别有用。

val heatMapProvider = HeatmapTileProvider.Builder()
    .weightedData(data)
    .opacity(0.5) // set opacity, default is 0.7
    .build()

总结思想 (Closing Thoughts)

Heat maps can be particularly useful if you wish to represent spatial data having some intensity associated with it. Hopefully this article proves to be the stepping stone for you if you are looking for a career in cartography in mobile applications. As always, I’ll be glad to answer all your questions in the comments section. Keep coding!

如果要表示具有一定强度的空间数据，热图可能特别有用。 如果您正在寻找移动应用制图中的职业，希望这篇文章对您来说是垫脚石。 与往常一样，我很乐意在评论部分回答您的所有问题。 继续编码！