Flash地图控件AnyMap创建地图并嵌入到Web页面
AnyMap是一个灵活的用于创建地图的控件,你可以轻松地使用它创建大量的地图,本次的教程将向大家仔细讲解如何创建一个简单的地图,并添加到Web页面的具体步骤。
创建一个Web页面
首先我们需要一个普通的HTML页面,该页面需要包含一个Flash对象,并将它放到web站点下的文件夹中:以下面的结构在IIS wwwroot文件夹中创建AnyChartTest文件夹:
/AnyChartTest
AnyChart.swf
states.amap
/swf
/js
AnyChart.js
anychart.xml
anychart.html
选择地图数据和它的视觉风格
首先需要一些数据来创建地图——一个XML文件(决定图表应该如何显示地图和哪个地图需要显示),Map地图数据文件(包含地图本身)。在这里假设我们想要展示简单的彩色美国地图。
我们吧这张地图放置在states.amap file文件里面,/swf folder. amap文件是储存地图数据的专有格式。
我们需要创建XML设置文件使用这个文件并显示地图,如下所示:
<?xmlversion="1.0"encoding="UTF-8"?>
<anychart>
<charts>
<chartplot_type="Map">
<chart_settings>
<title>
<text>USA Map</text>
</title>
</chart_settings>
<data_plot_settings>
<map_seriessource="states.amap">
<projectiontype="mercator"/>
<undefined_map_regionpalette="default">
<label_settingsenabled="True"/>
</undefined_map_region>
</map_series>
</data_plot_settings>
</chart>
</charts>
</anychart>
复制上述代码,在任意文本编辑器中打开AnyChartTest文件夹中的anychart.xml,并粘贴代码。
XML结构看起来复杂,但是大多数的标签是自我描述性的,用几个XML语言就可以描述一切:
在<chart>节点我们设置设置一个"Map"情节类型——<chart plot_type="Map">
在<chart_settings>节点描述了的图表大致如下所示:
设置地图标题文本:
<title>
<text>USA Map</text>
</title>
在<data_plot_settings>设置"states.amap"文件用作源地图(AnyChart包中有很多其它地图——务必看完整个列表):
<map_series source="states.amap" />
以不同的颜色设置,并启用所有地图区域的状态标签:
<map_seriessource="states.amap">
<projectiontype="mercator"/>
<undefined_map_regionpalette="default">
<label_settingsenabled="True"/>
</undefined_map_region>
</map_series>
将自定义数据添加到地图:
使用AnyMap你可以附加任何自定义数据到任何地图,然后使用这些数据来着色、标签、工具提示传说和自定义操作,具体的操作请关注另一篇教程:Flash地图控件AnyMap使用教程:将数据附加到地图。
HTML文件结构
这是在Web网页上看到地图所需要的最后一个步骤:
下面是需要粘贴到anychart.html的代码(在任意文本编辑器中打开它,复制粘贴代码):
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<title>AnyChart Sample Flash Map </title>
<scripttype="text/javascript"language="javascript"src="./js/AnyChart.js"></script>
</head>
<body>
<scripttype="text/javascript"language="javascript">
//<![CDATA[
var chart = new AnyChart( './swf/AnyChart.swf');
chart.width = 600;
chart.height = 450;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
</body>
</html>
只有粗体文本是html代码,你需要将AnyChart Flash Map嵌入到HTML页面。
最后
现在应该在一个web浏览器中上线我们的html页面,在本实例中,我们可以同时使用:
http://localhost/AnyChartTest/anychart.html
或者
C:\Inetpub\wwwroot\AnyChartTest\anychart.html
完成所有步骤之后,就可以看到如下地图:
