《仔仔细细分析Ext》第N章 图表、Excel报表、GIS、拓扑结构第三节基于VML的WEBGIS4

 

应用实例：

1、  项目背景

这是为北方某供电局的实时电压监测系统做的一个简单 WebGis 应用，该监测系统由服务器端和挂在各地变电站、母线或支线上的监测装置组成。监测装置每隔一定的时间间隔会向服务器端传送当前线路上的电压数据，用户要求能以地理信息图的方式来展示这些数据。

地理底图（非常大的一张图）和监测装置在地图上的地理位置信息均由用户方提供。

2、  过程  

第一步：底图切片

           拿 PhotoShop 之类的工具，把底图切片成 32 × 32 ＝ 1024 张小图，这里的注意点是，这些切片的文件名应该是有规则的（切片工具自动生成的即可）。我们自己不太可能去开发 Google 那样的搜索算法来支撑这个过程，只能采取一些简化的处理。

第二步：监测点位置信息格式化

           把用户提供的这些点的位置坐标格式化成 xml 数据。比如 :

           <?xml version="1.0" encoding="UTF-8"?>

           <mps>

                    <mp>

                             <mpname> 监测点 1</mpname>

                             <mptype>2</mptype>

<x>100</x>

                             <y>100</x>

                    <mp>

           </mps>

第三步：编码，解决实际的问题

1、  预加载和对预加载的扩展  

大家都知道，在 HTML 里面可以用 <img> 标签来引用图片资源，如：

<div id=’imgArea’>

<img src=’../maps/heping/heping_01.jpg’/>

</div>

浏览器解析到这一行的时候，就会到指定的路径下面去取图片。

假设有如下一种需求：在一个 div 层里面现实图片，在图片上点击鼠标的时候切换下一张图片，类似于幻灯片的效果。

这时候就需要采用一种预先加载的方式，虽然刚加载的时候只显示了第一张图，但是如果等到用户点击了鼠标再去到网络上拿第二张图，可能就会造成等待。

那么就需要这样来处理：当第一张图加载完之后，脚本在后台执行，预先把下面的图片加载进来：

var  img=new Image();

                            img.src=” ../maps/heping/heping_02.jpg”;

                            当用户点击鼠标之后：

                            var div=document.getElementById(“imgArea’”);

                            div.removeChild( 第一张图 );

                            div.appendChild(img);

         这样处理一下，用户就可能不需要等待立即能看到第二张图。这就是所谓的图片“预加载”。关键点是：当执行 var  img=new Image(); 这一句的时候，只是创建了一个 DOM 的 Image 对象，在给这个 img 对象的 src 属性赋值时候，浏览器才会去取数据。

         这样，在用户看第一张图的时候，我们就可以让脚本在后台创建一个数组，然后把后面的图片都进行“预加载”。

         示意代码如下：

         var imgs=[];

         for(var i=0;i<20;i++){// 假设一共 20 张图片

                   var img=new Image();

                   img.src=”…”;

                   imgs.push(img);

}

         这段代码正确理解了预加载技术，在图片个数比较少的时候，运行得很好。但是，当图片很多的时候，这样处理还不够。因为，一旦给 img 对象的 src 赋值，浏览器马上就去加载图片，如果像上面的代码一样在一个 for 循环中赋值，那么实际上会形成一个冲击，浏览器会不断去取这些图。从而可能会造成假死的现象（如下图）。

 
            

 

这时，浏览器会卡死，过一段时间又会恢复过来。

         所以，这里必须做额外的处理，不能让浏览器突然去取那么多的图片，而要在之间有一个时间间隔，具体说也就是在把 src 属性赋值给 image 对象的时候需要加一个 setTimeout 来处理。

         2 、切片拼合

         图片加载完成之后的拼合这里用 table 来处理，关键点是这个 table 的 cellPadding 和 cellSpacing 属性都要赋值成 0 ，否则各个小切片就不能无缝地拼合到一起。