Flash地图控件AnyMap创建地图并嵌入到Web页面

2026-03-05 14:54:40

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

完成所有步骤之后,就可以看到如下地图:

Flash地图控件AnyMap创建地图并嵌入到Web页面

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢