Vega中的Vega简单地理点

Question

我试着理解Vega是如何通过与Kibana整合的方式来进行实验的。(使用6.3)。

首先，我想了解事物是如何工作的，首先要在地图上显示简单的地理点。我的最终目标是能够绘制形状和地质点。

我正在使用Kibana提供的build图形工具。

数据看起来像

{
  "_index": "myindex",
  "_type": "mytype",
  "_id": "some_data_id",
  "_version": 1,
  "_score": null,
  "_source": {
    // other fields ...
    "location": {
      "geoPosition": {
        "lon": -120.40713879154383,
        "lat": 34.930076722390865
      },
      "country": "country_name",
      "geoArea": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -120.4093517762316,
              34.92910658338185
            ],
            [
              -120.4049810371925,
              34.92909830256884
            ],
            [
              -120.4049258068561,
              34.93102254256107
            ],
            [
              -120.40934245466,
              34.9310551422129
            ],
            [
              -120.4093517762316,
              34.92910658338185
            ]
          ]
        ]
      }
    }
    // other fields ...
  }
}

我可怜的尝试

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json"
  "config": {
    "kibana": { "type": "map", "delayRepaint": false }
  }
  "data": [ 
    {
      "name": "points"
      "url": {
        "index": "myindex"
        "body": {
          "_source": ["location"]
          "query": {
            "match_all": {}
          }
        }
      }
      "format": { "type": "json", "property": "hits.hits" }
    }
  ]
  "transform": {
    "type": "geopoint"
    "fields": ["geoPosition.lat", "geoPosition.lon"]
  }
  "marks": [
    {
      "type": "symbol"
      "from": { data: "points" }
      "encode": {
        "update":{
          "x": { "field": "x" }
          "y": { "field": "y" }
        }
      }
    }
  ]
}

电流结果

• 列表项目
• 地图显示正确
• 点似乎显示，但在(0，0)我想-看左上角，蓝色的点应该是点。

​

我的附加问题

• 我不知道如何正确地使用Vega调试。我看过VEGA_DEBUG.view.getState()、VEGA_DEBUG.view._runtime和VEGA_DEBUG.view.data('points')，但无法正确理解数据流。在哪里可以看到转换输出来验证它是“透明的”？基本上这个问题可以是how would you have debugged this simple issue

Answer 1

哇这是个老问题..。织女星/弹力是超级无人支持的，所以很遗憾没人能早点做到这一点。

缺少的步骤是将lat/lon转换为(x，y)协调的步骤，Vega可以用于地图。

本节：

"transform": {
    "type": "geopoint"
    "fields": ["geoPosition.lat", "geoPosition.lon"]
}

应该是这样的：

transform: [
    {
      from: points              // The name of your data object
      type: geopoint
      projection: projection
      fields: ["geoPosition.lat", "geoPosition.lon"]
    }
    {
      type: "formula", expr: "[datum.x, datum.y]", as: "center"
    }
    {
      type: "formula", expr: "{x:datum.center[0], y:datum.center[1]}", as: "centerDict"
    }
]

这将给您一个centerDict对象，它表示织女星将正确映射的x，y对象。它还将添加point.x和point.y，它们分别表示x和y值。

一旦你有了，你就能做到

"marks": [
    {
      "type": "symbol"
      "from": { data: "points" }
      "encode": {
        "update":{
          "x": "datum.x"
          "y": "datum.y"
        }
      }
    }
  ]

我还没有用您的数据测试过这一点，但是我有类似的东西，所以应该可以工作。

祝好运!