metaio SDK 官方教程--官方范例之Location-based AR

在此范例中，我们会在AR场景中使用非光学跟踪技术。此范例的功能包括加载4个POI（兴趣点）或告示牌（billboard），并选取常用城市的坐标来定义它们的位置。然后，我们添加一个3D模型，并把它的位置定义为metaio慕尼黑总部坐标。用户可以环视整个AR场景—虚拟物体会在他们的地理位置上被渲染

在此范例中，我们对虚拟物体定义LLA坐标。LLA代表纬度、经度和高度，其主要用来在地球上定义地理位置。高度表示海平面以上的距离，单位为米；而纬度和经度的单位为度

我们还会在此范例中使用雷达模型，它能显示3D模型的位置和用户当前的视角（我们当前可以看到的场景）。雷达在基于地理位置的跟踪应用中可以给用户提供有用的信息

---

材料 [SDK 5.2或更早版本]

此段只适用于SDK 5.2或更早的版本

本范例中的材料位于TutorialLocationBasedAR/Assets（IOS）或assets/TutorialLocationBasedAR/Assets（安卓）：

• POI_bg,png是告示牌的背景图片
• radar.png是雷达物体的背景图片
• yellow.png是雷达物体中代表3D模型的小黄点图片
• red.png是雷达物体中代表被指触过的3D模型的小红点图片
  

如果您打算在地理位置AREL场景中使用告示牌，请您确保下载适用于IOS和安卓的告示牌图片组。前者可以直接添加到您的Xcode项目中，而后者可以放到res/drawable-nodpi文件夹中。

---

Assets [SDK 5.3或更新版本]

此段适用于SDK 5.3或更新版本。在SDK 5.3中，我们推出了新POI视觉系统：POI由新的告示牌标注，其标注内容包括名称、距离和场所类型。为了配合新POI视觉系统，SDK 5.3还添加了一个新类IAnnotatedGeometriesGroup，同时IBillboardGroup也在新SDK中废弃，并会在以后的版本中彻底删除

在/tutorialContent_crossplatform/TutorialLocationBasedAR/Assets中你可以找到如下材料：

• POI_bg,png是告示牌的背景图片
• radar.png是雷达物体的背景图片
• yellow.png是雷达物体中代表3D模型的小黄点图片
• red.png是雷达物体中代表被指触过的3D模型的小红点图片
  

如果您打算在AREL基于位置场景中使用告示牌，请确保您在开发环境下包含了下列材料。在安卓上，必须把tutorialContent_crossplatform/junaio文件夹添加到程序assets文件夹中；而对于IOS，请您添加Cloud Plugin bundle，其位于_iOS\Examples_CloudPlugin\Template\MetaioCloudPluginTemplate\AugmentedReality\Resources\MetaioCloudPlugin.bundle。请您借鉴本范例的AREL代码

---

实现方法（SDK 5.2或以前版本）

在加载虚拟模型之前，我们先用常量GPS设置好AR场景的跟踪类型，代码如下：

1. // java
   
2. 
   
3. boolean result = metaioSDK.setTrackingConfiguration("GPS");

复制代码

1. // objective c
   
2. 
   
3. bool result = m_metaioSDK->setTrackingConfiguration("GPS");

复制代码

1. // javascript
   
2. 
   
3. arel.Scene.setTrackingConfiguration(arel.Tracking.GPS);

复制代码

然后，我们创建场景中的模型和他们的地理位置。为了设置POI的位置，用户需要生成LLACoordinate实例，并把它设置给相应的POI实例。请注意，在AREL中，我们需要定义POI的参数，如ID、标题、地点，并且不要忘记把POI添加到场景中：arel.Scene.addObject(newBillboard);

1. // java
   
2. 
   
3. mGeometryLondon = metaioSDK.createGeometryFromImage(createBillboardTexture("London"), true);
   
4. LLACoordinate london = new LLACoordinate(51.50661, -0.130463, 0, 0);
   
5. mGeometryLondon.setTranslationLLA(london);

复制代码

1. // objective c
   
2. 
   
3. metaio::LLACoordinate london = metaio::LLACoordinate(51.50661, -0.130463, 0, 0);
   
4. londonImage = [self getBillboardImageForTitle:@"London"];
   
5. londonBillboard = m_metaioSDK->createGeometryFromCGImage("London", [londonImage CGImage], true);
   
6. londonBillboard->setTranslationLLA(london);
   
7. londonBillboard->setLLALimitsEnabled(true);
   
8. billboardGroup->addBillboard(londonBillboard);

复制代码

1. // javascript
   
2. 
   
3. ...
   
4. var london = new arel.LLA(51.50661, -0.130463, 0);
   
5. createBillboard("2", "London", london);
   
6. ...
   
7. //create new POI/billboard
   
8. function createBillboard(id,title, location)
   
9. {
   
10.     var newBillboard = new arel.Object.POI();
    
11.     newBillboard.setID(id);
    
12.     newBillboard.setTitle(title);
    
13.     newBillboard.setLocation(location);
    
14.     newBillboard.setThumbnail("");
    
15.     newBillboard.setIcon("");
    
16.     newBillboard.setVisibility(true,false,true);
    
17.     arel.Scene.addObject(newBillboard);
    
18. }

复制代码

请注意，我们调用了函数setLLAObjectRenderingLimits。这样做就可以确保无论您在何处，您都可以看到POI并能得知周边的城市地理位置。

如果您想为POI加载自定义的背景图片，您需要在下面的代码中指定图片的位置

1. - (UIImage*) getBillboardImageForTitle: (NSString*)title（IOS）

复制代码

1. private String createBillboardTexture(String billBoardTitle)（安卓）

复制代码

在AREL中，您可以通过调用new arel.Object.POI();来自动生成标准告示牌，而且您可以对其添加缩略图和图标并设置弹出事件。需要注意的是，要在AREL中使用告示牌，您就必须确保在项目中包含poi.bundle（IOS）或res/drawable-nodpi/poi_background.png（安卓）。SDK会访问这些资源

为了使用雷达物体，我们需要创建一个radar类的实例。并且，我们还要设置雷达物体的背景图片和模型的默认指示背景。最后需要设定的是雷达物体在屏幕上的位置，代码如下：

1. // java
   
2. 
   
3. mRadar = metaioSDK.createRadar();
   
4. mRadar.setBackgroundTexture(AssetsManager.getAssetPath("TutorialLocationBasedAR/Assets/radar.png"));
   
5. mRadar.setObjectsDefaultTexture(AssetsManager.getAssetPath("TutorialLocationBasedAR/Assets/yellow.png"));
   
6. mRadar.setRelativeToScreen(IGeometry.ANCHOR_TL);

复制代码

1. // objective c
   
2. 
   
3. m_radar = m_metaioSDK->createRadar();
   
4. m_radar->setBackgroundTexture([[[NSBundle mainBundle] pathForResource:@"radar"        ofType:@"png" inDirectory:@"tutorialContent_crossplatform/TutorialLocationBasedAR/Assets"] UTF8String]);
   
5. m_radar->setObjectsDefaultTexture([[[NSBundle mainBundle] pathForResource:@"yellow"        ofType:@"png" inDirectory:@"tutorialContent_crossplatform/TutorialLocationBasedAR/Assets"] UTF8String]);
   
6. m_radar->setRelativeToScreen(metaio::IGeometry::ANCHOR_TL);

复制代码

一旦雷达物体初始化之后，我们就可以在上面添加模型。添加模型很简单，可以使用下面的代码：

1. // java
   
2. 
   
3. mRadar.add(mGeometryLondon);

复制代码

1. // objective c
   
2. 
   
3. m_radar->add(londonBillboard);

复制代码

使用雷达物体，用户可以通过点击模型来对其作标记。在安卓设备上，对模型的点击可以触发onGeometryTouched事件，您可以在此函数里改变模型雷达指示点的颜色。而在IOS上，用户必须通过调用getGeometryFromScreenCoordinates来自行识别被触及的模型。模型的雷达指示点的颜色变化可以通过下面代码实现：

1. // java
   
2. 
   
3. mRadar.setObjectTexture(geometry, AssetsManager.getAssetPath("TutorialLocationBasedAR/Assets/red.png"));

复制代码

1. // objective c
   
2. 
   
3. m_radar->setObjectTexture(model, [[[NSBundle mainBundle] pathForResource:@"red" ofType:@"png" inDirectory:@"tutorialContent_crossplatform/TutorialLocationBasedAR/Assets"] UTF8String]);

复制代码

在AREL中，雷达会自动添加到AR场景中，其包含坐标标注的物体

现在您可以点击Start或Start in AREL按钮来探索您周围的环境了

---

实现方法（SDK 5.3或更新版本）

在加载虚拟模型之前，我们先用常量GPS设置好AR场景的跟踪类型，代码如下：

1. // java
   
2. 
   
3. boolean result = metaioSDK.setTrackingConfiguration("GPS");

复制代码

1. // objective c
   
2. 
   
3. bool result = m_metaioSDK->setTrackingConfiguration("GPS");

复制代码

1. // javascript
   
2. 
   
3. arel.Scene.setTrackingConfiguration(arel.Tracking.GPS);

复制代码

然后，我们创建场景中的模型和他们的地理位置。为了设置POI的位置，用户需要生成LLACoordinate实例，并把它设置给相应的POI实例。请注意，在AREL中，我们需要定义POI的参数，如ID、标题、地点，并且不要忘记把POI添加到场景中：

1. // java
   
2. 
   
3. LLACoordinate london = new LLACoordinate(51.50661, -0.130463, 0, 0);
   
4. mLondonGeo = createPOIGeometry(london);
   
5. mAnnotatedGeometriesGroup.addGeometry(mLondonGeo, "London");

复制代码

1. // objective c
   
2. 
   
3. metaio::LLACoordinate london = metaio::LLACoordinate(51.50661, -0.130463, 0, 0);
   
4. londonGeo = [self createPOIGeometry:london];
   
5. annotatedGeometriesGroup->addGeometry(londonGeo, (void*)"London");

复制代码

1. // javascript
   
2. 
   
3. var london = new arel.LLA(51.50661, -0.130463, 0);
   
4. createPOIGeometry("2", "London", london);
   
5. 
   
6. [...]
   
7. 
   
8. function createPOIGeometry(id, title, location)
   
9. {
   
10.         var newPOI = new arel.Object.POI();
    
11.         newPOI.setID(id);
    
12.         newPOI.setTitle(title);
    
13.         newPOI.setLocation(location);
    
14.         newPOI.setThumbnail("");
    
15.         newPOI.setIcon("");
    
16.         newPOI.setVisibility(true,false,true);
    
17.         arel.Scene.addObject(newPOI);
    
18. }
    

复制代码

值得注意的是，您需要通过调用setLLAObjectRenderingLimits来确保POI渲染的足够大，以便用户观测

而在AREL环境中，这个调用对于POI来说不是必须的—AREL中POI的LLA limits已经设置好

如果您希望使用个性化的POI告示牌，您可以使用IAnnotatedGeometriesGroupCallback::loadUpdatedAnnotation。 范例中的2D告示牌是通过图像生成的，其它模型暂时不能作为生成告示牌的材料。调用getAnnotationImageForTitle可以生成相应的图像文件。我们建议您通过使用不同分辨率的图像来生成不同大小的告示牌，从而使告示牌错落有致的分布在屏幕上，以便于观测

在AREL中，如果您使用arel.Object.POI();来添加POI物体，标准化的告示牌会自动生成。您可以对其添加标题，也可以添加缩略图、图标和弹出事件。在使用AREL时，您一定要在assets中添加相应的材料

为了使用雷达物体，我们需要创建一个radar类的实例。并且，我们还要设置雷达物体的背景图片和模型的默认指示背景。最后需要设定的是雷达物体在屏幕上的位置，代码如下：

1. // java
   
2. 
   
3. mRadar = metaioSDK.createRadar();
   
4. mRadar.setBackgroundTexture(AssetsManager.getAssetPath("TutorialLocationBasedAR/Assets/radar.png"));
   
5. mRadar.setObjectsDefaultTexture(AssetsManager.getAssetPath("TutorialLocationBasedAR/Assets/yellow.png"));
   
6. mRadar.setRelativeToScreen(IGeometry.ANCHOR_TL);

复制代码

1. // objective c
   
2. 
   
3. m_radar = m_metaioSDK->createRadar();
   
4. m_radar->setBackgroundTexture([[[NSBundle mainBundle] pathForResource:@"radar"        ofType:@"png" inDirectory:@"tutorialContent_crossplatform/TutorialLocationBasedAR/Assets"] UTF8String]);
   
5. m_radar->setObjectsDefaultTexture([[[NSBundle mainBundle] pathForResource:@"yellow"        ofType:@"png" inDirectory:@"tutorialContent_crossplatform/TutorialLocationBasedAR/Assets"] UTF8String]);
   
6. m_radar->setRelativeToScreen(metaio::IGeometry::ANCHOR_TL);

复制代码

一旦雷达物体初始化之后，我们就可以在上面添加模型。添加模型很简单，可以使用下面的代码：

1. // java
   
2. 
   
3. mRadar.add(mGeometryLondon);

复制代码

1. // objective c
   
2. 
   
3. m_radar->add(londonBillboard);

复制代码

使用雷达物体，用户可以通过点击模型来对其作标记。在安卓设备上，对模型的点击可以触发onGeometryTouched事件，您可以在此函数里改变模型雷达指示点的颜色。而在IOS上，用户必须通过调用getGeometryFromScreenCoordinates来自行识别被触及的模型。模型的雷达指示点的颜色变化可以通过下面代码实现：

1. // java
   
2. 
   
3. mRadar.setObjectTexture(geometry, AssetsManager.getAssetPath("TutorialLocationBasedAR/Assets/red.png"));

复制代码

1. // objective c
   
2. 
   
3. m_radar->setObjectTexture(model, [[[NSBundle mainBundle] pathForResource:@"red" ofType:@"png" inDirectory:@"tutorialContent_crossplatform/TutorialLocationBasedAR/Assets"] UTF8String]);

复制代码

在AREL中，雷达会自动添加到AR场景中，其包含坐标标注的物体

现在您可以点击Start或Start in AREL按钮来探索您周围的环境了

不明觉历

你还，为什么我这边显示不出模型，在场景中，只能显示当前的环境，会出现地点的名字浮在相应的位置，只有三个  。还有一个不显示（就是那个带模型的那个），而且只显示地方的名字。上面截图那个画面我怎么没有显示出来。我用的5.3的版本。求帮助

请问在支持Android studio吗，在上面有成功的吗？