平面图转换为2.5D（三）

原文发布时间：2010-06-27

作者：毛毛虫

这篇文章就是关于如何把这种类似3D的建筑物图层在Google Maps或Bing Maps的平台上显示。

下图显示了建筑物图层在Bing Maps中显示的情况。

（图片已丢失）

Google Maps对于一些城市，有它自己的类似的建筑物图层。

步骤如下：

首先按平面图转换为2.5D（一）中提到的方法将2D图层转换为能以3D效果显示，方法如下：

平面图转换为2.5D（三）

下面的方法可以参考FME中的栅格数据操作之十三——生成应用于网络制图平台的瓦片中提到的如何把数据发布到网络地图平台上。

这里为了根据显示级别分别设置建筑物栅格化时的单元格大小，可以如下操作：

在获取了显示的最大（_max_zoom）、最小级别后（_min_zoom），使用转换器ExpressionEvaluator计算极差，也就是设置的显示的级别层数，然后使用Cloner转换器根据这个级别层数复制数据，记录复制的数目属性，这时候就可以使用再次使用ExpressionEvaluator转换器并结合ValueMapper转换器，根据显示级别来分别设置栅格化时的单元格大小了。过程如下：

平面图转换为2.5D（三）

每个转换器的设置依次如下：

（图片已丢失）

平面图转换为2.5D（三）

（图片已丢失）

当需要的参数全部设置后，可以使用XMLTemplater来生成HTML文件，参考代码如下：

<html>

<head>

<title>{fme:get-attribute("_html_title")}</title>

var map = null;

var tileLayer;

function GetMap()

{{

map = new VEMap('myMap');

map.LoadMap(new VELatLong({fme:get-attribute("_center_y")},{fme:get-attribute("_center_x")}),{fme:get-attribute("_display_zoom_level")},'r' ,false);

GetTiles();

}}

function GetTiles()

{{

var bounds = [new VELatLongRectangle(new VELatLong({fme:get-attribute("_ymax")},{fme:get-attribute("_xmin")}),

new VELatLong({fme:get-attribute("_ymin")},{fme:get-attribute("_xmax")}))];

var tileSourceSpec = new VETileSourceSpecification("{fme:get-attribute("_layer_name")}", "{fme:get-attribute("_path_to_images")}");

tileSourceSpec.NumServers = 1;

tileSourceSpec.Bounds = bounds;

tileSourceSpec.MinZoomLevel = {fme:get-attribute("_min_zoom_level")};

tileSourceSpec.MaxZoomLevel = {fme:get-attribute("_max_zoom_level")};

tileSourceSpec.Opacity = {fme:get-attribute("_opacity")};

tileSourceSpec.ZIndex = 100;

map.AddTileLayer(tileSourceSpec, true);

}}

function ShowTileLayer()

{{

map.ShowTileLayer("{fme:get-attribute("_layer_name")}");

btnHide.disabled=null;

btnShow.disabled="disabled";

}}

function HideTileLayer()

{{

map.HideTileLayer("{fme:get-attribute("_layer_name")}");

btnHide.disabled="disabled";

btnShow.disabled=null;

}}

</script>

</head>

<H3>FME and Microsoft Virtual Earth</H3>

<P>This is an example showing results produced by <a href='http://www.fmepedia.com/index.php/VirtualEarthTiler'>VirtualEarthTiler</a> transformer and <a href='http://www.fmepedia.com/index.php/VirtualEarthHTMLCreator'>VirtualEarthHTMLCreator</a> custom transformer.</P>

<P><a href='http://www.microsoft.com/virtualearth/'>More information about Microsoft Virtual Earth</a>.</P>

<P><a href='http://dev.live.com/virtualearth/sdk/'>Virtual Earth Interactive SDK</a></P>

</body>

</html>

当然需要使用WebMapTiler转换器生成瓦片，完成切片后，打开生成的HTML文件，就可以看到类似文章开头显示的图片的效果了。

平面图转换为2.5D（三）

相关推荐