如何使用AnyMap控件创建地图

2025-05-07 19:30:34
推荐回答(1个)
回答(1):

  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设置文件使用这个文件并显示地图,如下所示:

  01
  
  02
  
  03
  
  04
  
  05
  
  06
  
  07
  
  08
  
  09
  
  10
  
  11
  <br>  12<br>  <br>  13<br>  <text>USA Map</text><br>  14<br>  <br>  15<br>  
  16
  
  17
  

  18
  
  19
  
  20
  
  21
  
  22
  
  23
  
  24
  
  25
  
  26
  
  27
  
  28
  
  29
  
  30
  
  31
  
  32
  
  33
  

  34
  
  35
  
  36
  
  37
  

  38
  
  39
  

  复制上述代码,在任意文本编辑器中打开AnyChartTest文件夹中的anychart.xml,并粘贴代码。

  XML结构看起来复杂,但是大多数的标签是自我描述性的,用几个XML语言就可以描述一切:

  在节点我们可以设置一个"Map"情节类型——

  在节点描述了的图表大致如下所示:

  设置地图标题文本:

  1
  <br>  2<br>  <br>  3<br>  <text>USA Map</text><br>  4<br>  <br>  5<br>  
  在设置"states.amap"文件用作源地图(AnyChart包中有很多其它地图——务必看完整个列表):

  1
  
  以不同的颜色设置,并启用所有地图区域的状态标签:

  01
  
  02
  
  03
  
  04
  
  05
  
  06
  
  07
  
  08
  
  09
  
  10
  
  11
  

  将自定义数据添加到地图:

  使用AnyMap你可以附加任何自定义数据到任何地图,然后使用这些数据来着色、标签、工具提示传说和自定义操作,具体的操作请关注另一篇教程:Flash地图控件AnyMap使用教程:将数据附加到地图。

  HTML文件结构

  这是在Web网页上看到地图所需要的最后一个步骤:

  下面是需要粘贴到anychart.html的代码(在任意文本编辑器中打开它,复制粘贴代码):

  view sourceprint?
  01
  
  02
  
  03
  
  04
  
  05
  
  06
  
  07
  AnyChart Sample Flash Map
  08
  
  09
  
  10
  
  11
  
  12
  
  13
  
  14
  
  15
  
  16
  
  17
  //  18
  
  19
  var chart = new AnyChart( './swf/AnyChart.swf');
  20
  
  21
  chart.width = 600;
  22
  
  23
  chart.height = 450;
  24
  
  25
  chart.setXMLFile('./anychart.xml');
  26
  
  27
  chart.write();
  28
  
  29
  //]]>
  30
  
  31
  
  32
  
  33
  
  34
  
  35
  
  只有粗体文本是html代码,你需要将AnyChart Flash Map嵌入到HTML页面。

  最后

  现在应该在一个web浏览器中上线我们的html页面,在本实例中,我们可以同时使用:

  http //localhost/AnyChartTest/anychart.html

  或者

  C:InetpubwwwrootAnyChartTestanychart.html