如何使用WRLD构建交互式历史地图

落日映苍穹つ 2022-12-03 01:49 87阅读 0赞

*This article was created in partnership with [WRLD][]. Thank you for supporting the partners who make SitePoint possible.*

*本文是与[WRLD][]合作创建的。* *感谢您支持使SitePoint成为可能的合作伙伴。*

There’s nothing new about using maps in education—they engage students and help them visualize location-based information. With the rise of digital e-learning platforms, they remain an important resource. Today’s educators need a mapping tool that is attractive and intuitive, easy to customize, can be accessed online and on mobile devices, and makes sharing with students simple. And if the maps are 3D, so much the better.

在教育中使用地图没有什么新鲜之处，它们可以吸引学生并帮助他们可视化基于位置的信息。 随着数字化电子学习平台的兴起，它们仍然是重要的资源。 当今的教育工作者需要一种有吸引力的直观地图绘制工具，易于定制，可以在线和在移动设备上访问，并且使与学生的共享变得简单。 如果地图是3D的，那就更好了。

![WRLD 3D Maps][]

I’ve just described [WRLD][WRLD 1]. And while [it’s great for developers][it_s great for developers], the company’s online Map Design tools (“[a mapping tool for everyone][]”) open the door for those with absolutely no coding skills to create powerful custom maps.

我刚刚描述了[WRLD][WRLD 1] 。 尽管[对开发人员非常][it_s great for developers]有用，但该公司的在线地图设计工具(“ [每个人的地图工具][a mapping tool for everyone] ”)为完全没有编码技能的[人][a mapping tool for everyone]打开了创建强大的自定义地图的大门。

> WRLD invites anyone to design and manage custom 3D maps through our cloud-based mapping tool without extensive coding, optimized for both modern web and mobile applications.
> 
> WRLD邀请任何人通过我们基于云的制图工具来设计和管理自定义3D地图，而无需进行广泛的编码，并且针对现代Web和移动应用程序进行了优化。

Unlike Google Maps, WRLD is completely 3D. That will make anyone familiar with modern gaming feel completely at home. WRLD also prioritizes privacy, control and developer extensibility. It’s a product that ticks all the boxes. How would a teacher go about using it?

与Google Maps不同，WRLD是完全3D的。 这将使熟悉现代游戏的任何人都完全有宾至如归的感觉。 WRLD还优先考虑隐私，控制和开发人员的可扩展性。 这个产品打勾了所有的盒子。 老师将如何使用它？

## 使用WRLD创建自定义3D地图 **(**Create Custom 3D Maps with WRLD**)** ##

Here’s the idea: WRLD provides you with a complete 3D map of the planet. You select the location you’re teaching about, select a suitable theme, add points of interest, and create cards that communicate your location-based content. You can then share a link of your map that opens a web browser or mobile app, embed it on a web page, or even include it in your own e-learning software.

想法是：WRLD为您提供了行星的完整3D地图。 您可以选择要讲授的位置，选择合适的主题，添加兴趣点，并创建用于传达基于位置的内容的卡片。 然后，您可以共享地图链接，以打开网络浏览器或移动应用程序，将其嵌入网页中，甚至将其包含在您自己的电子学习软件中。

> Our goal is to build the most intelligent representation of the world in 3D.
> 
> 我们的目标是建立3D世界中最智能的表示。

WRLD is a work in progress. Rendering the entire world in 3D is a huge task, and it doesn’t yet offer maps of every country (although [users can vote for new areas][] to be included in WRLD). Features are still being added, and documentation is still being created. But despite those limitations, it’s a compelling mapping product that will already meet many of your needs.

WRLD正在开发中。 以3D渲染整个世界是一项艰巨的任务，它尚无法提供每个国家/地区的地图(尽管[用户可以投票赞成将新区域][users can vote for new areas]包含在WRLD中)。 功能仍在添加，文档仍在创建。 尽管有这些限制，它还是一个引人注目的地图产品，已经可以满足您的许多需求。

Currently over 300 million square meters of maps are available. There is full coverage of the US, Canada, UK, Ireland, Scandinavia, the Arab Peninsula, Italy and more, as well as partial coverage of Spain, Australia and Thailand. That should cover a lot of your syllabus!

目前有超过3亿平方米的地图可供使用。 对美国，加拿大，英国，爱尔兰，斯堪的纳维亚半岛，阿拉伯半岛，意大利等进行了全面覆盖，对西班牙，澳大利亚和泰国进行了部分覆盖。 那应该涵盖了您的很多课程！

![Coverage][]

The cost should be quite attractive to most educators. WRLD is completely free if you have 1,000 monthly users or less, which will be most teachers and small training organizations. Larger educational institutions and e-learning platforms may need to pay a modest fee, as indicated in the screenshot below.

费用对大多数教育者来说应该是很有吸引力的。 如果您的月度用户数为1,000个或更少，则WRLD是完全免费的，这将是大多数教师和小型培训组织。 较大的教育机构和电子学习平台可能需要支付适度的费用，如下面的屏幕快照所示。

![Pricing][]

So how do you go about creating a 3D map for education? We’ll show you by creating a map about The Great Fire of London. You can [view it in your web browser here][], or explore the embed below.

那么，您如何创建用于教育的3D地图？ 我们将通过创建有关伦敦大火的地图来向您展示。 您可以[在此处的网络浏览器中查看它][view it in your web browser here] ，或浏览下面的嵌入内容。

## 地图设计器：创建不带编码的3D地图 **(**Map Designer: Create a 3D Map Without Coding**)** ##

Non-developers will use WRLD’s [Map Designer][], an online tool that is designed for both pros and beginners. Create and manage your own 3D maps, selecting simple or sophisticated styles.

非开发人员将使用WRLD的[Map Designer][] ，这是一种面向专业人士和初学者的在线工具。 创建和管理自己的3D地图，选择简单或复杂的样式。

![地图设计师主页][1517464333wrld3d-mapdesignhome.jpg]

Once you create an account, you can create your first map. Give the map a name, and you’ll be given a URL. You may like to paste the address into a different browser tab so you can monitor your progress from your students’ point of view.

创建帐户后，您可以创建第一个地图。 为地图命名，然后为您提供一个URL。 您可能希望将地址粘贴到其他浏览器选项卡中，以便可以从学生的角度监视进度。

![alt][]

![alt][alt 1]

Navigating the map is intuitive. Left click and drag to move the map around, scroll to zoom in and out, and right click and drag to rotate. As you zoom in the display changes from 2D to 3D automatically.

导航地图很直观。 左键单击并拖动以移动地图，滚动以放大和缩小，右键单击并拖动以旋转。 放大时，显示会自动从2D变为3D。

Our first job is to define the initial view that your students will see when they open the map. The Great Fire of London happened north of the Thames, adjacent to London Bridge. I start with a search for “the great fire of london” and discover that there is a monument at the site. That should get me close.

我们的第一项工作是定义您的学生在打开地图时将看到的初始视图。 伦敦大火发生在泰晤士河以北，毗邻伦敦桥。 我首先搜索“伦敦大火”，然后发现该地点有一座纪念碑。 那应该让我靠近。

![搜索][1517464361wrld3d-search1.png]

![搜索][1517464364wrld3d-search2.png]

That’s perfect, and I’d like this to be what the map displays when it is opened. I click **Use Current Map View** in the right pane.

太好了，我希望这是打开地图时显示的内容。 我在右窗格中单击“ **使用当前地图视图** ”。

We now need to select a theme, so I click the paint can icon in the right pane. I like the look of the dark theme.

现在，我们需要选择一个主题，因此我单击右窗格中的油漆罐图标。 我喜欢深色主题的外观。

![黑暗主题][1517464321wrld3d-darktheme.png]

Now it’s time to add some places of interest. We do that from the Places Designer, which I can open (in a new browser tab) by clicking on the **Places** icon, then clicking **Manage Place Collections**.

现在是时候添加一些景点了。 我们通过Places Designer进行操作，我可以通过单击**Places**图标，然后单击**Manage Place Collections**来打开(在新的浏览器标签中)。

![地方][1517464353wrld3d-places.png]

## 地点设计师：添加景点和基于位置的内容 **(**Places Designer: Add Places of Interest and Location-Based Content**)** ##

The Places Designer is now open. I can switch between it and the Map Designer simply by switching tabs in my browser.

地方设计器现已打开。 我只需在浏览器中切换标签即可在地图编辑器和地图设计器之间切换。

![地方设计师][1517464356wrld3d-placesdesigner.png]

Before I add some places of interest to the map, I first need to create some **Places Collections**. These are containers for our places, and help us keep things organized.

在向地图添加一些景点之前，我首先需要创建一些**Places Collections** 。 这些是存放我们地方的容器，可帮助我们保持事物井井有条。

I first need to have an idea about the content I’d like to add to the map. There’s a lot of interesting material about The Great Fire of London available online. Because the tragedy happened in 1666, there are obviously no photographs, but there are a surprising number of paintings available. To keep things simple for the purpose of this article, I’ll just use Wikipedia as a source.

首先，我需要对要添加到地图上的内容有所了解。 在线上有很多关于伦敦大火的有趣材料。 因为悲剧发生在1666年，所以显然没有照片，但是有数量惊人的绘画可供使用。 为了使本文简单，我仅将Wikipedia用作源。

The article includes a few maps of the spread of the fire over the four days, some contemporary paintings of the fire, and more. I decide to create just two collections, and make them available for my map by choosing “The Great Fire of London” under “app”:

文章包括四天中火势蔓延的一些地图，一些火势当代绘画等等。 我决定只创建两个集合，然后通过在“应用程序”下选择“伦敦大火”将它们提供给我的地图：

*  Images: The Great Fire of London
    
    图片：伦敦大火
 *  Maps: The Great Fire of London
    
    地图：伦敦大火

![新地方收藏][1517464348wrld3d-newplacescollection.png]

Now we’ll add some places of interest to each collection. Each place will add a pin to the map, and selecting the pin will display a card with additional content, including text and an image.

现在，我们将为每个集合添加一些景点。 每个地方都会在地图上添加图钉，选择图钉会显示带有其他内容的卡，包括文本和图像。

I’ll start with the first painting found in the Wikipedia article, which shows how the fire looked on the third day from near Tower Wharf on the Thames, just to the east of the fire. I want this to be in the “Images” collection, so I click on it, then **New Place Marker**. A pin is placed at the centre of the map, and I drag it to the vicinity of the wharf.

我将从Wikipedia文章中发现的第一幅画开始，该画展示了火在第三天从泰晤士河上的塔码头附近，正好在火东边的样子。 我希望它位于“图像”集合中，因此我单击它，然后单击“ **新位置标记”** 。 在地图的中心放置了一个图钉，然后将其拖到码头附近。

![新地方标记][1517464346wrld3d-newplacemarker.png]

Now I fill in the form in the right pane, including a title, subtitle and URL to the image. I change the tag to “Fire”, which modifies the image on the pin. I preview the card, and it appears as in the screenshot below.

现在，我在右窗格中填写表单，包括标题，副标题和图像的URL。 我将标签更改为“ Fire”，从而修改了引脚上的图像。 我预览了这张卡，它显示在下面的屏幕截图中。

![新地点标题标签][1517464350wrld3d-newplacetitletags.png]

The next form in the right panel is for contact information. That’s not really needed for our use, but I did add a link to the Wikipedia article.

右面板中的下一个表格用于联系信息。 对于我们的使用而言，这并不是真正需要的，但是我确实在Wikipedia文章中添加了链接。

![联系][1517464314wrld3d-contact.png]

Next we can enter a description, which is a single paragraph of text content. I add the image description from Wikipedia, and preview the card.

接下来，我们可以输入描述，它是文本内容的单个段落。 我从Wikipedia添加图像描述，并预览卡片。

![卡说明][1517464312wrld3d-carddescription.png]

The next form allows you to fine tune the latitude and longitude of the pin. I’m not sure of the exact location of the painting, so leave it as it is.

下一种形式允许您微调图钉的纬度和经度。 我不确定这幅画的确切位置，因此请保持原样。

![纬度经度][1517464331wrld3d-latitudelongitude.png]

The final form is a JSON editor, which is a little technical, and allows you to directly edit the data entered from the forms. If you don’t mind a bit of light technical work, it’s possible to further customize the card by adding HTML content. WRLD will release a video tutorial of how to accomplish this in the near future.

最终的表单是JSON编辑器，它有点技术性，可让您直接编辑从表单输入的数据。 如果您不介意进行简单的技术工作，则可以通过添加HTML内容来进一步自定义卡。 WRLD将发布有关如何在不久的将来实现此目标的视频教程。

I add some more cards to our map using the same method, and it starts to take shape:

我使用相同的方法向我们的地图添加了更多卡片，然后卡片开始成形：

*  Image: Ludgate on Fire
    
    图片：路德盖特着火
 *  Image: Monument to The Great Fire of London
    
    图片：伦敦大火纪念碑
 *  Image: View of Fire on Day 3
    
    图片：第3天的火景
 *  Map: Day 1 Fire Damage
    
    地图：第1天的火焰伤害
 *  Map: Day 2 Fire Damage
    
    地图：第2天的火焰伤害
 *  Map: Day 3 Fire Damage
    
    地图：第3天的火焰伤害

![感兴趣的地方][1517464358wrld3d-placesofinterest.png]

We’re almost finished. But before we share our map we need to return to the Map Designer to make our places of interest discoverable.

我们快完成了。 但是在共享地图之前，我们需要返回地图设计器以使我们的名胜古迹可以被发现。

## 完成并共享您的自定义3D地图 **(**Finish and Share Your Custom 3D Map**)** ##

When we return to the Map Designer, we see that our places collections are marked for inclusion. That doesn’t make the pins visible automatically, but it does give us access to the items in a search.

当我们返回到地图设计器时，我们看到地方集合被标记为包括在内。 那不会使图钉自动可见，但是可以让我们访问搜索中的项目。

![包括收藏][1517464328wrld3d-includecollections.png]

We can make them easy to find by customizing the **Find Menu**. This will allow our students to quickly find items on the map by clicking menu items that automatically search for a specific tag.

通过自定义“ **查找菜单”，**我们可以使它们易于**查找** 。 通过单击自动搜索特定标签的菜单项，我们的学生可以在地图上快速找到项目。

![自定义查找菜单][1517464318wrld3d-customizefindmenu.png]

Since we only have a few places of interest on our map, I decide that a single search should find them all, so I go back to the Places Designer and add the “Fire” tag to each place of interest, then return.

由于我们的地图上只有几个名胜古迹，因此我决定一次搜索就可以找到所有这些名胜古迹，因此我返回到位置设计器，并在每个名胜古迹中添加“ Fire”标签，然后返回。

I check **Customize Find Menu** and add a new item: “The Great Fire of London”. I’ll have the menu item automatically search for the tag “Fire”, and represent the item with the “Fire” icon. At the same time I remove the item that WRLD had automatically added, and uncheck “Include Yelp Places in search results from Find Menu.”

我选中“ **自定义查找菜单”**并添加一个新项目：“伦敦大火”。 我将使菜单项自动搜索标签“ Fire”，并用“ Fire”图标表示该项目。 同时，我删除了WRLD自动添加的项目，并取消选中“在查找菜单的搜索结果中包括Yelp位置”。

![新查找项目][1517464338wrld3d-newfinditem.png]

Finally, the Map Designer also has a JSON Editor.

最后，地图设计器还具有JSON编辑器。

![地图编辑器JSON][JSON]

A few quick edits here will make our map much more useful by making our places of interest visible without manually doing a search first.

此处的一些快速编辑将使我们的景点可见而无需首先手动进行搜索，从而使我们的地图更加有用。

*  First, I change `perform_start_up_search` to “true”.
    
    首先，我将`perform_start_up_search`更改为“ true”。
 *  Then I change `start_up_search_tag` to “fire”.
    
    然后，我将`start_up_search_tag`更改为“ fire”。

Now whenever the map is opened, WRLD will automatically search for the “fire” tag and display the corresponding places of image as a search result. It will also displays the matching pins on the map. Clicking on a search result will scroll to the place of interest and display the card. WRLD notes that soon, users will not need to edit JSON to make these changes.

现在，无论何时打开地图，WRLD都会自动搜索“ fire”标签并显示图像的相应位置作为搜索结果。 它还将在地图上显示匹配的图钉。 单击搜索结果将滚动到感兴趣的地方并显示卡。 WRLD指出，很快，用户将无需编辑JSON即可进行这些更改。

![成品图][1517464326wrld3d-finishedmap.png]

Finally, we need to make the map available to our students. We can do that by either sharing a clickable link to the map, which will open directly in the browser or direct mobile users to the app, or by embedding it as an iframe inside our online curriculum. Clicking on **Embed Web Code** displays a tool that lets you customize the size of the embedded map.

最后，我们需要将地图提供给我们的学生。 为此，我们可以共享指向地图的可点击链接，该链接将直接在浏览器中打开，或者将移动用户定向到该应用，或者将其作为iframe嵌入到我们的在线课程中。 单击“ **嵌入Web代码”将**显示一个工具，可让您自定义嵌入式地图的大小。

![Embed Web Code][]

WRLD’s Map Designer allows you to create and share useful educational 3D maps without any coding. Students can explore your location-based content and visualize the material.

WRLD的地图设计器使您无需任何编码即可创建和共享有用的教育3D地图。 学生可以浏览您基于位置的内容并使材料可视化。

But be aware that, coding could enhance our map even further. For example, we could add polygons to indicate the area damaged by the fire each day, display hotspots using statistical data of casualties or the temperature of the fire, and we could color code buildings to indicate when they started to burn. If you’d like to learn more, check out Christopher Pitt’s [more technical series on WRLD][it_s great for developers] on the Web channel.

但是请注意，编码可以进一步增强我们的地图。 例如，我们可以添加多边形来表示每天被火烧毁的区域，使用伤亡人数或火的温度统计数据显示热点，并且可以对建筑物进行颜色编码以指示何时开始燃烧。 如果您想了解更多信息，请在Web频道[上][it_s great for developers]查看Christopher Pitt [关于WRLD][it_s great for developers]的[更多技术系列][it_s great for developers] 。

> 翻译自: [https://www.sitepoint.com/how-to-build-an-interactive-history-map-with-wrld/][https_www.sitepoint.com_how-to-build-an-interactive-history-map-with-wrld]

[WRLD]: https://www.wrld3d.com/
[WRLD 3D Maps]: /images/20221123/967707b4e5814fababbecd0986f42210.png
[WRLD 1]: https://www.wrld3d.com/?utm_source=sitepoint&utm_medium=referral&utm_campaign=sp-a4-how-to-build-an-interactive-history-map-with-wrld&utm_content=text-sp-home
[it_s great for developers]: https://www.sitepoint.com/building-dynamic-3d-maps/
[a mapping tool for everyone]: https://www.wrld3d.com/blog/introducing-wrld-map-designer-a-mapping-tool-for-everyone/?utm_source=sitepoint&utm_medium=referral&utm_campaign=sp-a4-how-to-build-an-interactive-history-map-with-wrld&utm_content=text-sp-blog-introducing-wrld-map-designer-a-mapping-tool-for-everyone
[users can vote for new areas]: https://www.wrld3d.com/3d-maps/mapping-data?utm_source=sitepoint&utm_medium=referral&utm_campaign=sp-a4-how-to-build-an-interactive-history-map-with-wrld&utm_content=text-sp-3d-maps-map-designer-mapping-data#WRLD-MAP-COVERAGE
[Coverage]: /images/20221123/36dfe2dc9dc7484eb729fdc95ac77a89.png
[Pricing]: /images/20221123/5bee8e7658344b948b585b60a3d0326f.png
[view it in your web browser here]: https://wrld.mp/c1fcd43
[Map Designer]: https://www.wrld3d.com/3d-maps/map-designer?utm_source=sitepoint&utm_medium=referral&utm_campaign=sp-a4-how-to-build-an-interactive-history-map-with-wrld&utm_content=text-sp-3d-maps-map-designer
[1517464333wrld3d-mapdesignhome.jpg]: /images/20221123/09a69e30e557495fa9eee572dfe9109c.png
[alt]: /images/20221123/161a944eee2042b1835964e1ce5164ec.png
[alt 1]: /images/20221123/81daa71fd00e4236b3e87ecf25f2a249.png
[1517464361wrld3d-search1.png]: /images/20221123/a977177f4ccc460eb66ce36f4908b5b3.png
[1517464364wrld3d-search2.png]: /images/20221123/ebdd841a2924431c835adf000be58c17.png
[1517464321wrld3d-darktheme.png]: /images/20221123/c87fb46909d0408396b1a557ec49eae5.png
[1517464353wrld3d-places.png]: /images/20221123/096243e41b004cd49f1fad776822d785.png
[1517464356wrld3d-placesdesigner.png]: /images/20221123/7f1d58cc47614babaffc34379d6d0ce5.png
[1517464348wrld3d-newplacescollection.png]: /images/20221123/0c9a9df471544ea298e5c36f929f791d.png
[1517464346wrld3d-newplacemarker.png]: /images/20221123/95c4e7bf045b40579a362d857ba1b924.png
[1517464350wrld3d-newplacetitletags.png]: /images/20221123/186021d6d1414a06b740616a9f97a020.png
[1517464314wrld3d-contact.png]: /images/20221123/433434c020ed43ccb8975536a1119c07.png
[1517464312wrld3d-carddescription.png]: /images/20221123/087cf062f700495485b8613a07952d67.png
[1517464331wrld3d-latitudelongitude.png]: /images/20221123/0e7ea01bf8774d0e8644feb7a044b524.png
[1517464358wrld3d-placesofinterest.png]: /images/20221123/420b3386c54b47cc98dd2ca7b64337b3.png
[1517464328wrld3d-includecollections.png]: /images/20221123/ae00df1d95754abba504f94aaa864c12.png
[1517464318wrld3d-customizefindmenu.png]: /images/20221123/b53c0f2f601e4dc9aa90f1325a70094a.png
[1517464338wrld3d-newfinditem.png]: /images/20221123/e4bd038841594edab2a869ad90bcc0ef.png
[JSON]: /images/20221123/5415e79cca93403d8c1a1c49e663bfc3.png
[1517464326wrld3d-finishedmap.png]: /images/20221123/ee92c2ba619245079ce3d3e705033c0c.png
[Embed Web Code]: /images/20221123/1b1ac46ba28e4cb8a492f1b81d6899c0.png
[https_www.sitepoint.com_how-to-build-an-interactive-history-map-with-wrld]: https://www.sitepoint.com/how-to-build-an-interactive-history-map-with-wrld/