购物中心地图目录编辑

Question

我有一个购物中心目录图像（例如：http://www.westfield.com/annapolis/map/）并希望创建一个类似http://www.youtube.com/watch?v=LNj8D8JKv-4&feature=related的应用程序，我可以在这里绘制两个位置之间的路径，而无需为路径。

那么，您建议使用.NET（Windows窗体/ WPF）应用程序执行哪些技术（库，编程技术，软件等）？

编辑BOUNTY

我正在寻找一些开始。我在三楼。我有一个三楼的形象。地图从3楼有入口。地板上有29个座位。我想用线路显示，哪里是某人的座位。我想通过 Web App来实现。 C＃MVC 4.5 我应该从哪里开始？任何示例代码都非常有用。

Answer 1

前段时间我解决了类似的问题。简而言之，我正在制作像英雄无敌的游戏，因为我不想自己绘制背景，所以我决定使用静态图像，我会简单地操纵玩家移动。

所以我们发现了一个带有地图编辑器的开源游戏，我们用它来创建地图背景。然后我们创建了一个mapper，它将加载从地图编辑器创建的图像，用户可以在网格上标记位置。以下图片是我们的地图映射器的截图。

有图像，并为细胞绘制了可调整大小的网格，以便我们可以非常精确地映射对象。带有项目的黄色方框是映射对象（其中一些实际上没有意义，它只是一个概念证明）。当我们对结果感到满意的时候，我们会安排所有obejct到xml文件的位置和信息，以便我可以在我们的游戏应用程序中使用。

在我们的游戏中，我们定义了一个名为TileMap的类，该类在地图上知道所有对象（存储为类Tile的实例），并允许或禁止所有玩家移动请求

最后，这就是我解决问题的方法。我对这个解决方案只有积极的经验。创建一个应用程序，允许您指定存在路径的位置，存储区及其调用方式，等等。将值序列化为xml或您自信的其他格式。然后，创建一个与这些obejcts一起使用的应用程序，定义一个tile map，你几乎完成了。现在您只需要实现路径查找和绘图。路径查找很容易，有很多不同的算法，效率和速度不同。一旦你知道你必须穿过哪些瓷砖才能进入目的地，只需在瓷砖上方绘制星星，箭头或任何你喜欢的东西。

<强>缺点

• 您需要创建两个应用程序

<强>赞成

• 无需生成更多图像，您正在透明图层上绘图，并且您可以安全地在内存或文件中生成路径
• 非常简单的实现，只是很多代码
• 随意选择一项技术 - 我们使用WinRT，但WPF甚至WinForms也适用
• 如果您喜欢GUI应用程序，那么在执行此操作时您将获得很多乐趣：）

随意询问任何设计甚至实施细节问题。

Answer 2

1. 准备您想要搜索的所有地点的列表。给每个人一个ID。楼梯和电梯也应该有ID。
2. 创建地图地图遮罩。简单的方法是“着色书”技术。在Photoshop中创建半透明图层并将其覆盖在地图上方。然后，用一些设置“颜色1”绘制墙壁。然后，用不同的颜色绘制每个不同的地方。只需将地点ID转换为十六进制并使用该十六进制值作为颜色。为每个楼层绘制遮罩（在单独的图像中）。
3. 创建地图加载器。它应该加载蒙版图像并提取对象位置和传递能力信息。您必须通过扫描地图并查看像素颜色十六进制值来找到每个地方的位置（x，y，地板）。您必须找到楼梯和电梯，它们的位置以及它们连接的楼层。
4. 实施pathfinding algorithm之类A*。这很容易，看起来像粘稠的水流到目的地的低点。对于每个位置（x，y，地板），可以在没有墙壁的四个方向中的任何一个方向上移动。如果那时有一个电梯，可以移动到其他楼层。该算法可以快速找到任意两个（x，y，floor）点之间的最佳路径。
5. 当用户给出他想要去的地方的名称时，你需要找出用户的位置坐标（你可以尝试使用GPS）和目的地位置（使用你准备的对象位置表在步骤3）上加载地图。将这两个（x，y，floor）点赋予寻路算法以返回路径 - 通往目的地的（x，y，floor）点的序列。
6. 分析路线。您需要扫描路线并找出它通过的楼层。将路径拆分为每个块属于单个楼层的块。现在您有一个楼层列表和每个楼层的路线点。
7. 通过在楼层地图上绘制路线点来可视化楼层及其路线部分。要增加根点间距，您可以每隔10点左右绘制一次。使用HTML5，可以将路线点序列绘制为楼层地图图像背景顶部的SVG或画布覆盖。

Answer 3

设置这样的东西的最好方法是拿起一本关于游戏编程的书，因为它会为你提供很多关于在“实体对象”周围设置路径的信息。实际的UI技术应该没那么重要，所以选择WPF或Windows Forms，HTML5等。在你有的选择中，我可能会针对WPF或Silverlight，因为它为你创建UI提供了更大的灵活性。但我也不会对HTML5不利。

Answer 4

你可以肯定地在WPF中完成所有工作，你正在寻找绘制简单路径，因此你需要将你的项目分成多个子问题：

1）如何绘制UI区域（我假设您已经知道）

2）如何绘制地图，它在很大程度上取决于您拥有的地图数据，但它可以像单个图像一样简单，请为您的源添加更多细节

3）如何弄清楚路径，为此你需要使用某种形式的寻路算法（最简单的一种是A *，但是有不同的算法可以满足不同的需求）

4）如何绘制路径，这取决于你再次寻找什么

我知道这不是一个答案，但根据您的需要（请在下面添加评论）我会编辑它以帮助您尽我所能。

Answer 5

如果你想要自己做这整件事，那将是非常重要的事情。你所拥有的只是购物中心的形象。从那里你需要将其转换为矢量数据，这本身就是一个相当重要的项目。然后，您将需要设计导航算法，然后您需要为整个事情设置UX。 IMO，如果你想要很好地准确地做到这一点，所有这些都需要大量的资源和研究。

幸运的是，这是一个好消息：谷歌一直试图做同样的事情，并且投入的资源远远多于您可能使用的资源。他们的努力被称为“室内地图”，您可以为您的场景提供开箱即用的功能。我会在这里给出指示，以便按照你的要求启动你。

首先访问Google blog以熟悉他们的室内地图计划。然后尝试在Google地图here中添加您的楼层平面图。您基本上是在谷歌地图中上传图像并与建筑物对齐。这是another tutorial。请注意，这不会使您的楼层平面图可导航，并且可能无法在其上显示用户位置，因为要这样做，您需要来自wifi /手机信号塔的数据，以便在平面图上对用户位置进行三角测量。我们接下来会讨论这个问题。如果你有大量的这些平面图，我建议你帮助机械土耳其人或这样的服务让其他人为你做便宜。谷歌地图允许您使用overlays保持楼层平面私密性，但您可能不希望这样做，以便用户可以从任何地方访问它。

接下来，您希望让您的用户可以在您的平面图上找到。这涉及在平面图上的不同点获取诸如wifi /蜂窝塔信号的数据。 Google已app for this。这是little demo。您还可以使用SketchUp添加矢量数据和多边形。

接下来，您希望在自己的应用中嵌入Google地图，以便它成为您应用中不可或缺的一部分，而不是用户必须通过Google地图网站。要执行此操作，请查看Maps SDK（此处为link for iOS和snippet for indoor maps）。

祝你好运！

Answer 6

通过查看Google地图室内解决方案，您可以更轻松地完成这项工作。 http://maps.google.com/help/maps/indoormaps/ 除了网页之外，不需要编程。