自定义非地球地图,使用LiveCharts与 GeoJSON

前端开发 2026-07-07

我正在尝试将Livecharts与 Avalonia结合使用,以显示一个自定义地图(平面上的六边形网格),然后根据数据为区域着色。基本上我想要地图图表的全部功能,但不是在地球地图上,而是一个六边形地图。

相当多的GeoJSON编辑器我发现总是允许你在地球上绘制形状。我一直没法确定是否可以绘制自定义地图,还是说它总是必须是地球的地图。

如何将一个六边形网格加载到Avalonia的 GeoMapChart中,而不在下面显示地球地图?

解决方案

我设法让它工作了。你可以有一个自定义地图,它是一个符合上面 此处 描述的GeoJSON文件,里面只有一个要素集合。该集合中的要素将是地图上的每一个六边形。我正在生成这些文件,但这里有一个包含3 个六边形的示例:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "Hex_A", "shortName": "A", "setOf": "A"},
      "id": "A",
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[[0, 10.0], [8.66, 5.0], [8.66, -5.0], [0.0, -10.0], [-8.66, -5.0], [-8.66, 5.0], [0.0, 10.0]]]]
      }
    },
    {
      "type": "Feature",
      "properties": { "name": "Hex_B", "shortName": "B", "setOf": "A"},
      "id": "B",
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[[8.66, 25.0], [17.32, 20.0], [17.32, 10.0], [8.66, 5.0], [0.0, 10.0], [0.0, 20.0], [8.66, 25.0]]]]
      }
    },
    {
      "type": "Feature",
      "properties": { "name": "Hex_C", "shortName": "C", "setOf": "A"},
      "id": "C",
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[[17.32, 10.0], [25.98, 5.0], [25.98, -5.0], [17.32, -10.0], [8.66, -5.0], [8.66, 5.0], [17.32, 10.0]]]]
      }
    }
  ]
}

现在,我还不太确定 setOf 做什么,它似乎通过把它设置为所有内容的同一值也能正常工作。

在我的C#文件(我是在视图模型中处理)中,我通过

[ObservableProperty]
public DrawnMap _customHexMap = Maps.GetMapFromDirectory("/path/to/hexgrid.json");

获取地图,并将一个可观察变量设置为它。C#这部分的其余部分与地图控件的文档完全一致,链接为 地图控件文档,其中Name属性就是先前设置的 shortName(不是ID)。

最后,在XAML中,我使用如下代码

<lvc:GeoMap Series="{Binding Series}" ActiveMap="{Binding HexMap}"></lvc:GeoMap>

如果它不是那里唯一的元素并且位于一个堆叠面板中,我还需要像平时那样设置宽度和高度。绑定系列与文档中的做法相同,但我还需要绑定活动地图。

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章