php - 如何连接地图结构以将其可视化？
问题描述
我正在开发一个游戏，其中包含通过扭曲连接的地图（命名通道）。每个通道都有一个 ID (int)，每个 warp 有一个通道源 ID (int) 和一个通道目标 ID (int)。一个通道可以有无限数量的经线或根本没有经线。
我构建了一个管理应用程序（使用 Zend Expressive / php 和 HTML），它从 API 作为 JSON 获取频道数据。然后将此 JSON 解析为仅包含重要数据的简化类。
我试图以网格的形式可视化数据，以确定世界的边界。
我试图用 div 将其可视化，具有固定的大小和顺序。不幸的是，我不知道如何处理可变数量的邻居。在放置经线的地方有可用的坐标，但我想要一个更抽象的世界视图。我只希望每个通道都由一个固定大小的 2D 立方体（具有固定宽度和高度的 div）表示。
频道类
<?php
namespace App\Entity;
class Channel
{
protected $id;
protected $neighbourIds = [];
public function parseData(array $data)
{
$this->setId($data['id']);
foreach($data['warps'] as $warp) {
$this->addNeighbourId($warp['targetChannelId']);
}
}
/**
* @return mixed
*/
public function getId()
{
return $this->id;
}
/**
* @param mixed $id
*/
public function setId($id): void
{
$this->id = $id;
}
public function addNeighbourId($neighbourId)
{
$this->neighbourIds[] = $neighbourId;
}
/**
* @return mixed
*/
public function getNeighbourIds()
{
return $this->neighbourIds;
}
/**
* @param mixed $neighbours
*/
public function setNeighbours($neighbours): void
{
$this->neighbours = $neighbours;
}
}
通道中的样本数据作为 print_r 输出
Array
(
[0] => App\Entity\Channel Object
(
[id:protected] => 1
[neighbourIds:protected] => Array
(
[0] => 2
[1] => 4
[2] => 5
[3] => 121
)
)
[1] => App\Entity\Channel Object
(
[id:protected] => 4
[neighbourIds:protected] => Array
(
[0] => 1
)
)
[2] => App\Entity\Channel Object
(
[id:protected] => 5
[neighbourIds:protected] => Array
(
[0] => 1
)
)
[3] => App\Entity\Channel Object
(
[id:protected] => 2
[neighbourIds:protected] => Array
(
[0] => 1
[1] => 3
[2] => 133
[3] => 138
[4] => 152
[5] => 175
[6] => 176
)
)
[4] => App\Entity\Channel Object
(
[id:protected] => 3
[neighbourIds:protected] => Array
(
[0] => 2
[1] => 126
[2] => 132
[3] => 137
)
)
[5] => App\Entity\Channel Object
(
[id:protected] => 121
[neighbourIds:protected] => Array
(
[0] => 1
[1] => 122
[2] => 139
[3] => 144
)
)
[6] => App\Entity\Channel Object
(
[id:protected] => 122
[neighbourIds:protected] => Array
(
[0] => 121
[1] => 123
[2] => 140
[3] => 145
)
)
[7] => App\Entity\Channel Object
(
[id:protected] => 123
[neighbourIds:protected] => Array
(
[0] => 122
[1] => 124
[2] => 141
[3] => 146
)
)
[8] => App\Entity\Channel Object
(
[id:protected] => 124
[neighbourIds:protected] => Array
(
[0] => 123
[1] => 125
[2] => 142
[3] => 147
)
)
[9] => App\Entity\Channel Object
(
[id:protected] => 125
[neighbourIds:protected] => Array
(
[0] => 124
[1] => 143
[2] => 148
)
)
[10] => App\Entity\Channel Object
(
[id:protected] => 126
[neighbourIds:protected] => Array
(
[0] => 3
[1] => 127
[2] => 131
[3] => 136
)
)
[11] => App\Entity\Channel Object
(
[id:protected] => 127
[neighbourIds:protected] => Array
(
[0] => 126
[1] => 128
[2] => 130
[3] => 135
)
)
[12] => App\Entity\Channel Object
(
[id:protected] => 128
[neighbourIds:protected] => Array
(
[0] => 127
[1] => 129
[2] => 134
)
)
[13] => App\Entity\Channel Object
(
[id:protected] => 129
[neighbourIds:protected] => Array
(
[0] => 130
[1] => 128
)
)
[14] => App\Entity\Channel Object
(
[id:protected] => 130
[neighbourIds:protected] => Array
(
[0] => 129
[1] => 131
[2] => 127
)
)
[15] => App\Entity\Channel Object
(
[id:protected] => 131
[neighbourIds:protected] => Array
(
[0] => 130
[1] => 132
[2] => 126
)
)
[16] => App\Entity\Channel Object
(
[id:protected] => 132
[neighbourIds:protected] => Array
(
[0] => 131
[1] => 133
[2] => 3
)
)
[17] => App\Entity\Channel Object
(
[id:protected] => 133
[neighbourIds:protected] => Array
(
[0] => 132
[1] => 2
)
)
[18] => App\Entity\Channel Object
(
[id:protected] => 134
[neighbourIds:protected] => Array
(
[0] => 135
[1] => 128
)
)
[19] => App\Entity\Channel Object
(
[id:protected] => 135
[neighbourIds:protected] => Array
(
[0] => 134
[1] => 136
[2] => 127
)
)
[20] => App\Entity\Channel Object
(
[id:protected] => 136
[neighbourIds:protected] => Array
(
[0] => 135
[1] => 137
[2] => 126
)
)
[21] => App\Entity\Channel Object
(
[id:protected] => 137
[neighbourIds:protected] => Array
(
[0] => 136
[1] => 138
[2] => 3
)
)
[22] => App\Entity\Channel Object
(
[id:protected] => 138
[neighbourIds:protected] => Array
(
[0] => 137
[1] => 2
)
)
[23] => App\Entity\Channel Object
(
[id:protected] => 139
[neighbourIds:protected] => Array
(
[0] => 140
[1] => 121
)
)
[24] => App\Entity\Channel Object
(
[id:protected] => 140
[neighbourIds:protected] => Array
(
[0] => 139
[1] => 141
[2] => 122
)
)
[25] => App\Entity\Channel Object
(
[id:protected] => 141
[neighbourIds:protected] => Array
(
[0] => 140
[1] => 142
[2] => 123
)
)
[26] => App\Entity\Channel Object
(
[id:protected] => 142
[neighbourIds:protected] => Array
(
[0] => 141
[1] => 143
[2] => 124
)
)
[27] => App\Entity\Channel Object
(
[id:protected] => 143
[neighbourIds:protected] => Array
(
[0] => 142
[1] => 125
)
)
[28] => App\Entity\Channel Object
(
[id:protected] => 144
[neighbourIds:protected] => Array
(
[0] => 145
[1] => 121
)
)
[29] => App\Entity\Channel Object
(
[id:protected] => 145
[neighbourIds:protected] => Array
(
[0] => 144
[1] => 146
[2] => 122
)
)
[30] => App\Entity\Channel Object
(
[id:protected] => 146
[neighbourIds:protected] => Array
(
[0] => 145
[1] => 147
[2] => 123
)
)
[31] => App\Entity\Channel Object
(
[id:protected] => 147
[neighbourIds:protected] => Array
(
[0] => 146
[1] => 148
[2] => 124
)
)
[32] => App\Entity\Channel Object
(
[id:protected] => 148
[neighbourIds:protected] => Array
(
[0] => 147
[1] => 125
)
)
[33] => App\Entity\Channel Object
(
[id:protected] => 152
[neighbourIds:protected] => Array
(
[0] => 2
)
)
[34] => App\Entity\Channel Object
(
[id:protected] => 175
[neighbourIds:protected] => Array
(
[0] => 2
)
)
[35] => App\Entity\Channel Object
(
[id:protected] => 176
[neighbourIds:protected] => Array
(
[0] => 2
)
)
)
我希望有一种网格来可视化相关的通道，以启用数据管理（删除、扩展等）。我的问题只涉及可视化部分。
解决方案
推荐阅读
- razor - 带有 Razor + vue + webpack 的 asp.net-core 2.1 在非 spa 多页应用程序上
- javascript - 如何显示帖子提要中最喜欢的帖子？
- laravel-5.6 - Laravel - 如何使用 belongsToMany 关系获取与类别完全匹配的记录
- powershell - 远程 Powershell 会话未加载程序集
- r - dplyr sample_n 返回表中不同的行数
- postgresql - int4range, NOT IN (VALUES), ON NOT (with LEFT JOIN) in QueryDSL 4
- r - Cox 模型一致性值与 mlr 计算的 c-index 不同
- ruby-on-rails - 控制器请求重复故障排除
- macros - Elixir：AST扩展期间未定义的变量
- c++ - 共享内存中的 C++ 二维数组（基于命令行参数）