基于JavaScript的离线电子地图论文范文

本站小编为你精心准备了基于JavaScript的离线电子地图论文参考范文，愿这些范文能点燃您思维的火花，激发您的写作灵感。欢迎深入阅读并收藏。

1javascript脚本编写使用的技术及其特点

（1）Div+CSS布局设计Div（division）是HTML中的一个元素，是标签，用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。Div的起始标签和借宿标签之间的所有内容都是用来构成这个块的，其中所包含的元素的特性由Div标签的属性来控制，或者通过使用样式表格式化这个块来进行控制。CSS（CascadingStyleSheets）是一种用来表现HTML或XML等文件样式的计算机语言。Div+CSS是网站标准中的术语之一，通常为了说明HTML网页设计中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用Div+CSS的方式实现各种定位。（2）JS修改Div样式①局部改变样式局部修改样式分为改变直接样式、改变className和改变cssText三种。②全局改变样式通常情况下，我们可以通过改变外链样式的href的值实现网页样式的实时切换，也就是“改变模板风格”。（3）JS实现DOM事件响应DOM，即文档事件模型，是W3C（万维网联盟）的标准。DOM定义了访问HTML和XML文档的标准。W3CDOM标准被分为三个不同的部分。①核心DOM——针对任何结构化文档的标准模型。②XMLDOM——针对XML文档的标准模型。③HTMLDOM——针对HTML文档的标准模型。DOM节点树如图1所示。JS响应DOM事件是利用对元素对象的事件属性（onmousedown，onmousemove等）的响应来调用JS文件的函数。

2离线电子地图功能的实现

2.1JS脚本的设计思路本设计中JS脚本的总体设计思路是通过给定显示区域左下角图片的路径，按照一定顺序计算得出显示区域内共4×3个图片的路径，写入HTML客户端，每次拖动后先计算左下角图片路径，然后根据其路径动态刷新显示区域。放大时则通过更换图层来动态刷新显示区域。总体设计框图如图2所示。

2.2计算路径函数的实现在整个脚本的开始，我们调用计算路径函数（count（s）），通过左下角图片的路径按照xoy坐标系的顺序，算出整个显示区域（4×3）内所有图片的路径，并将其保存在数组e中。同时，以数组e为实参调用显示函数（display（e））。具体实现方法如下。（1）使用if语句判断图片的Z坐标，确定其所在的图层。（2）使用if语句判断图片X坐标和Y坐标，如果其坐标超过所能显示的最大值或最小值时，修改其坐标值，使其符合要求。（3）使用for语句，建立一个双重循环，按照先Y坐标自增再X坐标自增的顺序，将显示区域内4×3个图片的路径存入字符串ss。（4）使用ss.split()方法，从空格处将字符串ss分割开，存入数组e中。（5）调用display（e）函数，将数组e作为参数传入display（e）中。具体流程图如图3所示。

2.3显示函数的实现显示函数（display（e））通过遍历路径计算函数出来的数组e，将其每一个元素传入排版函数（placing（e[i],i）），并将从排版函数返回的经过Div+CSS设计的HTML语言通过document.id.innerHTML属性写入HTML客户端，从而实现排版显示。具体实现方法如下。（1）使用foreach方法遍历数组e，将数组的元素作为参量调用函数placing（e[i],i）。（2）使用地图容器（map_content）的innerHTML属性，将经过运算的HTML语句输出到Web客户端，实现图片的显示。具体流程图如图4所示。

2.4排版函数的实现排版函数（palycing（e[i],i））通过if-else结构根据形参i的大小分别返回不同的字符串。字符串的内容为经过内部样式表设计的Div模块，以及嵌于Div中的图片。具体实现方法如下。（1）使用if语句判断形参i的大小。（2）使用内部样式表设计Div，并根据形参i的大小将图片标签嵌入Div中。（3）使用return语句返回保存有Div标签和img标签的HTML语句。具体流程图如图5所示。

2.5拖动响应函数的实现拖动响应函数通过对Div对象的event.onmousedown、onmousemove和onmousueup等事件的响应，调用函数。通过计算地图容器和图片显示区域之间的相对位置，从而设置图片显示区域的offsetLeft和offsetTop属性，实现地图的拖动。然后，计算拖动的绝对距离，得出拖动后左下角图片文件的xyz坐标，作为全局变量s的新值保存。具体实现方法如下。（1）计算拖动前图片显示区域相对于地图容器的距离，存入deltaX和deltaY中。（2）将函数movehandler和up-handler分别附加到当前文档对象模型（DOM）对象上的事件onmousemove和onmouseup上。（3）利用设置event.cancelBu-bble属性取消事件的起泡响应，防止拖动函数导致地图容器的移动。（4）设置event.returnValue为false，取消事件的返回值。（5）当响应onmousemove事件时，调用函数movehandler，计算移动的绝对距离以及拖动完成后地图容器和图片显示区域的相对距离。（6）通过修改图片显示区域Div的offsetLeft和offsetTop属性完成拖动。（7）当响应事件onmouseup时，调用函数uphandler。取消事件onmousemove和onmouseup与函数movehandler与uphandler的绑定，并取消起泡响应。（8）调用函数thenext，计算拖动前被选中的图片所在的Div相对于整个地图容器的距离。并且计算拖动后左下角图片的具体坐标，然后调用路径计算函数count（s）。具体流程图如图6所示。

2.6放大函数的实现放大函数（bigger（））通过响应事件ondbclick，按照16~19的顺序，依次循环改变图层和相应的图片，将相应图层左下角图片作为参量传入路径计算函数。具体实现方法如下。（1）判断当前图层的z坐标。（2）按照16~19的顺序依次循环修改下一个图层的z坐标，并作为参数传入路径计算函数。具体流程图如图7所示。

3离线电子地图的调试结果

3.1拖动响应函数的调试结果拖动响应函数调试的结果如图8所示。由图8可知，拖动响应函数基本上达到了设计要求，但在动态刷新方面存在延迟比较明显，可采用AJAX技术进行改进。

3.2放大函数的调试结果放大函数的调试结果如图9所示。由图9可知，放大函数的效果很好地满足了连线电子地图设计的需要。

3.3显示与排版函数调试的结果显示与排版函数调试的结果如图10所示。由图10可知，显示与排版函数的效果实现了设计的要求。

作者：徐济仁李洲晖单位：合肥电子工程学院