定制 HTML VIEWER

第一章 HTML VIEWER 介绍
HTML VIEWER 是 ArcIMS 默认安装的一组软件,它定义了你的 ArcIMS Web 站点的图形外
观和功能。通过使用 HTML 标记,大量的 JavaScrip...
Javascript 子目录下主要存放创建 HTML Viewer 的 JavaScript 函数库。这些 JavaScript 文件涵
盖了大部分 HTML Viewer 的通用操作。第二章中的“定制 HTML Viewer”有一个对
Jav...
下元素:主地图显示、鹰眼图显示、图层列表、工具栏以及一些其他的元素。一些框
        架可以被删除,客户端要求 MapFrame 和 PostFrame 必须显示。
    4. MapFrame.htm 和 PostFrame.htm ...
MapFrame 和鹰眼图
MapFrame.htm 定义了 MapFrame 的内容。MapFrame 显示地图图片。当主地图框架加载时,
它设置了大量的附加地图参数并且加载了大量的 JavaScript 文件以便客户端能实现更多的功
能。阅...
HTML 客户端框架布局
以下图表显示的是默认的 IE 浏览器中的客户端布局(在 Netscape 中略有不同)。每一块区域都
有它的所在框架的名字和填充该框架的 HTML 文件的名字以及它的像素尺寸。该图表并不
意在缩放显示某客户端而是为我们...
执行重定向任务
你可以通过修改 ArcIMS 的默认 servlet connector 以便其可以访问在其他 web 服务器上的服务,
这样便可以将请求重定位到在其他的 Web 服务器上的 servlet connector 上了。从其他 W...
•   使用下面的步骤,复制一个 ArcIMS——Java Connector WEB-INF 目录到你创建的 HTML
    客户端所在的顶级目录下。
    1. 导航至一个 ArcIMS Java Connector WEB-INF 目...
•   重启 servlet 引擎。

第二章 定制 HTML 客户端
如果你已经使用过 ArcIMS 几次,你可能已经对由 ArcIMS Designer 创建的 HTML 客户端比
较了解。默认的 HTML 客户端可以进行大量定制以达到你想...
点。

Returning unique values only
你可以修改 ArcIMSparam.js 文件来返回在“获取查询表单”的示例中的唯一值。
1. 在 arcIMSparam.js 文件中,设置 onlyUniqueSamples...
var ScaleBar2Round = quot;1quot;;
    var ScaleBar2Size = quot;9quot;;
    var ScaleBar2Width = quot;5quot;;
    var Scale...
content ='<img name=”ovImage” src=”images/locMap.gif” border=2 width=1 height=1>';
createLayer(“ovLayer”,-10,-10,1,1,false...
document.writeln('</FRAMESET>');
    </FRAMESET>
    <FRAMESET COLS=quot;180,*quot; FRAMEBORDER=quot;0quot; BORDER=0 FRAME...
Replacing the animated graphics
HTML 客户端当它在获取地图图片和数据时使用一组动态图元来给用户反馈。获取地图和获
取数据的对应的图元都在 MapFrame.htm 中涉及到了。你可以使用一组图元编程实现创建一...
URL 必须是经过编码的。
                                       ('CITY=”New York” 'becames 'CITY%20%3D%20%22New
                     ...
置和尺寸大小。

Changing the properties of the copyright element
如果 drawCopyright 值为 true 则地图上将显示版权信息。通过修改以下变量:CopyrightFont,
Cop...
n</OBJECT>n</LAYER>n';

Modifying attribute data display

Limiting the fields displayed
通过改变 selectFields 值为你想显示的字段,来控制选择集...
段是在 fieldAliasList 中定义的。但是为了正确的处理数据库的请求查询表达式还是通过使用
原始字段名进行构造的。

Changing the number of records listed at one time
虽然地图将显示所...
Changing the color of the box used for zoom area
将变量 zoomBoxColor 设置为一个表示颜色的十六进制数或者颜色名。默认为红色,以下例
子将颜色改为蓝色。
Var zoomBoxColo...
}
          }


          function goPrint() {
                 alert(quot;Remember to set your print layout to Landscape ...
r = 0.55;
                 //document.thePrintForm.width.value = 600;
                 //document.thePrintForm.height.valu...
</HEAD>


<BODY BGCOLOR=quot;Whitequot; style=quot;font-family:Arial,sans-serif; color:blackquot;>
<FORM onsubmit=quot;goP...
<INPUT name=quot;mapSizequot; type=quot;radioquot; value=quot;esizequot; onClick=quot;setPrintSize('esize');quot;
ID=quot;...
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot;>

<html>
<head>
<title>Printing Information</title>...
You should choose a printer resolution setting that matches the printer you will
be using.
This will ensure the best map i...
var printOVURL=quot;quot;;

var printLegURL=quot;quot;;

var legVis2=false;

/*

*****************************************...
if (aimsLegendPresent) legendVisible=true;

     // BB: set print size to input values

     if (w != quot;quot;) printWid...
var tempLegH = legHeight;

               legWidth = parseInt(printWidth/4);

               legHeight = parseInt(printWid...
drawOVExtentBox=tempDraw;

     i2Width=tempWidth;

     i2Height = tempHeight;

     sendToServer(imsOVURL,theString,102)...
printTitle + '</TH>');   // BB: scale title

     Win1.document.writeln(' </TR>');

     Win1.document.writeln(' <TR>');

...
Win1.document.writeln(' </TR>');

     Win1.document.writeln('</TABLE>');

     Win1.document.writeln('</B></FONT>');

   ...
你打算使用一个”selected”和”unselected”工具图片,在默认的客户端中,有一个命名习惯,
在该习惯中,在其名称后附加_1 的为选中时的图片,附加为_2 的是为选中时的图片命名。
这些只会在用户修改之后并激活该工具时才会发生。这些...
差值。默认为2.
Var pixelTolerance = 5;

Linking to the first visible feature hyperlink on a map
在默认客户端中,Hyperlink 工具只能针对当前激活层工作。...
I. 在文本编辑器中打开 ArcIMSparam.js 文件。
II. 找到以下行:
         var imsQueryURL='';
III.修改以上代码为包含已存储查询层的 image 服务。出于性能的考虑,该服务只能包含一个
  ...
上图是整个 ArcIMS 的架构图,包含了应用服务器和空间服务器,参考 ArcIMS 在线帮助系
统中关于架构的话题。
上面的描述还是有一点笼统。为了了解这个全过程,需要添加两外两个部分到该图表中——
当鼠标单击时(调用 javascript ...
What happens when the mouse is clicked?
这个图表表达了通过鼠标单击实现地图放大和标识操作的过程。包含了每个步骤中调用的
JavaScript 函数,当请求被写入时,请求发送时(sendToServer),...
The request
用户选择某个操作,某函数便组织一个合适的 ArcXML 请求。然后由在 MapFrame 页面中的
sendToServer 函数将该请求传递给 PostFrame 页面,在该页面更新在 PostFrame 表单中的输入...
<INPUT TYPE=quot;Hiddenquot; NAME=quot;ArcXMLRequestquot; VALUE=quot;quot;>
<INPUT TYPE=quot;Hiddenquot; NAME=quot;JavaScr...
<!---<input type=quot;Hiddenquot; name=quot;Formquot; value=quot;Truequot;>--->
<INPUT TYPE=quot;Hiddenquot; NAME=quot;Arc...
Map units
客户端从 GET_SERVICE_INFO 响应中获取地图单位。全局变量 MapUnits 决定了该值。当
地图单位未知的时候该值在加载服务时非常重要,比如在 Generic,JavaPost,和 MultiService
...
安装选项进行安装,该安装选项默认会安装示例。如果你采用的是制定安装请参考下面的详
细指导。

Basic Map
说明:
这个示例客户端演示了一个包含简单地图显示,缩放,和漫游功能的实现。放大和漫游是通
过不同的接口实现,包含有符号的按钮(工具...
   AimsExtractResource.js—字符文本接口。

Generic Map
说明描述:
这个示例客户端主要演示了在一个服务器上运行的所有地图服务的下拉列表并允许用户选择
其中之一运行。同样有一个工具允许用户设置众多参数,办阔...
Java Post
描述说明:
这个示例客户端演示了在 HTML 客户端使用 Java applet。Applet 通过 ArcXML 与 ArcIMS 应
用程序服务器进行交互而不使用 ArcIMS Servlet Connector。这个 ...
PNG8 格式,因为必须有一个过渡的背景用来在另一个服务下显示另外一个服务。在
aimsMultiServiceParam.js 文件中,topMapServiceURL 变量可以用于定义顶部地图服务。同样
也可以用于显示指南针,比例尺和版权信...
文件。ColdFusion 文件集有一个.cfm 后缀;ASP 文件集有一个.asp 后缀。
Parcels 示例使用了以上的 JavaScript 函数列表中的所有文件,另外还有以下的文件:
   AimsDB.js—用来实现将图层链接到外...
Upcoming SlideShare
Loading in …5
×

Arc Ims Html Viewer Refrence

1,383 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,383
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Arc Ims Html Viewer Refrence

  1. 1. 定制 HTML VIEWER 第一章 HTML VIEWER 介绍 HTML VIEWER 是 ArcIMS 默认安装的一组软件,它定义了你的 ArcIMS Web 站点的图形外 观和功能。通过使用 HTML 标记,大量的 JavaScript 和 DHTML,该客户端为 Web 站点的地 图、图例、工具栏、鹰眼图和其他图形元素提供框架。HTML,JavaScript 和 DHTML 正越来 越地被 Web 开发人员使用,用来增加他们设计网页的可变性和可交互性。 默认的 HTML VIEWER 是一组你在使用 ArcIMS Designer 设计你的站点时自动生成 HTML 页 面和 JavaScript 文件的集合。虽然 Designer 给你提供了很多的设计选项,你可能需要更多的 选择。通过定制默认的 HTML VIEWER,你可以获得更多的选择,比如说,你可以:  插入你自己公司的 logo.  添加一些特有的功能  改变框架布局  修改工具栏  改变图形外观 HTML VIEWER 十分谨慎地设计和测试,以便它的元素显示和功能行为能适应于大量的不 同版本 Web 浏览器。对 HTML VIEWER 的修改可能影响其与浏览器中的融合。 这份指导讲解了定制 HTML VIEWER 的基本原理并提供了一个关于 ArcIMS 可用函数库的参 考。该指导主要面向对 ArcIMS viewer 有一定了解,有一定 HTML 开发经验并熟悉 JavaScript 的人员。 HTML VIEWER 文件集以及其组织方式 ArcIMS Designer 会创建一些输出文件,包括 HTML 和 JavaScript 文件,用来构建 HTML VIEWER。在这一章,主要讲解其创建文件的组织方式。HTML 文件总是用于生成网页内容, 通过 JavaScript 函数实现与用户的交互。 目录组织结构 当你通过 Designer 使用默认 HTML Viewer 创建一个 Web 站点时,一系列的目录和文件被创 建在你当你安装 ArcIMS 时指定用来作为 Web 站点的存储目录下。Web 站点的目录下包含了 一组 HTML 文件和参数文件,和两个子目录—javascript 和 images 目录。
  2. 2. Javascript 子目录下主要存放创建 HTML Viewer 的 JavaScript 函数库。这些 JavaScript 文件涵 盖了大部分 HTML Viewer 的通用操作。第二章中的“定制 HTML Viewer”有一个对 JavaScript 文件的概述,第三章中“HTML Viewer JavaScript 库”有对 JavaScript 的详细功能 参考介绍。 images 子目录下主要存放在客户端页面中使用到的一些图片,如按钮、图标和 logo 等。在 建立一个新的站点时,你可以考虑替换这些图片来创建一个你的组织或部门风格外观。 你可能注意到了另一个子目录—Meta-inf。这个目录是在你通过 Designer 建立一个标准的客 户端的时候创建的,但是对于定制客户端它不是必须的。你可以删除该子目录来减少该客户 端所占的存储空间。请注意,删除该子目录会减少整个目录所占的空间但是并不影响客户端 的加载(并不会加快浏览器加载该客户端的速度)。 ArcIMSparam.js 参数文件 在 web 站点所存放的目录下有一个名为 ArcIMSparam.js 的文件。该文件包含了一组关于 Web 站点的外观和行为的 JavaScript 变量。通过修改该文件中的变量的值可以进行大量的定 制来达到你要的效果。该文件中大部分通用的可变项目是关于站点的工具栏的显示和操作、 图层控制、颜色和图形。阅读第二章“定制 HTML 客户端”以获得更多关于定制 ArcIMSparam.js 文件的信息。 HTML 文件 总共大约有 30 个 HTML 文件用于定义 HTML 客户端的页面内容。一些用于初始化客户端, 一些用于定义客户端的框架内容,其他的用于加载表单并显示数据。 文件初始化的顺序 当打开一个由 Designer 创建的 HTML 客户端,文件是按一定顺序的打开和存取的。其顺序 如下:客户端初始化、启动或预载。下面的步骤按照顺序描述了该初始化顺序。你可以通过 在参数文件中指定你想要加载的图层而不通过解析 GET_SERVICE_INFO 响应来减少客户端 启动的时间。阅读第二章中关于请求/响应循环一节了解更多的信息。 1. Default.htm 是你网站的入口。这个文件检查客户的浏览器是否是 Microsoft Internet Explorer 或者 Netscape,版本高于 5.0(在 Macintosh 机器上的 IE 需高于 5.1),或者 其他 5.x 版本的可兼容的浏览器如 Mozilla 或者 Opera。如果是所需版本,加载 Run.htm,该文件定义了两个框架给 Authorize.htm 和 jsForm.htm。如果用户浏览器兼 容,则加载 CannotRun.htm 并提示用户。 2. Authorize.htm 检查安全控制机制是否已经安装。如果已经安装,则打开登录对话框, 要求用户登录。Authorize.htm 也调用了两个 JavaScript 文件:ArcIMSparam.js 和 aimsResource.js.发送一个 GET_SERVICE_INFO 请求来获取主地图。如果鹰眼图使用 的是另外一个服务,则单独再发送一个 GET_SERVICE_INFO 请求来检查用户是否有 使用该服务的权限。ArcIMSparam.js 包含了客户端的大量参数,包括用于主地图和鹰 眼图服务的 URL。AimsResource.js 包含了大量由消息、按钮和标题显示的文字。 3. 加载 viewer.htm 页面。Viewer.htm 定义了客户端的框架布局。这些框架通过将网页分 成多块以提供布局的结构。每一个框架都由一个 HTML 文件填充。框架主要针对以
  3. 3. 下元素:主地图显示、鹰眼图显示、图层列表、工具栏以及一些其他的元素。一些框 架可以被删除,客户端要求 MapFrame 和 PostFrame 必须显示。 4. MapFrame.htm 和 PostFrame.htm 随后加载至其合适的框架中。 用于加载并显示数据的文件 以下的文件在表单加载或者显示时被调用:  buffer.htm  query.htm  storedquery.htm HTML 客户端框架 熟悉 HTML 框架对于理解构成网站的文件之间的关系很重要。每个框架只显示一个 HTML 页面与其他的其他框架整体创建该站点。Viewer.htm 主要定义了由 ArcIMS Designer 创建的 所有框架的布局,如下图: TopFrame Top.htm 定义了 TopFrame 的内容。TopFrame 穿越整个客户端的顶部并且显示其标题文本(在 viewer.htm 中设置的)和 ArcIMS 的 logo。
  4. 4. MapFrame 和鹰眼图 MapFrame.htm 定义了 MapFrame 的内容。MapFrame 显示地图图片。当主地图框架加载时, 它设置了大量的附加地图参数并且加载了大量的 JavaScript 文件以便客户端能实现更多的功 能。阅读第三章“HTML 客户端 JavaScript 函数库”了解一个完整的 JavaSctript 文件列表。 鹰眼图被包含在 MapFrame 之中。它由一个动态的 CSS 样表(在 IE 浏览器中)或者层(在 Netscape 浏览器中)定义在 MapFrame.htm 中。在工具栏中的鹰眼图工具可以控制鹰眼图可视 的开关。 比例尺栏以一个元素的形式覆盖显示在地图之上。详细信息查看第二章“定制 HTML 客户 端”。 ToolFrame Toolbar.htm 定义了 ToolFrame 的内容。ToolFrame 包含了一组用于选择当前客户端工具的按 钮。Toolbar.htm 先检验在 ArcIMSparam.js 文件中设置的关键参数值,然后基于被选中的工具 使用 JavaScript 动态地创建工具栏。 TOCFrame TOCFrame.htm 定义了 TOCFrame 的内容。TOCFrame.htm 在初始化时便加载,然后 toc.htm 才被写入用以定义 TOCFrame 中的层列表和图例显示。当显示层列表时,toc.htm 只列出在 当前比例尺下可见的图层。当比例尺改变时,比如当你缩小地图显示时,toc.htm 将重新加 载。 ModeFrame ModeFrame.htm 定义了 ModeFrame 的内容。ModeFrame 显示了由当前工具定义的指针样式。 当单击选择了不同的工具,该样式发生改变 ModeFrame.htm 重新加载。 TextFrame Text.htm 是 TextFrame 内容的一个占位符。TextFrame 的内容基于工具的选择动态写入。它主 要用于显示从 ArcIMS 空间服务器返回的表单和信息。比如,TextFrame 显示 Identify 工具查 询的结果或者查询工具返回的表单数据。其他的 HTML 文件,如 findForm.htm,addmatch.htm,setUnits.htm 和 select.htm,在其相关的工具被选中时填充该框架。 PostFrame JsForm.htm 定义了 PostFrame 的内容。该表单用于和 ArcIMS Servlet Connector 的交互。 PostFrame 隐藏显示,包含了隐藏的表单---Post Form。阅读第二章“定制 HTML 客户端”中 的“客户端如何与服务器交互”获得更多的 ArcIMS Servlet Connector 连接的信息。 BottomFrame Bottom.htm 定义了 BottomFrame 的内容。BottomFrame 紧邻 ModeFrame 显示,沿着客户端的 底部。
  5. 5. HTML 客户端框架布局 以下图表显示的是默认的 IE 浏览器中的客户端布局(在 Netscape 中略有不同)。每一块区域都 有它的所在框架的名字和填充该框架的 HTML 文件的名字以及它的像素尺寸。该图表并不 意在缩放显示某客户端而是为我们定制一个客户端提供指导。 一个 Web 站点可以被分为多行多列—像上面的例子一般--也可以只有一两个框架。框架的尺 寸大小以及其位置完全由你决定。首先确认在你的 Web 站点中需要的框架,然后分配必要 的空间。 多主机 通常,由 Designer 创建的 Web 站点只能访问在其页面文件所在的 Web 服务器上所安装的服 务。也就是说,URL 定义了其 Web 服务器所在的主机和服务。比如说:如果网页存放 在my_computerWebsite 目录下,则其客户端的 URL 为 http://my_computer/Website/my_Website,其服务的 URL 为 http://my_computer/servlet/com.esriesrimap.Esrimap?Service=my_service。定义该服务的变量名 为 imsURL,可以在 ArcIMSparam.js 中找到。 当你想将某一个 ArcIMS 服务运行在一个不同的服务器主机上,你必须做好以下措施之一以 防 JavaScript 的安全限制,因为其只允许访问某一个主机:  预定重定向任务---这些任务使得 ArcIMS 服务器允许使用多主机并且通过主机名区分它们, 请求会被放松或重定向到合适的主机。你可以声明使得所有的主机都可以接受重定向请 求。当你激活重定向功能时,你不能使用身份验证确认用户的身份,你不再能限制访问 了。  使用 Java Connector---使用这个 connector 可防止执行重定向任务但是要求安装 Java Connector。在 Java Connector 中你可以使用身份验证,但是你必须单独为之开发代码。 (没有任何与 HTML 客户端和 Java 客户端身份验证的示例代码)
  6. 6. 执行重定向任务 你可以通过修改 ArcIMS 的默认 servlet connector 以便其可以访问在其他 web 服务器上的服务, 这样便可以将请求重定位到在其他的 Web 服务器上的 servlet connector 上了。从其他 Web 服 务器上的 connector 返回的相应被打包在一个表单页面中(jsForm.htm)中并将返回给客户端。 这就允许网页和原主机交互并表现为在本地进行处理。如果想更多了解在客户端和服务器间 发送的信息请阅读第二章“定制 HTML 客户端”中“客户端如何与服务器交互”一节。 HTML 客户端的重定向要求改变 ArcIMS 默认的 servlet connector 属性。找到 Esrimap_prop 文 件(位置由你的 Web 服务器和 servlet 引擎决定),在后面追加两行,用实际可用主机名值 替换 host1,host2 等。 redirect=true redirectableHosts=host1,host2,host3,host4 保存文件,然后重启你的 servlet 引擎。 第一行表明 Servlet Connector 可以重定向。第二行列出了所有允许重定向的主机。 如果有请求重定向的主机未在 redirectableHosts 列表之中则会出现一个错误。使用下面的 语句可以使得可重定向至所有的主机: redirectableHosts=* 使用 Java Connector 虽然 Java Connector 的主要设计目的是使得用户能通过 Java 或 JSP 建立和 ArcIMS 服务一起 相结合的应用程序,但是你仍然可以使用它和 HTML 客户端来:  防止在多主机配置中出现重定向现象。Java Connector 不违背 JavaScript 只允许访问单一主 机的安全策略限制。  防止最终用户通过 ArcMap 访问你的源数据。一个使用 ESRI 的 ArcMap 应用程序的用户 可以下载在 ArcIMS 服务中使用的源数据。为防止 ArcMap 用户访问这些数据,你可以使 用 Java Connector 和 HTML 客户端。使用 Java Connector(或其他 Connector)允许你从 Web 服务器上删除 ArcIMS 的 servlet connector。ArcMap 用户不能直接访问 ArcIMS Servlet Connector 便不可以访问源数据。如果你使用 Java Connector 并删除 ArcIMS Servlet Connector ,所有使用 ArcIMS Servlet 的客户端如:ArcMap,ArcPad,和 ArcExplorerTMJava,将 不再能访问 ArcIMS 服务。 不论你出于什么原因选择使用 Java Connector,你都要进行同样的安装和发布过程。如果你 想使用该配置选项进行身份验证的话,你必须自己开发 Java 或者 JSP 代码。 默认情况下,HTML 客户端使用 HTML 表单(viewer.htm 文件指向 jsForm.htm)与 ArcIMS 默 认 servlet connector 进行交互。 为 HTML 客户端安装 Java Connector 身份验证注记:一旦你在 HTML 客户端中使用 Java Connector 并移除了原有的 Servlet Connector 你便不可以通过以下的执行方式进行身份验证。客户端依然尝试通过服务器上 run.htm 访问 Servlet Connector 来进行身份验证。如果 Servlet Connector 被移除,客户端停止 该处理。 • 如果你还没有准备好,现在通过 Designer 创建一个 HTML 客户端.
  7. 7. • 使用下面的步骤,复制一个 ArcIMS——Java Connector WEB-INF 目录到你创建的 HTML 客户端所在的顶级目录下。 1. 导航至一个 ArcIMS Java Connector WEB-INF 目录。你可以使用 ArcIMS 超级管理员服 务(Administrator)的 WEB-INF 目录,或者你可以使用 ArcIMS 安装向导安装一个 Java 和 JSP 示例应用程序然后使用示例程序中的一个 WEB-INF 目录。默认的 ArcIMS Administrator 服务中 WEB-INF 目录被安装在 ArcIMS 安装目 录ArcIMSAdministratoresriadmin 目录下。 2. 复制该 WEB-INF 目录。 3. 进入你创建的 HTML 客户端所在的顶级目录,将 WEB-INF 目录粘贴至此。在 Windows 2000 中图示如下: • 在你创建的 HTML 客户端的顶级目录中,找到 viewer.htm 文件。 • 使用某文本编辑器打开 viewer.htm。 • 找到 connectorType 变量名。 • 将其值从 Servlet 改为 JSP,如下: var connectorType = “JSP”; • 保存并关闭 viewer.htm。 • 导航至 ArcIMS 安装向导。默认该向导安装在 ArcIMS 安装目 录ArcIMSDocumentionInstall.htm。 • 发布你的 HTML 客户端: 打开 ArcIMS 安装向导的第四步导航至“配置你的 ArcIMS adiministrator 服务 Web 服务器 ”选项。依照该选项的介绍进行配置。发布你的 HTML 客户端过程和发布 ArcIMS Service Adiministrator 一样,除非你要使用你创建的 HTML 客户端的位置和目录名替代你 创建的 Service Administrator 位置和目录名。
  8. 8. • 重启 servlet 引擎。 第二章 定制 HTML 客户端 如果你已经使用过 ArcIMS 几次,你可能已经对由 ArcIMS Designer 创建的 HTML 客户端比 较了解。默认的 HTML 客户端可以进行大量定制以达到你想要的站点外观风格。 定制 HTML 客户端的过程中,你主要是和 ArcIMSparam.js 文件和一组 JavaScript 函数打交道。 即便你是个 JavaScript 新手,你仍然可以通过修改 ArcIMSparam.js 文件完成大量的定制。 在本章你将学到如何:  完成通用的定制工作  观察客户端与服务器之间的交互  使用 HTML 客户端示例程序进行定制 Working with ArcIMSparam.js 当你准备创建一个定制的 Web 站点时,ArcIMSparam.js 文件可能是将修改的第一个文件。 ArcIMSparam.js 文件在 Web 站点的根目录之下并且具有良好的文档结构。它包含了众多的全 局变量来定义 Web 站点的外观和行为,你可以通过修改这一系列的变量进行大量的定制。 需要了解这些变量的详细描述请阅读第三章“HTML 客户端 JavaScript 函数库”。 所有的变量可以直接修改或者通过 DHTML 来制作出一个用户化的外观。ArcIMSparam.js 文 件包括但不限于用来完成以下工作的变量:  改变服务和地图的范围  设置初始显示时的图例  在附属层上定义指南针和版权文字信息  定义显示的属性字段  改变工具和工具栏  返回唯一值  促发查询语句  显示辅助比例尺条 以下的内容向你展示如何通过修改 ArcIMSparam.js 文件来对客户端进行修改。变量名均使用 斜体字表示。所有的改变均是针对 ArcIMSparam.js 文件除非另有说明。 CheckParams function ArcIMSparam.js 包含了一个名为 checkParams 的函数,该函数在客户端加载所有文件之后启 动。该函数检验各框架和函数文件是否存在,关键变量的值并更新一些参数。 Refreshing your Web site to reflect changes 当你修改了 JavaScript 或 HTML 文件中的变量,并想查看其修改后的结果,你可能需要重启 你的 Web 服务器,关闭浏览器并清楚 IE 缓存,或者简单的刷新该站点。这些都取决于你使 用的 Web 服务器和它们的配置。这个使得这些文件被重新读入并且将所有的改变并入该站
  9. 9. 点。 Returning unique values only 你可以修改 ArcIMSparam.js 文件来返回在“获取查询表单”的示例中的唯一值。 1. 在 arcIMSparam.js 文件中,设置 onlyUniqueSamples 的值为“true”。你可能需要通过修改 nuberDataSamples 的值为更高的一个值来增加返回的样本值数量。这个值是所有返回值的 总数,不是唯一值的个数。 var onlyUniqueSamples = true; //查询是否区分大小写? //数据样本数从查询表单中检索获得 var numberDataSamples = 50; Allowding queries to not be case-sensitive 你可以设置查询区分大小写。在 ArcIMS 标准和定制的 Java 客户端和 ArcExplorer 中默认查 询都是区分大小写的。 在 arcIMSparam.js 中,设置 queryCaseInsensitive 值为 true。 var queryCaseInsensitive = true; Displaying a second scalebar 你可以显示一个辅助比例尺条。默认情况下,主要比例尺条的单位被设置为米,而辅助比例 尺条的单位是千米。辅助比例尺条的单位值不能通过修改 ArcIMSparam.js 文件来进行修改。 辅助比例尺条的单位取决于主要比例尺条的单位。这个依赖关系不可以被改变,其工作方式 如下: 如果主要比例尺的单位被设置为米,客户端将设置辅助比例尺的单位为千米。如果主要比例 尺的单位被设置为千米,则辅助比例尺的单位将设置为米。如果主比例尺单位为英尺,辅助 比例尺单位为米。如果主比例尺为米,则辅助比例尺单位为英尺。 To display a second scalebar • 1 在 arcIMSparam.js 文件中,设置 drawScaleBar2 的值为 true 如下示例: var drawScaleBar2 = true; • 2 设置 ScaleBar2 所需的参数,如下示例: var ScaleBar2Units = quot;KILOMETERSquot;; var ScaleBar2Background = quot;falsequot;; var ScaleBar2BackColor = quot;0,0,0quot;; var ScaleBar2FontColor = quot;0,0,0quot;; var ScaleBar2Color = quot;128,128,128quot;; var ScaleBar2Font = quot;quot;; var ScaleBar2Style = quot;Regularquot;;
  10. 10. var ScaleBar2Round = quot;1quot;; var ScaleBar2Size = quot;9quot;; var ScaleBar2Width = quot;5quot;; var ScaleBar2Precision = 2; Working with services and map layout Changing the service 设置 imsURL 变量值为主地图显示的服务的 URL。 Changing the overview service 设置 imsURL 变量值为在鹰眼图中显示的地图服务的 URL。 Changing the geocode service 设置 imsGeocodeURL 值为地理编码服务的 URL。需要了解更多关于使用 ArcMap Image Services 设置地理编码的信息请参考“使用 ArcMap Image Service 设置地理编码”。 Changing the query service 设置 imsQueryURL 变量的值为查询服务的 URL。需要了解更多关于使用 ArcMap Image Services 设置可存储查询的信息请参阅“使用 ArcMap Image Service 设置可存储查询”。 Removing the overview map 设置 ArcIMSparam.js 文件中 hasOVMap 变量为 false 并将在 MapFrame.htm 的 ovIsVisible 变量 设置为 false。第一个修改将工具从工具栏上移除并禁用从该鹰眼图发送的请求。第二个修改 样式表使得鹰眼图不可见。 Moving the overview map 在默认的 HTML 客户端中,鹰眼图显示在 MapFrame 中主地图的顶部。你可以通过以下的步 骤来声明指定鹰眼图显示在它自己的框架之中: ➢ 1 添加一个名为 OverviewFrame 框架到 viewer.htm 之中。从主题示例目录中如: C:ArcIMSWebsitehtmlviewerThematic 拷贝 overview.htm,,至你的客户端目录的顶级目 录下。 ➢ 2 在 mapFrame.htm 文件中,修改 CSS 样式表中与鹰眼图和范围框相关的几行为如下示例。 如果你没有定制过 MapFrame.htm 文件,这些示例中的粗体文字将表示你必须做的几个的 改变。 //鹰眼图及其阴影 content ='<img name=”ovShadowImage” src=”images/gray_screen2.gif” border=0 width=1 height=1>'; createLayer(“ovShadow”,-10,-10,1,1,false,content); //if((isNav4) || (isIE))clipLayer(“ovShadow”,0,0,1,1);
  11. 11. content ='<img name=”ovImage” src=”images/locMap.gif” border=2 width=1 height=1>'; createLayer(“ovLayer”,-10,-10,1,1,false,content); setLayerBackgroundColor(“ovLayer”,”white”); //鹰眼图的范围框 content='<img name=”zoomOVImageTop” src=”images/pixel.gif” width=1 height=1>'; createLayer(“zoomOVBoxTop”,-10,-10,1,1,false,content); content='<img name=”zoomOVImageLeft” src=”images/pixel.gif” width=1 height=1>'; createLayer(quot;zoomOVBoxLeftquot;,-10,-10,1,1,false,content); content = '<img name=quot;zoomOVImageRightquot; src=quot;images/pixel.gifquot; width=1 height=1>'; createLayer(quot;zoomOVBoxRightquot;,-10,-10,1,1,false,content); content = '<img name=quot;zoomOVImageBottomquot; src=quot;images/pixel.gifquot; width=1 height=1>'; createLayer(quot;zoomOVBoxBottomquot;,-10,-10,1,1,false,content); 其 CSS 层没有被删除(删除将会产生错误)但是被重新调整为一个像素宽一个像素高了。 ➢ 3 在 mapFrame.htm 文件中设置 ovIsVisible 为 true 如下: ovIsVisible = true; ➢ 4 在 arcIMSparam.js 文件中,将 ovMapIsLayer 设置为 false,如下: var ovMapIsLayer = false; 这样在客户端中鹰眼图不再显示在主地图上面(不再显示在 MapFrame 中)并且不影响该 鹰眼图显示时所占用区域的地理坐标的信息表达。 ➢ 5 为鹰眼图创建一个新的框架。打开 viewer.htm 并且添加以下的黑体的代码行。 <FRAMESET ROWS=quot;*,110quot;> <FRAME NAME=quot;MapFramequot; SRC=quot;MapFrame.htmquot; MARGINWIDTH=quot;0quot; MARGINHEIGHT=quot;0quot; SCROLLING=quot;Noquot; FRAMEBORDER=quot;Yesquot; RESIZE=quot;YESquot;> <FRAME NAME=quot;TextFramequot; SRC=quot;text.htmquot; MARGINWIDTH=quot;0quot; MARGINHEIGHT=quot;0quot; SCROLLING=quot;Autoquot; FRAMEBORDER=quot;Yesquot; RESIZE=quot;Yesquot;> </FRAMESET> document.writeln('<FRAMESET ROWS=quot;*,150quot;>'); document.writeln('<FRAME NAME=quot;TOCFramequot; SRC=quot;TOCFrame.htmquot; MARGINWIDTH=quot;0quot; MARGINHEIGHT=quot;0quot; SCROLLING=quot;Autoquot; FRAMEBORDER=quot;Yesquot;>'); document.writeln('<FRAME NAME=quot;OverviewFramequot; SRC=quot;overview.htmquot; MARGINWIDTH=quot;0quot; MARGINHEIGHT=quot;0quot; SCROLLING=quot;Noquot; FRAMEBORDER=quot;Yesquot;>');
  12. 12. document.writeln('</FRAMESET>'); </FRAMESET> <FRAMESET COLS=quot;180,*quot; FRAMEBORDER=quot;0quot; BORDER=0 FRAMESPACING=quot;0quot;> ➢ 6 找到 checkParams()函数改变 ovImageVar 变量的值。这个变量主要涉及显示在鹰眼图中的 图片对象。修改在 MapFrame.htm 中的该变量为在 OverviewFrame.htm 框架中的图片对象, 示例代码如下: ovImageVar = parent.OverviewFrame.document.ovImage; ➢ 7 保存并查看你的站点。鹰眼图应该在其自己的框架之中了。 Changing the starting map extent 设置这四个变量为新的坐标:startLeft,startBottom,startRight,和 startTop。这个设置地图范围 的初始 x,y 坐标。 Displaying the graphic legend at startup instead of the LayerList 层列表通过每个图层前面一个复选框和一个单选按钮显示所有的层。复选框用于指示该图层 是否可视,单选按钮指示某图层被激活。图例是一个用于显示其图层和符号样式的图片。 在 arcIMSparam.js 文件中,设置 showTOC 变量为 false;添加变量 legendVisible,并且在 checkParams 函数中将其设置为 true,示例代码如下: function checkParams(){ legendVisible = true; appDir = getPath(document.location.pathname); } legendVisible 变量在 aimsMap.js 文件中初始设置为 false。你可以到该文件中改变值为 true 获 得同样的结果。 Setting an active layer 当层列表从客户端中移除时,用户便不能再设置激活图层。而激活图层又是一些工具所必须 的,如 Identify 工具。移除图层列表可以为地图赢得更多的空间并且简化了用户登录站点的 界面,但是你必须设置激活图层。 在 arcIMSparam.js 文件中设置 ActiveLayerIndex 为你需要激活的图层的索引值便可以激活某 图层。索引值为 0 对应为第一个(顶级)图层,1 为第二个,如此类推。ActiveLayerIndex 的默 认值为 99。如果索引值大于所有图层书,则将第一个图层设置为激活图层。 在图例中图层的顺序取决于在地图的配置文件中图层的顺序。在这个例子中,customers 图 层被设置为激活图层。在地图的配置文件中,<LAYER>元素的顺序如下: zip,trade80,streets,customers,stores。其索引值分别是 4,3,2,1 和 0。当这些图层在图例中显示时, 正好反过来了,zip 在最底部 index 为 4,stores 在最顶部 index 为 0。如此说来,若要将 custormers 图层设置为激活图层,应做如下设置: var ActiveLayerIndex = 1;
  13. 13. Replacing the animated graphics HTML 客户端当它在获取地图图片和数据时使用一组动态图元来给用户反馈。获取地图和获 取数据的对应的图元都在 MapFrame.htm 中涉及到了。你可以使用一组图元编程实现创建一 个动态图元,你也可以在适当的时候使用静态图片的显示和消失来代替它们。 以下是 MapFrame.htm 中涉及到这些图元的程序代码。这些图元存储在 Web 站点下的/images 目录下。当你代替这些图元你必须修改高度和宽度的参数以匹配你所使用的图元的高宽。 // loading splashs content = '<img name=quot;LoadingDataquot; src=quot;images/loadData.gifquot; width=273 height=30 HSPACE=0 VSPACE=0 BORDER=0 ALT=quot;Retrieving Mapquot;>'; createLayer(quot;LoadDataquot;,loadBannerLeft,loadBannerTop,273,30,false,content); content = '<img name=quot;Loadingquot; src=quot;images/loadMap.gifquot; width=273 height=30 HSPACE=0 VSPACE=0 BORDER=0 ALT=quot;Retrieving Mapquot;>'; createLayer(quot;LoadMapquot;,loadBannerLeft,loadBannerTop,273,30,false,content); 紧跟着<BODY>元素你会发现一组变量。你也需要改变表示高宽的变量 loadBannerLeft 和 loadBannerTop 的值。这些变量是用来将图片定位到页面的中间。 var mWidth = getMapWidth(); var mHeight = getMapHeight(); var loadBannerLeft = parseInt((mWidth - 273)/2); var loadBannerTop = parseInt((mHeight - 30)/2); Passing map parameters in the startup URL 在客户端启动的时候可以传递多个参数给它。JavaScript 函数将解析这些在加载的 URL 中的 实际在 simsMap.js 的参数并将其命名为 getCommandLineParams。这些参数以下面的格式放 进客户端的 URL 之中。 Http://fullSitePath/default.htm?Parameter1=Value&Parameter2=Value2&Parameter3=Value2 可以传递的参数有: Service=MapService 服务名称。代替在 ArcIMSparam.js 中定义的那个服务。 OVMap=OvMapService 鹰眼图服务的名称。代替在 ArcIMSparam.js 中定义的那个 服务。 Box=minX:minY:maxX:maxY 将被显示的范围。坐标由冒号分割。 Layers=01011 可见的图层,从最顶部的涂层开始,0 表示不可见,1 表 示可见。只影响在参数值中列出的图层。该例子中只影响 最顶层的 5 个图层。 ActiveLayer=layerIndex 被设置为激活图层的索引值。 注意:这和地图服务中的图层 ID 不同。这个索引值和它 们在啊客户端内容表中的顺序一样——假设所有的图层都 被列出来了。最顶层的图层索引值为 0。 Query=queryExpression 设置查询表达式。查询表达式在激活图层上执行并且其
  14. 14. URL 必须是经过编码的。 ('CITY=”New York” 'becames 'CITY%20%3D%20%22New %20York%22'.) QueryZoom=Yes 满屏缩放显示由传递的查询表达式选中的要素集。 Extent=Auto 强制客户端获取起点位置和显示范围,代替在 ArcIMSparam.js 文件中设置的起点位置和显示范围。 Use multiple hosts 当你想要在一个安装在不同于你存放站点的主机上的服务器上运行你的 ArcIMS 服务时,你 必须采取措施来防止违反 JavaScript 的只允许访问一个主机的安全限制机制。了解更多的信 息,请阅读本指导的第一章中“Multiple Hosts”一节。 Working with an acetate layer 一个薄膜层可以被想象为在地图上面的一个透明的薄膜。一个薄膜层在地图上显示一些辅助 性信息。HTML 客户端包含多个薄膜层用来显示指南针,版权信息文本和比例尺条。你可以 修改这些元素或者添加一些新的元素。 Controlling layers displayer in Legend and LayerList 为防止某些图层在图层列表和图例中显示,在 ArcIMSparam.js 文件中可以设置 hideLayersFromList 为 true。如果该值为 true,则必须在 noListLayer 数组中创建对应元素。 每一个层都必须声明指定一个元素不论其是否会被隐藏显示,元素值从顶层图层开始从 0 开 始递增。 在下面的例子中,第四个图层将不会在图层列表和图例中显示: // toggle the check of nonlisting of layers in LayerList and Legend // if true, noListLayer array must have an element defined for each layer var hideLayersFromList=true // layers that will not be listed in the LayerList or Legend // Note: This does not affect map display var noListLayer = new Array(); noListLayer[0] = false; noListLayer[1] = false; noListLayer[2] = false; noListLayer[3] = true; // this one will not be listed noListLayer[4] = false; 这个不会影响图层在地图图像的实际显示。 Changing the properties of the North arrow 如果 drawNorthArrow 值为 true 指南针就会显示。可以通过修改 NorthArrowType,NorthArrowCoords,NorthArrowSize,和 NorthArrowAngle 来改变它的样式位
  15. 15. 置和尺寸大小。 Changing the properties of the copyright element 如果 drawCopyright 值为 true 则地图上将显示版权信息。通过修改以下变量:CopyrightFont, CopyrightStyle, CopyrightSize, CopyrightCoords, CopyrightColor, CopyrightBackground, CopyrightBGColor, CopyrightGlow, CopyrightGlowColor, 和 CopyrightText 来修改文本,格式, 大小等。 Changing the properties of scalebar 如果 drawScaleBar 值为 true 比例尺条便显示。通过修改以下变量: ScaleBarStyle,ScaleBarFont, ScaleBarFontColor, ScaleBarSize, ScaleBarColor, ScaleBarBackground, 和 scaleBarBackColor 修改样式,格式,大小和颜色等。 Changing the units of the scalebar 比例尺条的初始单位是在 Designer 中设置的,不过,你可以在 ArcIMSparam.js 文件中修改它 们。ScaleBarUnits 可以被设置为厘米,分米,英尺,英寸,千米,米,英里,海里,英制海 里,美制海里,美制测量英寸,美制测量英尺,美制测量英里,美制测量码,和码。地图单 位可以设为英尺,米,和度。 Adding a new element to an acetate layer 薄膜层是在 aimsXML.js 文件中创建的。这个例子展示了指南针薄膜层的创建。 theString += '<LAYER type=quot;ACETATEquot; name=quot;theNorthArrowquot;>n'; theString += '<OBJECT units=quot;PIXELquot;>n<NORTHARROW type=quot;' + NorthArrowType + 'quot; size=quot;' + NorthArrowSize + 'quot; coord=quot;' + NorthArrowCoords + 'quot; shadow=quot;32,32,32quot; '; theString += 'angle=quot;' + NorthArrowAngle + 'quot; antialiasing=quot;Truequot; overlap=quot;Falsequot; />n</OBJECT>n'; theString += '</LAYER>n'; 如果你想添加你自己的元素到某薄膜层,打开 aimscustom.js 文件添加语句到 addCustomToMap1,addCustomToMap2,addCustomToMap3,或者 addCustomToMap4 函数中。它 们之间的区别就是薄膜层的堆放顺序。下面是一个例子: function addCustomToMap3(){ var customString = quot;quot;; customString += '<LAYER type=quot;ACETATEquot; name=quot;MyCompanyTextquot;>n'; customString += '<OBJECT units=quot;PIXELquot;>n<TEXT coord=quot;135,' + (iHeight-20) + 'quot;label=quot;Company X rocks!quot;>n'; customString += '<TEXTMARKERSYMBOL fontstyle=quot;BOLDquot; fontsize=quot;12quot; font=quot;ARIALquot; fontcolor=quot;' + modeMapColor + 'quot; '; customString += 'threed=quot;TRUEquot; glowing=quot;' + modeMapGlow + 'quot; />n</TEXT>
  16. 16. n</OBJECT>n</LAYER>n'; Modifying attribute data display Limiting the fields displayed 通过改变 selectFields 值为你想显示的字段,来控制选择集,查询,或者 identify 返回字段。 其缺省的值为#ALL#,即显示所有的字段。字段名必须是大写的以匹配在 ArcIMS Spatial Server 返回的字段名。 由于查询操作是针对某一个激活的图层,你可能需要显示的字段在激活的图层改变时也改变。 如果想开启这项功能,请确认 swqpSelectFields 值为 true。如果 swapSelectFields 值为 true, 那么必须为每一个层创建一个属性名列表。 通过设置 selFieldList 值来为每一层创建一个字段名列表。在该数组中为每一个层赋一个值, 顶层图层的 index 为 0.数组中每一行分配如下: selFieldList[2] = “NAME #ID# #SHAPE# POP”; 每层都需要一个元素。ID 和 Shape 字段必须包含在列表中并且必须由#包围。这个记号表明 这些字段不包含在数据库之中而是由服务器生成的。Image 层赋值为#ALL#是因为它根本就 没有属性。 一个关于这三个变量赋值的例子可以在第三章“HTML Viewer JavaScript Library”中找到。 Hiding display of ID and Shape field Id 和 Shape 字段默认是显示在通过 Identify 或者 Query 请求返回的属性数据列表之中。通过 设置 ArcIMSparam.js 文件中的 hideIDFieldData 和 hideShapeFieldData 变量为 true 可隐藏这两 个字段的显示,如下: var hideIDFieldData = true; var hideShapeFieldData = true; Using aliases for the field names 通过设置 useFieldAlias 为 true,可是显示一个字段的别名来代替显示其原名。当 useFieldAlias 为 true 时,需要为每一个层创建一个字段名称和别名的列表。 通过设置数组变量 fieldAliasList 来为每一层创建字段名和别名。在这个数组中为每一层赋一 个值,顶层图层的索引值为 0。该列表为一个包含一对由冒号分隔的字段名和别名的字符串。 每一对之间使用一个“|”分隔。数组中的每一个元素通过如下方式赋值: fieldAliasList[0] = “NAME:City NAME|POP:Population”; fieldAliasList[1]=””; 因为每一个层都需要一个元素,如果你不想为某层设置别名,只需将该列表置为空字符串(“ ”)就可以了,像上面的 element[1]一样。客户端会检查别名是否存在,并且只在对应该层的 列表中存在名称/别名对的时候才进行转换。 这些赋值的例子示例可以在第三章“HTML Viewer JavaScript Liberary”中关于 useFieldAlias 数组的描述中找到。 当你使用查询生成器时,下拉列表和查询表达式显示不同的字段名。下拉列表显示的别名字
  17. 17. 段是在 fieldAliasList 中定义的。但是为了正确的处理数据库的请求查询表达式还是通过使用 原始字段名进行构造的。 Changing the number of records listed at one time 虽然地图将显示所有你选择的要素,但你可以控制每一次结果列表中记录的个数。通过设置 变量 maxFeaturesReturned 值进行控制。默认值为 25 条记录。 将该值设得过大将影响响应的速度并可能导致浏览器的性能下降。如果所选择的要素数量比 maxFeaturesReturned 值大,浏览器将自动为其前后的记录集创建链接。用户可以通过链接浏 览整个选择集。 Identifying all visible features at one lacation 在客户端默认情况下 Identify 工具只对当前激活层有效。客户端一个 IdentifyAll 工具,在使 用 Identify 工具向所有可视图层进行单击选定时向所有被选中的要素发送请求。在 ArcIMSparam.js 文件中如下设置 useIdentiry 和 useIdentifyAll 变量。二者只有一个为 true,useIdentify 优先。 var useIdentify = false; var useIdentifyAll = true; IdentifyAll 工具的例子可以在链接和引用示例中找到。 Changing the title,logo,and colors Changing the title 当你使用 Designer 创建 Web 站点时可以设置 HTML 客户端的标题。默认标题为”ArcIMS Viewer”。 你可以在 HTML 客户端创建之后通过编辑 viewer.htm 文件修改客户端的标题。用你自己的标 题文本修改下面的语句: var theTitle = “My Very Own Viewer”; Changing the logo and background on the topFrame 在 HTML 客户端左上角的 logo 可以通过编辑 top.htm 修改。默认情况下,使用在你 Web 站点 的 images 目录下的 aimslogo1x2.gif 作为 logo。可以编辑图片的位置,名称来修改在 topFrame 中显示的 logo。 topFrame 使用的背景图片是在 images 目录下的 grad_gray.jpg。你可以编辑图片的位置,名称 来修改 topFrame 的背景显示。同样你也可以修改在 ModeFrame.htm 和 bottom.htm 的来满足 你的需求。 如果你的 logo 与原 logo 的尺寸上区别较大,你可能想要编辑 viewer.htm 文件中该框架的宽 度。下面的语句就是将 30 修改为一个更大值以便能容纳 logo 图片。第一个 30 针对顶层框架 第二个 30 针对底层框架而言。 document.writeln('<FRAMESET ROWS=quot;' + (30+addNS) + ',*,30,0quot; FRAMEBORDER=quot;Noquot; FRAMESPACING=quot;0quot; onload=quot;doIt()quot; BORDER=0 ' + moreStuff + '>');
  18. 18. Changing the color of the box used for zoom area 将变量 zoomBoxColor 设置为一个表示颜色的十六进制数或者颜色名。默认为红色,以下例 子将颜色改为蓝色。 Var zoomBoxColor = “#0000ff”; ArcIMS 函数和变量使用三种颜色表示模式——十六进制数,RGB 模式和颜色名。这三种颜 色模式不可交替使用。在每一个函数中要求指定某一种颜色模式。ArcIMSparam.js 使用某一 指定格式设置默认颜色。 Printing larger maps from the browser ArcIMS HTML 客户端设计的打印纸页面为 81/2quot;x11quot;。然而通过对客户端一些小小的修改便 可以定制为输出更大尺寸的打印地图。 以下的步骤描述了如何定制 HTML 客户端来打印一个更大尺寸地图。要使客户端能打印比 浏览器尺寸更大的地图需要编辑三个文件。 Altering the printForm.htm 拷贝下面的代码,命名为 printForm.htm 并保存到 HTML 客户端 Web 站点的根目录下,覆盖 已有的文件: <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=ISO-8859-1quot;> <HTML> <HEAD> <title>PrintForm</title> <SCRIPT TYPE=quot;text/javascriptquot; LANGUAGE=quot;JavaScriptquot;> var t; if (opener) { if (opener.name==quot;MapFramequot;) { t = opener.parent.MapFrame; } else { t = opener; } } else { if (parent.MapFrame) { t = parent.MapFrame; } else { t=document;
  19. 19. } } function goPrint() { alert(quot;Remember to set your print layout to Landscape if necessary before printing.quot;); var theForm = document.forms[0]; var theTitle = theForm.title.value; // BB: Set print resolution t.printDPI = theForm.printRes.options[theForm.printRes.selectedIndex].value; // BB: Set print scale, if applicable //var theScale = theForm.scale.value; //if ((!isNaN(parseFloat(theScale))) && (parseFloat(theScale) > 0)) // t.printScale = parseFloat(theScale); // Get print size from form var theMapHeight = theForm.height.value; var theMapWidth = theForm.width.value; t.getPrintMap(theTitle, theMapWidth, theMapHeight); var useTextFrame = t.useTextFrame; t=null; if (opener) { window.close(); } else { if (useTextFrame) document.location = quot;text.htmquot;; } } //set the size of the print image function setPrintSize(s){ var w, h, r; r = 0.66; switch(s) { case 'letter': w = 600;
  20. 20. r = 0.55; //document.thePrintForm.width.value = 600; //document.thePrintForm.height.value = 400; break; case 'tabloid': w = 1000; //document.thePrintForm.width.value = 1000; //document.thePrintForm.height.value = 600; break; case 'dsize': w = 2200; //document.thePrintForm.width.value = 2200; //document.thePrintForm.height.value = 1400; break; case 'esize': w = 3000; //document.thePrintForm.width.value = 3000; //document.thePrintForm.height.value = 2200; break; default: w = 600; //document.thePrintForm.width.value = 600; //document.thePrintForm.height.value = 450; break; } // end switch h = w * r; document.thePrintForm.width.value = w; document.thePrintForm.height.value = h; } // end function </SCRIPT>
  21. 21. </HEAD> <BODY BGCOLOR=quot;Whitequot; style=quot;font-family:Arial,sans-serif; color:blackquot;> <FORM onsubmit=quot;goPrint();return false;quot; name=quot;thePrintFormquot; ID=quot;Form1quot;> <table style=quot;font-size:smaller;quot; width=quot;100%quot; ID=quot;Table1quot;> <tr valign=quot;topquot;> <td width=quot;200quot;> <b>Print Map</b> <a href=quot;PrintHelp.htmquot; target=quot;_blankquot;>Help</a><br> <font size=quot;-2quot;> Click Create Print Page, then use the menu’s File-Print to send the map to your printer. </font> </td> <td align=quot;centerquot;> Title to display on Map:<br> <INPUT TYPE=quot;Textquot; NAME=quot;titlequot; VALUE=quot;ArcIMS HTML Viewer Mapquot; size=quot;30quot; ID=quot;Text1quot;> </td> <td valign=quot;middlequot; align=quot;centerquot;> <INPUT TYPE=quot;Submitquot; NAME=quot;submitquot; VALUE=quot;Create Print Pagequot; ID=quot;Submit1quot;> </td> </tr> <tr> <td colspan=quot;2quot; align=quot;centerquot;> Size of Page: <INPUT name=quot;mapSizequot; type=quot;radioquot; value=quot;latterquot; checked onClick=quot;setPrintSize('letter');quot; ID=quot;Radio1quot;>11x8.5 <INPUT name=quot;mapSizequot; type=quot;radioquot; value=quot;tabloidquot; onClick=quot;setPrintSize('tabloid');quot; ID=quot;Radio2quot;>17x11 <INPUT name=quot;mapSizequot; type=quot;radioquot; value=quot;dsizequot; onClick=quot;setPrintSize('dsize');quot; ID=quot;Radio3quot;>D Size
  22. 22. <INPUT name=quot;mapSizequot; type=quot;radioquot; value=quot;esizequot; onClick=quot;setPrintSize('esize');quot; ID=quot;Radio4quot;>E Size <br> <span style=quot;font-size:xx-small;quot;> (Pixels: Width <INPUT NAME=quot;widthquot; VALUE=quot;600quot; size=quot;2quot; style=quot;font-size:xx- small; background-color:#CCCCCCquot; ID=quot;Text2quot;> Height <INPUT NAME=quot;heightquot; VALUE=quot;450quot; size=quot;2quot; style=quot;font-size:xx-small; background-color:#CCCCCCquot; ID=quot;Text3quot;>) </span> </td> <td> <!—<span style=quot;font-size:xx-small;quot;> Scale (optional) 1:<input type=quot;textquot; name=quot;scalequot; style=quot;font-size:11pxquot; size=quot;5quot; ID=quot;Text4quot;> </span> <br> —> Printer resolution: <select name=quot;printResquot; ID=quot;Select1quot;> <option value=quot;96quot;>96 dpi</option> <option value=quot;150quot;>150 dpi</option> <option value=quot;300quot; selected>300 dpi</option> <option value=quot;600quot;>600 dpi</option> </select> </td> </tr> </table> </form> </BODY> </HTML> 拷贝以下代码,命名为 PrintHelp.htm 保存到 HTML 客户端的根目录下。这是一个新文件不 会覆盖任何文件:
  23. 23. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot;> <html> <head> <title>Printing Information</title> </head> <body bgcolor=quot;#c0c0c0quot;> <div align=quot;centerquot;><form><input type=quot;buttonquot; onclick=quot;window.close()quot; value=quot;Closequot;></form></div> <h2>Printing Information</h2> <p> To print, change the settings as desired in the print settings dialog. Then click on “Create Print Page” to open a new Browser window with the Map Image, Overview Map Image, and Legend displayed (your existing map page remains in the background). You can then use the browser’s File/Print menu item to send the display to your printer. <br> <br> Note that the geographical area covered by the printed map may be slightly larger than the area you are viewing. If the dimensions of the printed map are different from the viewed map, then one dimension (x or y) must be enlarged to include the currently viewed map extent.<br> <br> If you wish to change any settings after generating the print preview page, you will need to close the print page, return to the main mapping page and create a new print page. </p> <h4>Map Title</h4> <p> The map title you type will be displayed at the top of the printed page. </p> <h4>Print Size</h4> <p> You may choose a size from the options listed, or enter a size in terms of pixels. For larger map sizes, the map service must be configured to allow large map images. Contact the website administrator if you have problems printing large maps.<br> <br> Technical note: the size is based on the standard 96 dpi in viewing the map. The actual map image produced will be adjusted based on the selected printer resolution dpi. </p> <h4>Printer Resolution</h4> <p>
  24. 24. You should choose a printer resolution setting that matches the printer you will be using. This will ensure the best map image quality. If necessary check your printer resolution before continuing. In Windows 2000, for example, you can check the printer resolution by choosing Start-Settings-Printers, right-clicking on the printer you intend to use, and choose Properties. In the “General” tab, click on “Printing Preferences”, then on “Advanced”. In the Advanced options, the Print Quality setting shows the current/default resolution (dpi) setting, and any available settings. If you choose a Printer Resolution setting for the map that does not match the printer default, be sure to change the printer setting before printing the map. </p> </body> </html> 将以下的 JavaScript 代码拷贝命名为 aimsPrint.js 并保存至 HTML 客户端 Web 站点目录下 的javascript 目录下。这是一个新文件不会覆盖任何文件: /* * JavaScript template file for ArcIMS HTML Viewer * dependent on aimsXML.js, ArcIMSparam.js, aimsCommon.js, aimsMap.js, * aimsLayers.js, aimsDHTML.js * aimsClick.js, aimsNavigation.js, * aimsLegend.js */ var printDPI = 300; // BB: printer DPI—may be overridden by print form var printHeight = 450; // BB: default print dimensions var printWidth = 450; // BB var printScale = 0; // BB: RF scale (1:x number) for printing var INCH_TO_MAP_UNITS = 69 * 63360 // BB: inches in one map unit — converts DPI to scale // NOTE that for decimal-degree map, scale is only correct in x or y // due to convergence of meridians toward the poles! aimsPrintPresent=true; var printTitle = titleList[4]; var printMapURL=quot;quot;;
  25. 25. var printOVURL=quot;quot;; var printLegURL=quot;quot;; var legVis2=false; /* ******************************************************************************* ******** Print functions ******************************************************************************* ******** */ // display print form function printIt() { hideLayer(quot;measureBoxquot;); if (useTextFrame) { parent.TextFrame.document.location = quot;printform.htmquot;; } else { var Win1 = open(quot;printform.htmquot;,quot;PrintFormWindowquot;,quot;width=575,height=150,scrollbars=yes,resizable=yesquot;) ; } } // create web page for printing // first get Map function getPrintMap(title, w, h) { var tLeft, tRight, tBottom, tTop; showRetrieveMap(); printTitle=title; legVis2=legendVisible;
  26. 26. if (aimsLegendPresent) legendVisible=true; // BB: set print size to input values if (w != quot;quot;) printWidth = parseInt(w); if (h != quot;quot;) printHeight = parseInt(h); // BB: set map extent if scale specified tLeft = eLeft; tRight = eRight; tBottom = eBottom; tTop = eTop; //if (printScale == 0) {printScale = 1}; // Width/height of map in ground distance, scaled appropriately // var iScaledWidth = printWidth/96 * printScale / INCH_TO_MAP_UNITS // var iScaledHeight = printHeight/96 * printScale / INCH_TO_MAP_UNITS // Center of map // var xCenter = (parseFloat(eRight) + parseFloat(eLeft)) / 2 // var yCenter = (parseFloat(eTop) + parseFloat(eBottom)) / 2 // New map extents based on scale //eLeft = xCenter - iScaledWidth/2 //eRight = xCenter + iScaledWidth/2 //eBottom = yCenter - iScaledHeight/2 //eTop = yCenter + iScaledHeight/2 //BB: set XMLMode so get print res. XMLMode = 101; // BB: enlarge legend in proportion to map var tempLegW = legWidth;
  27. 27. var tempLegH = legHeight; legWidth = parseInt(printWidth/4); legHeight = parseInt(printWidth/3); // BB var theString = writeXML(); eLeft = tLeft; eRight = tRight; eBottom = tBottom; eTop = tTop; legWidth = tempLegW; // BB: restore default leg vars legHeight = tempLegH; // BB legendVisible = legVis2; sendToServer(imsURL,theString,101); theString=null; } // second, get OVMap function getPrintOV() { var tempWidth = i2Width; var tempHeight = i2Height; i2Width=parseInt(printWidth/4); //BB: scale to print i2Height=parseInt(printHeight/4); // BB: scale to print var tempDraw=drawOVExtentBox; drawOVExtentBox=true; XMLMode = 102; var theString = writeOVXML();
  28. 28. drawOVExtentBox=tempDraw; i2Width=tempWidth; i2Height = tempHeight; sendToServer(imsOVURL,theString,102); tempWidth=null; tempHeight=null; theString=null; } // third, get Legend function getPrintLegend() { if (printLegURL==quot;quot;) printLegURL = quot;images/nolegend.gifquot;; writePrintPage(); } // fourth, write the web page function writePrintPage() { var Win1 = open(quot;quot;,quot;PrintPagequot;); Win1.document.writeln('<html><meta http-equiv=quot;Content- Typequot; content=quot;text/html; charset=' + charSet + 'quot;><head>'); Win1.document.writeln(' <title>' + titleList[5] + '</title>'); Win1.document.writeln('</head>'); Win1.document.writeln('<body BGCOLOR=quot;Whitequot; TEXT=quot;Blackquot; LEFTMARGIN=0 TOPMARGIN=0>'); Win1.document.writeln('<FONT FACE=quot;Arialquot;><B>'); Win1.document.writeln('<TABLE BORDER=quot;2quot; CELLSPACING=quot;0quot; CELLPADDING=quot;0quot; NOWRAP>'); //BB: omit width Win1.document.writeln(' <TR>'); Win1.document.writeln(' <TH COLSPAN=quot;2quot; style=quot;font-size:' + parseInt(printWidth/20) + 'pxquot;>' +
  29. 29. printTitle + '</TH>'); // BB: scale title Win1.document.writeln(' </TR>'); Win1.document.writeln(' <TR>'); Win1.document.write(' <TD'); if (hasOVMap) Win1.document.write(' ROWSPAN=quot;2quot;'); Win1.document.writeln('>'); Win1.document.writeln(' <IMG SRC=quot;' + printMapURL + 'quot; WIDTH=' + printWidth + ' HEIGHT=' + printHeight + ' HSPACE=0 VSPACE=0 BORDER=0 ALT=quot;Main mapquot;>'); //BB: set size Win1.document.writeln(' </TD>'); if (hasOVMap) { Win1.document.writeln(' <TD height=quot;' + parseInt(printHeight/4) + 'quot; valign=quot;topquot;>'); //BB: set size Win1.document.writeln(' <IMG SRC=quot;' + printOVURL + 'quot; WIDTH=' + parseInt(printWidth/4) + ' HEIGHT=' + parseInt(printHeight/4) + ' HSPACE=0 VSPACE=0 BORDER=0 ALT=quot;Overviewquot;>'); // BB: set size Win1.document.writeln(' </TD>'); } Win1.document.writeln(' </TR>'); Win1.document.writeln(' <TR>'); Win1.document.writeln(' <TD ALIGN=quot;CENTERquot; VALIGN=quot;TOPquot;>'); Win1.document.write(' <span style=quot;font-size:' + parseInt(printWidth/40) + 'pxquot;>'); Win1.document.writeln(legTitle + '</span><br><br> '); // BB: add Legend title, set size Win1.document.write(' <IMG SRC=quot;' + printLegURL + 'quot; HSPACE=0 VSPACE=0 BORDER=0 ALT=quot;Legendquot;'); Win1.document.writeln(' width=quot;' + parseInt(printWidth/4) + 'quot; >'); // BB: set size Win1.document.writeln(' </TD>');
  30. 30. Win1.document.writeln(' </TR>'); Win1.document.writeln('</TABLE>'); Win1.document.writeln('</B></FONT>'); Win1.document.writeln('</body></html>'); Win1.document.close(); legendVisible=legVis2; Win1=null; hideRetrieveMap(); } Working with tools and the toolbar Changing search tolerance for Identify and Hyperlink 设置变量 pixelTolerance 为 Identify 或者 Hyperlink 操作的像素搜索容差值。容差是指在点击 点周边区域的搜索半径。默认值为 2。 var pixelTolerance = 5; Changing the pan and zoom factors 设置变量 panFactor 和 zoomFactor 的值,来修改地图在漫游和放大时的比例因子。 //panning factor for arrow buttons var panFactor = 0.85; //zoom factors for v.3 var zoomFactor = 2; Removing tools from the toolbar ArcIMSparam.js 中包含了一组使用”use”开头命名的变量,这些变量主要用于表示每个工 具在 ArcIMS 中是否可用。比如,有变量 usePan,useZoomIn,和 useIdentify。这些工具栏都 是基于这些以”use”开头的变量值动态创建的,如果你需要在你的工具栏中包含这些工具 的话,你变可以通过将该工具对应的值设为 true. var usePan=true; var usePanNorth=false; var usePanWest=false; var usePanEast=false; var usePanSouth=false; Changing the toolbar images and structure Toolbar.htm 使用与定义工具栏结构的文件。它使用 DHTML 创建两列来放置该站点选择的工 具。你可以通过定制该文件制作一个不同的表格布局,使用定制图片或者根本就不使用表格。 为了加上定制图片,可以使用你自己制作的 GIF 图片替代原本图片目录下的图片文件。如果
  31. 31. 你打算使用一个”selected”和”unselected”工具图片,在默认的客户端中,有一个命名习惯, 在该习惯中,在其名称后附加_1 的为选中时的图片,附加为_2 的是为选中时的图片命名。 这些只会在用户修改之后并激活该工具时才会发生。这些都是由 setToolPic 函数控制的。函 数 revertToolPic 将所有的工具置为未选中状态。 改变工具栏的表格结构,你可以通过修改 toolbar.htm 文件来新建一列工具栏。这个包含了一 个动态写入的页面用来描述该工具栏。这里是一个建立两栏工具栏的示例代码: if (parent.MapFrame.useZoomIn) { // Zoom In . . . requires aimsNavigation.js document.write('<td align=quot;centerquot; valign=quot;middlequot;>'); document.write('<img src=quot;images/zoomin_1.gifquot; width=16 height=16 hspace=1 vspace=0 border=0 alt=quot;Zoom Inquot; name=quot;zoominquot; onmousedown=quot;parent.MapFrame.clickFunction('zoomin'); setToolPic('Zoom In');quot; onmouseover=quot;window.status='Zoom In'quot;>'); isSecond = !isSecond; document.writeln('</td>'); if (isSecond) document.write('</tr><tr>'); 如果需要改成一栏,将最后四行修改为: //isSecond = !isSecond; document.writeln('</td>'); //if (isSecond); document.write('</tr><tr>'); 如需建立一个工具栏不使用表格,JavaScript,或者动态写入页面,请参考目录中示例代码。 在大多数情况下,你的工具栏都是静态的,但是你可能想包含一些实现rollovers效果的 JavaScript。请参考本章后面的“Using the sample HTML Viewers”。 Creating hyperlinks 互联网的本质就是让人们可以链接到众多的站点之中。下面的指导以及名为 HyperLink 的示 例代码就是要让您了解如何创建一个站点可以从一个地图上的要素或者从一个属性显示上进 行链接。 要使链接可以正常使用,必须将 useHyperLink 设置为 true。你想要链接的图层数据库中必须 有一个存放对应 URL 的字段。你还需要创建数组,用来保存层名和超链链接的字段名。 通过设置数组变量 hyperLinkLayers 来创建层数组。为该数组中的每一层命名,最顶层的层 索引值为 0。层的命名区分大小写,而且必须与你在地图配置文件中的名称一样。创建链接 字段列表,只需设置变量 hyperLinkFields。字段名也区分大小写,并且要和你在客户端属性 表中所见命名相同。相关联的层和属性共享同一个数组索引值。在下面的示例中,博物馆和 艺术馆都包含了一个名为 Website 的字段用来保存 URL。 hyperLinkLayers[0] = quot;Museumsquot;; hyperLinkFields[0] = quot;WEBSITEquot;; hyperLinkLayers[1] = quot;Art Galleriesquot;; hyperLinkFields[1] = quot;WEBSITEquot;; 注意:在ArcIMSparam.js文件中,以上四行被注释掉了。如果你需要修改这些代码,请取消 注释(删除/*和*/)。 在第三章“HTML JavaScript Library”中有一个关于这些数组分配的消息描述。你也可以参考 本章后面的“Using the sample HTML Viewers”一节。 搜索容差的设置会影响用户找到链接点的能力。修改pixelTolerance来修改用于链接搜索的容
  32. 32. 差值。默认为2. Var pixelTolerance = 5; Linking to the first visible feature hyperlink on a map 在默认客户端中,Hyperlink 工具只能针对当前激活层工作。客户端同样还有一个 useHyperlinkAny 工具用来发送查询请求用来链接到当前点击点处的第一个可视要素。 在 arcIMSparam.js 文件中,设置变量 useHyperlink 和 useHyperlinkAny 如下。二者只能有一个 为 true,默认优先使用 useHyperlink。 var useHyperlink = false; var useHyperlinkAny = true; 可以在 Hyperlink 的示例程序中找到一个关于 useHyperlinkAny 工具的例子。 Setting up geocoding when using an ArcMap image service HTML 客户端可以使用一个与用来显示鹰眼图和主地图不同的服务来进行地理编码。通过变 量 imsGeocodeURL 进行设置。HTML 客户端的地址定位函数将该地理编码请求提交到 imsGeocodeURL 指定的服务。当结果以表格的形式表示并且用户选择某点,它将在薄膜层 上绘制该点。我们鼓励用户使用 ArcMap 来设置一个只有一个用于地理编码层的 ImageServer 服务。该服务通过变量 imsGeocodeURL 被使用。  启动 HTML 客户端中使用的一般 ArcMap image 服务。  启动一个用于地理编码的图像服务。在 AXL 文件中启动该地图服务,仅添加地理编码层 并配置其地理编码属性。  使用 Designer 创建一个 HTML 客户端。选择 ArcMap image 服务为首选服务。选择该点处 的地图服务不是必需的。  在文本编辑器中打开 ArcIMSparam.js 文件。  找到如下行:var imsGeocodeURL=‘’;  修改如上代码,包含一个可进行地理编码层的图片服务。 Var imsGeocodeURL = http://<mymachine>/servlet/com.esri.esrimap.Esrimap? ServiceName=<myservice>&CustomService=geocode'; 注意:<mymachine>是站点所在主机名,<myservice>是用于创建地理编码服务的名称。  找到如下代码:var useGeocode = false;修改 false 为 true:var useGeocode = true;  保存 ArcIMSparam.js 文件,重新打开或者刷新 HTML 客户端查看其变化。 Setting up stored queries when using an Arcmap image service HTML 客户端可以使用一个不同于用来显示鹰眼图和主地图的服务来存储查询。最普通的方 法是在 HTML 客户端中使用一个 ArcMap 图片服务作为首选服务时使用一个地图服务来存储 查询。 以下指导描述了如何在使用 ArcMap image 服务的同时建立一个不同的服务用于存储查询。 通过以下步骤,HTML 客户端中工具条上的 Search 按钮便可用了,用户可以通过存储查询 进行要素查询。
  33. 33. I. 在文本编辑器中打开 ArcIMSparam.js 文件。 II. 找到以下行: var imsQueryURL=''; III.修改以上代码为包含已存储查询层的 image 服务。出于性能的考虑,该服务只能包含一个 保存查询的层。 Var imsQueryURL = 'http://<mymachine>/servlet/com.esri.esrimap.Esrimap?Servi ceName=<myservice>&CustomService=query'; 注意:<mymachine>是站点所在主机名,<myservice>是用于创建地理编码服务的名称。 IV.找到以下代码:var useStoredQuery = false;将其修改为:var useSotreQuery = true; V. 保存 ArcIMSparam.js 文件。 VI.在文本编辑器中打开 javascript/aimsCommon.js 文件。 VII.找到以下代码: if (aimsQueryPresent) { // if (useStoredQuery) checkStoredQueries(theReply); //} else { // useStoredQuery=false; } 用“/*”和 “*/”将其注释掉: /* if (aimsQueryPresent) { // if (useStoredQuery) checkStoredQueries(theReply); //} else { // useStoredQuery=false; } */ VIII.保存 aimsCommon.js 文件。 IX.重新打开客户端或者刷新客户端查看其变化。 How the viewer and server communicate 从用户的角度来看,单击一个按钮,执行一个操作,屏幕显示一个结果集。这是对客户端和 服务器之间交互过程的一个简述。 当用户单击某个按钮的时候实际上是从客户端发送一个 ArcXML 请求给应用服务器。应用服 务器将该请求定位指向到合适的 ArcIMS 空间服务器上的功能(如果客户端和服务使用了不同 的服务器,则还需指向正确的主机),然后将响应返回给客户端。
  34. 34. 上图是整个 ArcIMS 的架构图,包含了应用服务器和空间服务器,参考 ArcIMS 在线帮助系 统中关于架构的话题。 上面的描述还是有一点笼统。为了了解这个全过程,需要添加两外两个部分到该图表中—— 当鼠标单击时(调用 javascript 函数)发生了什么以及请求与响应循环过程中发生了什么。
  35. 35. What happens when the mouse is clicked? 这个图表表达了通过鼠标单击实现地图放大和标识操作的过程。包含了每个步骤中调用的 JavaScript 函数,当请求被写入时,请求发送时(sendToServer),当响应从服务器端返回 (processXML)。下一页描述了在 sendToServer 和 processXML 函数之间的流程细节。 The ArcXML request and response cycle 客户端和服务器端的交互建立在由 ArcXML 构成的请求和响应。下面的图表展示了从客户端 组织形成一个 ArcXML 请求通过服务器处理请求并将响应发送回客户端。 每一次循环中,PostFrame 表单的属性和输入元素都是通过 JavaScript 更新的。通过提交表单 传递给 Servlet Connector。一个新页面由响应写成并用来启动下一个请求。通过这个方法来 发送一个请求是必须的,因为 JavaScript 和 HTML 无法通过自身来管理其请求和响应的循环。
  36. 36. The request 用户选择某个操作,某函数便组织一个合适的 ArcXML 请求。然后由在 MapFrame 页面中的 sendToServer 函数将该请求传递给 PostFrame 页面,在该页面更新在 PostFrame 表单中的输入 值并将其提交到 Web 服务器。Servlet Connector 提取已提交值并发送请求到应用服务器。应 用服务器将请求发送至 ArcIMS 空间服务器。 The response 从 arcIMS 空间服务器发送回来的 ArcXML 响应通过应用服务器发送给 Servlet Connector。一 个新 HTML 页面动态回写到 PostFrame 并且替换原有的 HTML 页面。新的页面包含了一个名 为 passXML 的 JavaScript 函数。它将请求传递给另外一个在 MapFrame 页面的名为 processXML 的 JavaScript 函数。ProcessXML 函数将 ArcXML 响应传递给相应的函数去处理。 How the PostFrame form (the post form) works PostFrame 由 jsForm.htm 创建并且在响应过程中被替换。下面是初始状态的 jsForm.htm 文件。 <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <HTML> <HEAD> <TITLE>Default Form</TITLE> <SCRIPT TYPE=quot;text/javascriptquot; LANGUAGE=quot;JavaScriptquot;> function passXML() { // Esrimap connector writes necessary lines here } </SCRIPT> </HEAD> <BODY BGCOLOR=quot;Blackquot; onload=quot;passXML()quot;> <FORM ACTION=quot;quot; METHOD=quot;POSTquot; name=quot;theFormquot;>
  37. 37. <INPUT TYPE=quot;Hiddenquot; NAME=quot;ArcXMLRequestquot; VALUE=quot;quot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;JavaScriptFunctionquot; VALUE=quot;parent.MapFrame.processXMLquot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;RedirectURLquot; VALUE=quot;quot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;BgColorquot; VALUE=quot;#000000quot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;FormCharsetquot; VALUE=quot;UTF-8quot;> </FORM> </BODY> </HTML> 当向 ArcIMS 空间服务器发送请求时,PostFrame 表单的输入元素通过如下方式更新: ACTION:服务的 URL 地址 ArcXMLRequest:ArcXML request JavaScriptFunction:处理响应的函数。默认是 parent.MapFrame.processXML. BgColor:页面的北京颜色,默认为黑色。 FormCharset:ArcXML 的字符编码方式。默认为 UTF-8。 值更新之后将其提交到 Servlet Connector。Servlet Connector 提取 ArcXML 请求并且通过应用 服务器将其导航到 ArcIMS 空间服务器进行处理。 在 arcIMS 空间服务器的响应过程中,PostFrame 的内容被替代。下面是一个新 PostFrame 文 件的例子: <META HTTP-EQUIV=quot;Content-Typequot; CONTENT=quot;text/html; charset=UTF-8quot;> <HTML> <HEAD> <TITLE>Default Form</TITLE> <!-- Title must match jsForm.htm's title --> <SCRIPT TYPE=quot;text/javascriptquot; LANGUAGE=quot;JavaScriptquot;> function passXML()( var XMLResponse='<?xml version=quot;1.0quot; encoding=quot;UTF8quot;?><ARCXML version=quot;1.1quot;> <RESPONSE><IMAGE><ENVELOPEminx=quot;-180quot; miny=quot;-126quot; maxx=quot;180quot; maxy=quot;126quot;/> <OUTPUT file=quot;c:arcimsoutputWorld_KAT27721614.gifquot; url=quot;http://kat/ output/World_KAT27721614.gifquot;/></IMAGE></RESPONSE></ARCXML>'; parent.MapFrame.processXML(XMLResponse); } </SCRIPT> </HEAD> <BODY BGCOLOR=quot;#000000quot; onload=quot;passXML()quot;> <FORM ACTION=quot;quot;METHOD=quot;POSTquot; name=quot;theFormquot;>
  38. 38. <!---<input type=quot;Hiddenquot; name=quot;Formquot; value=quot;Truequot;>---> <INPUT TYPE=quot;Hiddenquot; NAME=quot;ArcXMLRequestquot; VALUE=quot;quot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;JavaScriptFunctionquot; VALUE=quot;parent.MapFrame.processXMLquot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;BgColorquot; VALUE=quot;#000000quot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;FormCharsetquot; VALUE=quot;UTF-8quot;> <INPUT TYPE=quot;Hiddenquot; NAME=quot;RedirectURLquot; VALUE=quot;quot;> </FORM> </BODY> </HTML> 当页面加载完时,ArcXML 响应被传递至在表单 JavaScript 元素中声明的 JavaScript 函数中。 该函数处理响应。 The GET_SERVICE_INFO request GET_SERVICE_INFO 请求是一个最通用的请求,因为在 ArcIMS 服务中它向每一个图层请 求信息。了解这个请求对你将有很大的帮助,特别是当你在试图了解鹰眼图如何工作、如何 从文件中加载图层参数、以及地图单位如何工作时更有帮助。 通过 Image 和 Feature 服务,这个请求可以返回字段集、最小外包、渲染等相关信息。通过 ArcMap Image 服务,该请求可以选择返回字段集、最小外包、数据框架和内容表格的信息。 Load layer parameters from file 默认情况下,HTML 客户端使用单一的 GET_SERVICE_INFO 来请求或响应所有的基础信息。 但是你可以通过声明你从文件加载需要的图层参数而不通过 GET_SERVICE_INFO 响应来减 少客户端启动的时间。从文件加载的时间比同时加载多个图层、服务以及图层和服务一起加 载的速度要快。 1.使用 Designer 创建一个 HTML 客户端。 2.打开一个浏览器,在地址栏中输入:http://<your host name>/<your web site directory>/<your web site name>/getLayerInfo.htm 图层参数表将显示在浏览器中 3.打开一个文本编辑器,将在该表中的文本内容拷贝至文本编辑器中。保存为 aimsLayerParam.js。 4.保存该文件到你的 web 站点目录之下的 javascript 文件子目录 5.使用文本编辑器打开 Web 站点根目录下的 MapFrame.htm。 6.找到以下代码:<SCRIPT TYPE=quot;text/javascriptquot; LANGUAGE=quot;javascriptquot; SRC=quot;javascript/ aimsLayerParam.jsquot;></SCRIPT>将其注释删除(删除<!-- 和 -->标签) The overview map 客户端给鹰眼图创建了一个没有面积限制的 GET_IMAGE 请求。空间服务器返回一个在鹰眼 图配置文件中定义的面积的图像。因为在请求中没有发送面积的限制,所以不需要去配置空 间服务器使用的小数点。鹰眼图忽略在 ArcIMSparam.js 文件中定义的经度范围限制。
  39. 39. Map units 客户端从 GET_SERVICE_INFO 响应中获取地图单位。全局变量 MapUnits 决定了该值。当 地图单位未知的时候该值在加载服务时非常重要,比如在 Generic,JavaPost,和 MultiService 示例或者定制接口的过程中。 JavaScript funcion files 下面的 JavaScript 函数文件是包含在 HTML 客户端之中的文件。ArcIMSparam.js 文件在 Web 站点的根目录下。所有其他的文件都保存在 web 站点目录下的javascript 目录下。以下作简 单的介绍,更多的详细信息请查看第三章”HTML 客户端 JavaScript 库” • ArcIMSparam.js—main parameter file that configures the HTML Viewer • AimsBuffer.js—functions to perform buffering • AimsClick.js—functions that respond to clicks on the map or buttons • AimsCommon.js—general utility functions • AimsCustom.js—templates for adding custom functionality • AimsDHTML.js—functions for creating and using Cascading Style Sheets (layers in Netscape) • AimsGeocode.js—functions to perform address and intersection matching • AimsIdentify.js—functions to perform basic query including Identify and Hyperlink • AimsLayers.js—functions for managing map layers • AimsLegend.js—functions for managing the graphic legend • AimsMap.js—basic mapping functions • AimsNavigation.js—functions for interactive map navigation such as zooming and panning • AimsPrint.js—functions for creating a Web page layout suitable for printouts • AimsQuery.js—functions to perform attribute query, for example, Query, Find, and Search tools • AimsResource.js—text strings used for the interface • AimsSelect.js—functions to perform spatial selection, such as selections by rectangle and shape • AimsXML.js—functions for basic XML communication with the servers Using the sample HTML Viewers ArcIMS 提供了多个已实现的 HTML 客户端示例。它们演示了大部分的函数功能以及图形用 户接口(GUI)的设计。通过这些示例你可以了解到很多关于如何创建服务以及如何访问 ArcIMS Web 站点的知识。 在上页中已经列出了所有的 HTML 客户端中使用的 JavaScript 函数。当然还有一些另外的用 于特定示例中的一些函数。 示例中有:Basic Map,Extract,Generic Map, HyperLink ,JavaPost, MultiService, Parcels, 和 Thematic Map. 下面是一个示例程序运行时必须条件的说明。你同样可以参考在你的<安装目录 >SamplesViewersHTMLSample_setup.htm 的安装指导。当然前提是你使用的是默认的经典
  40. 40. 安装选项进行安装,该安装选项默认会安装示例。如果你采用的是制定安装请参考下面的详 细指导。 Basic Map 说明: 这个示例客户端演示了一个包含简单地图显示,缩放,和漫游功能的实现。放大和漫游是通 过不同的接口实现,包含有符号的按钮(工具栏风格),有文字显示的按钮(表单风格)和链接。 安装前提条件: 1.通过 sf.axl 文件创建一个名为 sacfrancisco 的地图服务。 2.在浏览器地址栏中输入你 web 站点中 html 客户端所在目录(如:http:<ArcIMS host>Websitehtmlviewer). 3.单击基本地图,然后单击顶部任一链接。sanframcisco 服务将被显示。站点下文件如下: 在htmlviewerBasicMap 下,大多数的函数在 MapFrame.htm 和 Toolbar.htm 中被定义。 MapFrame 文件名由从 0 到 4 组织。每一个代表应用程序中顶部工具栏中的五个链接之一, 从左到右分布。比如,MapFrame_zero.htm 定义顶部工具栏中的第一个链接。Toolbar.htm 定 义在表单风格布局中的按钮。 Basic Map 样例使用以下四个来自上面列出的 JavaScript 文件列表中的文件:  ArcIMSparam.js—客户端用来设置其功能的主要参数文件。  AimsCommon.js—在库中被大部分函数使用到的一般性函数。  AimsMap.js—为客户端提供基础的地图功能。  AimsXML.js—通过 XML 提供与服务器交互的基础功能。 Extract 描述说明: 这个样例客户端演示了如何从服务器端提取一个层为用户定义范围的 shapefile 文件。 安装前提: ➢ 通过 sf.axl 创建一个名为 sanfrancisco 的地图服务。 ➢ 在浏览器中地址栏中,输入 htmlviewer 所在 url(如:http:<ArcIMS host>Websitehtmlviewer). ➢ 单击 Extract,sanfrancisco 服务将显示。为了测试提取功能,激活一个图层并使用 Select by Rectangle(矩形框选择)选择要素。单击提取工具,单击提取,然后下载并选择一个目录 保存该 ZIP 文件。 Web site files: 在 viewer.htm 中声明鹰眼图是在一个独立于主地图框架之中,即框架之中再有一个框架。通 过 Select by Shape 工具来演示实现深层标识和为用户定义图形缓冲功能的函数。 Extract 样例使用以下 JavaScript 文件:  除 aimsBuffer.js、aimsGeocode.js 和 aimsPrint.js 文件外的所有其他 JavaScript 函数文件。  AimsExtract.js—用来创建一个操作下拉列表的函数。
  41. 41.  AimsExtractResource.js—字符文本接口。 Generic Map 说明描述: 这个示例客户端主要演示了在一个服务器上运行的所有地图服务的下拉列表并允许用户选择 其中之一运行。同样有一个工具允许用户设置众多参数,办阔缩放和漫游因子,缩放框颜色 和地图北京,要素选中和高亮的颜色,指南针的样式,图层列表的样式,和地图坐标显示。 安装前提: ➢ 没有必要在 ArcIMSparam.js 文件中声明指定某个服务,但是你需要保证至少有一个地图服 务运行在服务器上。 ➢ 在浏览器中地址栏中,输入 htmlviewer 所在 url(如:http:<ArcIMS host>Websitehtmlviewer). ➢ 单击 Generic Map.如有需要分别为主地图和鹰眼图选择一个服务,然后单击加载。单击试 用工具栏底部的操作按钮。 Web site files: 在htmlviewerGeneric 目录下,有一个 HTML 页面定义了每一个操作,名称与在操作列表中 函数名相似。例如,setHighlightColor.htm 定义了 SetHighlightColor 功能页面。 Generic Map 示例使用了以下的 JavaScript 文件:  所有在 JavaScript 函数文件列表中的文件。  AimsOptiolns.js—用来创建操作下拉列表的函数。  AimsGeneric.js—用来创建加载服务请求的下拉列表的函数。  AimsGenericResource.js—字符文本接口。 HyperLink 描述说明: 这个示例主要演示一个超链的功能。它展示了如何通过一个地图要素链接到另一个 Web 页 面显示。这个示例展示了一个定制的图形外观并包含了大量 Basic Map 中的工具(上已介绍)。 安装前提: ➢ 通过 sf.axl 创建一个名为 sanfrancisco 的地图服务。 ➢ 在浏览器中地址栏中,输入 htmlviewer 所在 url(如:http:<ArcIMS host>Websitehtmlviewer). ➢ 单击 HyperLink,一个相关地图将显示。单击在侧边栏的 Queries,单击 HyperLink,然后单 击任一个美术馆链接至其主页。注意:并不是每一个美术馆都有一个有效的链接。 Web site files: 在htmlviewerHyperlink 目录下,viewer.htm 定义了该黑色风格的接口。 该示例使用了在以上 JavaScript 函数文件列表中的所有文件。在 ArcIMSparam.js 文件中查看 UseHyperLink,hyperLinkLayers 和 hyperLinkFields 的各参数。
  42. 42. Java Post 描述说明: 这个示例客户端演示了在 HTML 客户端使用 Java applet。Applet 通过 ArcXML 与 ArcIMS 应 用程序服务器进行交互而不使用 ArcIMS Servlet Connector。这个 applet 使用 Java 1.1 而不使 用 Java 2,因为这样不需要 Java 运行时环境(JRE)插件。这个示例支持所有由 Designer 创 建的 HTML 客户端同样的功能,但是可以通过 Java 1.1 进行扩展。 安装前提: ➢ 通过 sf.axl 创建一个名为 sanfrancisco 的地图服务。 ➢ 在浏览器中地址栏中,输入 htmlviewer 所在 url(如:http:<ArcIMS host>Websitehtmlviewer). ➢ 单击 Java Post 并试用客户端中所有的工具。这些功能和标准的 HTML 客户端一样,但是 由于其 sendToServer 功能的实现不同导致其交互方式不同。 Java Post 示例使用以上 JavaScript 函数文件列表中的所有文件。 MultiServices 描述说明: 这个示例客户端演示了加载多了服务的能力。同时也向您展示了如何安装 HTML 客户端来 访问多于一个的主机上的服务。 安装前提: ➢ 通过 BasicWorld.axl 穿件一个名为 basicworld 的图像服务,设置其图像格式为 GIF 或者 PNG8。 ➢ 大部分的示例中只是使用到在本地主机上的服务,这个示例允许你选择在不同主机上的服 务。 ➢ 找到 Esrimap_prop 文件,它的目录取决于你的 Web 服务器类型。打开该文件添加以下行, 用你想使用的服务所在的主机名替换<hostname#>。这个被称为重定位因为你将 URL 重定 位到另一个主机上: redirect=true redirectableHosts=<hostname1>,<hostname2>... ➢ 在htmlviewermultiservice 目录下查找并打开 aimsMultiServiceParam.js 文件并使用你在上 面的 Esrimap_prop 文件中办含的主机名更新 availableHosts 变量。 注意 aimsMultiServiceParam.js 文件不支持使用通配符(*)来代表所有的主机,而必须将所有 的主机列出来。这个与 Esrimap_prop 文件中有所区别,Esrimap_prop 允许使用通配符指定 所有的主机。 ➢ 在浏览器中地址栏中,输入 htmlviewer 所在 url(如:http:<ArcIMS host>Websitehtmlviewer). ➢ 单击 MultiService 尝试使用在右下角的添加服务按钮添加多个服务。如果你已经在你的属 性文件中设置了使用多个主机你可以尝试选择第二主机。 Web site files: 在这个示例中,客户端可以加入多个服务。这些服务的图像输出文件类型必须为 GIF 或者
  43. 43. PNG8 格式,因为必须有一个过渡的背景用来在另一个服务下显示另外一个服务。在 aimsMultiServiceParam.js 文件中,topMapServiceURL 变量可以用于定义顶部地图服务。同样 也可以用于显示指南针,比例尺和版权信息。你必须确保你所定义的服务创建的图像类型为 GIF 或者 PNG8。否则,处在下层的服务将被屏蔽。Internet Explorer 和 Netscape 6 都支持这 两种格式的透明显示;然而,Netscape 4.x 不支持 PNG 格式图像的透明显示。在这个示例中 没有进行投影,所以你的服务必须是在同一个坐标系统下才能正常显示,或者你可以添加你 的投影编码。 MultiService 示例使用了除 aimsBuffer.js、aimsGeocode.js 和 aimsPrint.js 文件之外的所有 JavaScript 函数文件列表中的文件。 Parcels 描述说明: 这个客户端示例演示了如何连接外部数据库中地图要素数据。示例提供了一个土地块图层以 及与之匹配的在 Access 数据库中的地块信息。这个示例使用 ASP 或者 ColdFusion。 安装前提:  针对使用 ASP(For ASP): 1. 需要一个开放式数据库互连(ODBC)连接到外部数据库。通过开始菜单(Start menu)|设置 (setting)|控制面板(Control Panel)选择 ODBC 数据源。单击系统 DSN 标签,单击添加, 选择 Microsoft Access Driver(.mdb)。将该数据源名设为 Downtown,选择在<ArcIMS Installation Directory>SamplesViewersDatadowntown 目录下的 downtown.mdb 为数据 库。 2. 在htmlviwerParcels directory 目录下,将 asp.htm 重命名为 default.htm。 3. 以下按照针对所有的实现(For all implementations) 中步骤操作。  针对 ColdFusion 实现(For ColdFusion): 1. 启动 ColdFusion Server 4.5,如果其并未运行。 2. 需要一个 ODBC 连接。通过开始菜单(Start menu)|设置(setting)|控制面板(Control Panel) 选择 ODBC 数据源。单击系统 DSN 标签,单击添加,选择 Microsoft Access Driver(.mdb)。将该数据源名设为 Downtown,选择在<ArcIMS Installation Directory>SamplesViewersDatadowntown 目录下的 downtown.mdb 为数据库。 3. 在htmlviwerParcels directory 目录下,将 cf.htm 重命名为 default.htm。 4. 以下按照针对所有的实现(For all implementations) 中步骤操作。  针对说有实现(For all implementations): 1. 通过 parcels.axl 创建一个地图服务名为 parcels。 2. 在浏览器中地址栏中,输入 htmlviewer 所在 url(如:http:<ArcIMS host>Websitehtmlviewer). 3. 单击 Parcels;单击 Zoom in(放大),然后试用 Identify,Search by Address 和 Search by Owner 工具。这些数据都从数据库中返回。 Web site files: 在htmlviewerParcels 目录下,HTML 文件以典型的集合式出现,每一个支持环境均有一个
  44. 44. 文件。ColdFusion 文件集有一个.cfm 后缀;ASP 文件集有一个.asp 后缀。 Parcels 示例使用了以上的 JavaScript 函数列表中的所有文件,另外还有以下的文件:  AimsDB.js—用来实现将图层链接到外部表的功能。  AimsDBParam.js—定义链接的字段和表格。  AimsDBResource.js—字符文本的接口。 Thematic Map 描述说明: 这个示例演示了如何渲染图层和生成某字段的统计信息。 安装前提: ➢ 通过 demog.axl 创建一个名为 demog 的地图服务。 ➢ 在浏览器中地址栏中,输入 htmlviewer 的 url(如:http:<ArcIMS host>Websitehtmlviewer). ➢ 单击 Thematic Map,测试图层分类工具和字段统计工具。 Web site files: Thematic 示例使用了以下 JavaScript 文件:  除 aimsBuffer.js,aimsPrint.js 和 aimsSelect.js 文件之外的所有 JavaScript 文件列表中的所有文 件。  AimsClassRender.js—用于实现图层分类和渲染以及字段统计功能。  AimsClassRenderparam.js—定义用于渲染的图层和字段。在这个示例中,图层和字段来 自DataSanFrancisco 目录下的数据。如果你使用其他的图层数据,你需要通过更新数据 来更新你的图层和字段。  AimsClassRenderResource.js—字符文本接口。

×