技术开发 频道

使用空间数据类型与Virtual Earth

练习 3: 使用Virtual Earth VEMap 控件

在本练习中,您将向页面中添加一些客户端代码,来将从上面的GeoRSS源中获得的地理信息数据显示在Virtual Earth VEMap 控件当中。VEMap 控件是一个客户端控件,您可以使用JavaScript 代码来对它进行编程。使用客户端代码来编辑VEMap控件的优势在于,您可以简单的构建一个mash-up Web 应用程序,它可以与来自于Internet上多种不同数据源的数据进行集成。

添加代码以显示地图

在 Solution Explorer中,双击Default.aspx ,在设计器中打开它进行编辑。
如果它已经被打开,点击设计器左下方的Source 选项卡,从而查看页面的HTML源代码。
在add a reference to the Virtual Earth map control注释下方,添加下面的HTML代码。

<script type="text/javascript"              src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6">
</script>

在GetMap 函数当中,在Display the map control注释下方,添加下面的代码。

map = new VEMap('mapDiv');
map.LoadMap();

保存 Default.aspx。
在Solution Explorer中,右击Default.aspx,然后点击Set as Start Page。
在Debug 菜单中,点击Start Debugging。
当Internet Explorer 打开后,确认地图已经被显示出来。

使用地图中内置的控件来进行移动浏览,放大,缩小,以及更改视图。
关闭Internet Explorer。

添加代码并在地图中显示所有商店

在 Default.aspx中,在ShowAllStores 函数中,在Import GeoRSS feed of store data, and call onAllStoreLoad function when the data is loaded注释下方,添加下面的代码。

var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS,
".
/Stores.georss");
map.ImportShapeLayerData(veLayerSpec, onAllStoreLoad, true);

注意: 这段代码将会把Stores.georss页面的请求结果发送到Web页面当中。这个请求将会使用HTTP Handler 进行处理,它使用前面练习中输入的代码来实现,并返回包含所有商店的GeoRSS源。然后,该代码将GeoRSS数据加载为一个新的层,并显示在地图控件当中,并且当数据被成功加载到地图当中后,调用onAllStoreLoad 函数。

在onAllStoreLoad 函数当中,在Count the shapes returned 注释下面,添加下面的代码。

var storecount = feed.GetShapeCount();
document.getElementById("Info").innerHTML
=
'There are ' + storecount + ' stores.';

保存 Default.aspx。
在Debug 菜单中,点击Start Debugging。
在Internet Explorer 打开后,点击Show All Stores ,然后确认所有的商店都被显示在地图中,并用一些“别针”来显示。
关闭Internet Explorer。

添加代码并在地图中显示特定位置附近的商店

在 Default.aspx中,在ShowNearbyStores 函数中,在Use the VEMap.Find method to find the location entered by the user and call the onFind function to process the results注释下方,添加下面的代码。

results  = map.Find( null,
   document.getElementById("SearchLocation").value,
  
null, null,null, 1, false, false, false, true,
   onFind)

注意: 这段代码使用Virtual Earth 来查找一个基于用户输入的文本查找的特定位置。当一个或多个位置被查找到后,代码会调用OnFind 函数。

在onFind 函数当中,在define the search point as the latitude and longitude of the first place in the results注释下面,添加下面的代码。

var SearchFromPoint = places[0].LatLong;

注意: 这段代码处理结果中发现的第一个位置,并将这个用逗号分隔的字符串提取出经度和纬度值。
在onFind 函数当中,在Import GeoRSS feed of stores near the search point, and call onNearbyStoresLoad function when the data is loaded注释下面,添加下面的代码。

var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS,
                                ".
/Stores.georss?SearchFrom=" + SearchFromPoint);
map.ImportShapeLayerData(veLayerSpec, onNearbyStoresLoad, true);

注意: 这段代码将发送请求到Stores.georss 页面,并在请求中添加SearchFrom 参数,这个参数中包含了搜索区域的经度和纬度值。这个请求由上面我们实现的HTTP Handler 进行处理,并返回包含搜索区域及其中所有商店位置的GeoRSS源。这段代码的后面将GeoRSS数据加载到到地图控件中,显示为一个新的层,然后在加载完成后调用onNearbyStoresLoad 函数。
在 onNearbyStoresLoad 函数中,在Don't count or show the first shape (the search location)注释下面,添加下面的代码。

var storecount = feed.GetShapeCount()-1;
feed.GetShapeByIndex(
0).HideIcon();
document.getElementById("Info").innerHTML
=
'There are ' + storecount + ' stores.';

在 onNearbyStoresLoad 函数中,在Show the info for the search area when the results first load注释下面,添加下面的代码。

map.ShowInfoBox(feed.GetShapeByIndex(0));

注意: 这段代码显示了搜索区域的信息提示气泡。
保存 Default.aspx。
在Debug 菜单中,点击Start Debugging。
在Internet Explorer 打开后,输入Seattle ,然后点击Show Stores Near ,然后确认所有搜索出来的商店将会在地图上显示为一些别针,并会使用一个圆形显示搜索区域。
重复搜索过程,输入San Francisco 和90210。
关闭Internet Explorer。
关闭Visual Studio。
关闭Virtual PC 并不要保存任何更改。
 

0
相关文章