GeoMap 地图

GeoMap 插件可以在地图的指定位置上渲染相应的数据点，例如根据国家编码、城市名以及坐标来渲染。

具体的国家编码、城市名，可以在这里查阅

​

在世界地图上渲染国家和城市

​

在中国地图上渲染城市

​

热力图类型

​

交互

你可以为地图上的点定义点击事件：

// map:  openlayer map <https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html>
// setVariable: (varName:string, varValue:string) => void 
// navigate: react-router-dom -> useNavigate() -> navigate 
// setDateTime: (from: Timestamp, to: TimeStamp) => void

function onClick(data, map, navigate, setVariable, setDateTime, $variables) {
    // You can get all current variables in this way
    const coords = data[0].getGeometry().flatCoordinates
    const view = map.getView()
    view.setCenter(coords)
    view.setZoom(10)
}

有了如上交互事件后，点击地图上的点将自动以该点为中心，并进行缩放聚焦: 例如你点击中国的杭州：

​

阈值 Thresholds

当数据点的值大于给定阈值时，该数据点将被渲染为指定的颜色：

​

数据格式

在开始之前，你应该先阅读 这篇文档 并且需要了解什么是 最终数据格式。

如果你想在地图上渲染数据点，你必须了解 Geomap 需要什么样的数据格式，然后你可以将传入的数据转换为所需的格式。

选择 TestData 数据源和 Geomap 图表类型，然后打开 Panel Debug -> Panel Data，我们可以看到 Geomap 需要的如下最终数据格式：

[
  [
    {
      "name": "US",
      "fields": [
        {
          "name": "Time",
          "type": "time",
          "values": [
            1690416000000,
            1690502400000,
            1690588800000
          ]
        },
        {
          "name": "Value",
          "type": "number",
          "values": [
            27379,
            22114,
            23268
          ]
        }
      ]
    },
    {
      "name": "Shanghai",
      "fields": [
        {
          "name": "Time",
          "type": "time",
          "values": [
            1690416000000,
            1690502400000,
            1690588800000
          ]
        },
        {
          "name": "Value",
          "type": "number",
          "values": [
            39,
            22,
            16
          ]
        }
      ]
    },
    {
      "name": "Bei_jing",
      "fields": [
        {
          "name": "Time",
          "type": "time",
          "values": [
            1690416000000,
            1690502400000,
            1690588800000
          ]
        },
        {
          "name": "Value",
          "type": "number",
          "values": [
            4,
            1,
            4
          ]
        },
        {
          "name": "Geo",
          "type": "geo",
          "values": [
            116.4,
            39.9
          ]
        }
      ]
    }
  ]
]

这里包含了三个地图上的数据点： US 是 United States 的国家编码，Shanghai 是中国的一个城市名，Bei_jing 也是中国的一个城市名。

其中 Shanghai 和 Bei_jing 的区别在于后者包含了一个坐标字段：

{
    "name": "Geo",
    "type": "geo",
    "values": [
        116.4, // longitude
        39.9 // latitude
    ]
}

而前者仅仅是一个 name 索引。总之，三个点分别代表了三种坐标索引类型：

1. 国家编码 US，坐标索引定义在 countries.json
2. 城市名称 Shanghai, 坐标索引定义在 cities.json
3. 通过 “type”:“geo”类型的字段传递的具体坐标

xObserve 在通过索引查询坐标时，具体的顺序是：先通过国家编码查询，如果没有找到则通过城市名称查询，如果还是没有找到则通过坐标查询。

事实上， 数据点的Time 字段是从未被使用的，它仅仅是因为 Geomap 的数据格式和 Graph 以及 Table 的数据格式是一样的，都是 SeriesData 格式。

因此如果你是从某个 HTTP API 查询，或者自行转换数据格式为 Geomap 的格式，可以直接忽略 Time 字段：

{
    "name": "US",
    "fields": [
        {
            "name": "Value",
            "type": "number",
            "values": [
                27379,
            ]
        }
    ]
},

上面的格式是一个数据点非常标准的格式，大家可以参考下。