《仔仔细细分析Ext》第N章 图表、Excel报表、GIS、拓扑结构第三节基于VML的WEBGIS5
第一部分（底图层）完整的示例代码：
说明：这里先对原始的 Div 和 Table 做了简单的封装，然后做了一个 ImageLoader 类来加载图片。这部分代码没有涉及 Vml 的内容，对各浏览器是通用的，在 FireFox 、 IE8 、 Safari 下测试通过（以下是代码测试截图）。如果你无法运行，或是发现Bug，欢迎你随时告诉我。
另：附件中是完整的示例，其中的底图包保留所有权利，不得用于商业用途，其它代码可任意修改、使用。
/**
* @author:大漠穷秋
* @since:2009-06-02
* @copyright:完全开放，任何人可以任意修改或扩展
* @qun:88403922
*/
/********************************
* 全局静态对象Vml
* 提供工具函数
********************************/
Vml={
version:'1.0'
};
//属性拷贝
Vml.apply=function(des,src,defaults){
if(defaults){
Vml.apply(des,defaults);
}
if(des&&src&&typeof src=='object'){
for(var p in src){
des[p]=src[p];
}
}
return des;
}
//属性条件拷贝
Vml.applyIf=function (o, c){
if(o && c){
for(var p in c){
if(typeof o[p] == "undefined"){ o[p] = c[p]; }
}
}
return o;
}
Vml.id=0;//简单的全局ID计数器
Vml.getId=function(){
return 'vml-gen-'+(Vml.id++);
};
/********************************
*简单封装一下原始的Tabel
********************************/
//原始Table的简单包装类
Table=function(config){
//属性默认值
this.rows=1;
this.columns=1;
this.tds=new Array();//记录td
//拷贝属性
Vml.apply(this,config);
//开始创建
var tab=document.createElement("table")
tab.border=0;
tab.cellPadding=0;
tab.cellSpacing=0;
var tBody=document.createElement("tbody");
//如果没有指定id，由全局静态对象自动生成一个id
if(!config.id){
tab.id=Vml.getId();
}else{
tab.id=config.id;
}
tab.tds=this.tds;
var tr=null,td=null;
for(var i=0;i<this.rows;i++){
tr=document.createElement("tr");
for(var j=0;j<this.columns;j++){
td=document.createElement("td");
this.tds.push(td);
tr.appendChild(td);
}
tBody.appendChild(tr);
}
tab.appendChild(tBody);
return tab;
}
/********************************
*简单封装一下原始的Div
********************************/
//原始的Div的简单包装类
Div=function(config){
var div=document.createElement('div');
if(!config.id){
div.id=Vml.getId();
}else{
div.id=config.id;
}
Vml.apply(div.style,config);
return div;
}
/********************************
*自定义一个图片加载器
********************************/
//图片加载器
ImgLoader=function(config){
this.imgURL='.';
this.imgNum=0;//图片数目
this.imgNamePrefix='img_';//图片名称前缀
this.imgType=".jpg";
Vml.apply(this,config);
this.imgURLs=new Array();//缓存图片url
this.imgs=new Array();//缓存图片对象
this.loadedNum=0;
this.loadProcId=null;
}
//加载状态处理，图片加载完成事件回调该函数来计算加载进度
ImgLoader.prototype.loadProgress=function(){
var proDiv=document.getElementById('__progress');
if(!proDiv){
proDiv=new Div({
id:'__progress',
width:400,
height:20,
position:'absolute',
left:(document.body.clientWidth/2-this.width),
top:(document.body.clientHeight/2),
backgroundColor:'#00ff00'
});
document.body.appendChild(proDiv);
}else{
var percent=(this.id/this.allNum*100).toFixed(1);
proDiv.innerHTML='<font color="red">正在加载地图，请稍候...'+percent+"%</font>";
if(percent==100){
proDiv.innerHTML='加载完成!';
setTimeout(function(){
try{
document.body.removeChild(proDiv);//移除进度div
}catch(e){
}
},500);
}
}
return this.id;
}
//图片预加载
ImgLoader.prototype.loadImg=function(interval,callback,tab){
//首先根据规则生成所有图片的URL地址
for(var i=1;i<=this.imgNum;i++){
this.imgURLs.push(this.imgURL+this.imgNamePrefix+(i<10?('0'+i):i)+this.imgType);
var img=new Image(); //创建image对象
img.GALLERYIMG="false"; //把图片工具栏禁止掉
img.id=i; //记录是第几张图片，onload事件回调需要使用这个参数计算精确的加载进度
img.allNum=this.imgNum; //记录所有的图片数目
this.imgs.push(img);
}
//进行图片的预加载
var loadedNum=this.loadedNum;
var imgs=this.imgs;
var imgURLs=this.imgURLs;
//缓存方法
var cacheMethod=this.addToTable;
var cache=this;
var appendToTable=function(){
cacheMethod.call(cache,tab);
}
//预加载工具方法
var beginLoad=function(){
if(loadedNum<imgs.length){
var img=imgs[loadedNum];
img.src=imgURLs[loadedNum];
/*
* if(img.complete):如果图片已经加载完成，直接调用回调函数
* 这个判断是为了屏蔽浏览器的差异，浏览器在
* 加载图片的时候都会缓存图片，当发现某个图片
* 已经有缓存的时候，就不会再次到网络上取数据。
* 这时候，因为是从本地缓存里面拿到的图片，各个浏览器对这张图片的onload事件的处理方式不同
* firefox和opera会再次触发出这张图的onload事件而IE和safari不会触发。
* 所以，直接把回调函数赋给img的onload事件在IE和Safari下可能不能正常工作
*/
if(img.complete){
callback.call(img);
}
img.onload=function(){
var id=callback.call(img,tab);
//所有图片都加载完成之后开始插入到表格
if(id==imgs.length){
appendToTable();
}
}
loadedNum++;
/*
* 这里的延迟调用是对图片预加载的扩展
* 在图片比较小，数目比较少的时候，不需要延迟
* 如果图片数目很多，文件比较大，这个延迟时间需要更长一些
* 否则会造成浏览器假死的现象
*/
setTimeout(beginLoad,interval);
}
};
setTimeout(beginLoad,5);//延时启动预加载工具方法
}
//把图片载入到表格中
ImgLoader.prototype.addToTable=function(tab){
for(var i=0;i<tab.tds.length;i++){
try{
tab.tds[i].appendChild(this.imgs[i]);
}catch(e){
}
}
}
页面调用示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<title>WEBGIS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE type="text/css">
<!--
v\:* { BEHAVIOR: url(#default#VML) }
/*标题显示样式*/
.Title {
font-family:"宋体", "华文仿宋";
font-size:16px;
text-align:center;
font-weight:bold;
color:#996600;
vertical-align:middle;
}
-->
</STYLE>
<script language="javascript" src="dump.js"></script>
<script language="javascript" src="mylib.js"></script>
<body>
</body>
<!-- 调用示例 -->
<script language="javascript" type="text/javascript">
//首先创建一个层来容纳Table
var div=new Div({
id:'test'
//,
//width:800,
//height:400,
//position:'absolute'
//,
//left:200,
//top:20,
//backgroundColor:'#cccccc'
});
document.body.appendChild(div);
var tab=new Table({
rows:16,
columns:16,
id:'test2'
});
div.appendChild(tab);
var imgLoader=new ImgLoader({
imgURL:'maps/heping/',
imgNum:256,
imgNamePrefix:'heping_'
})
//参数含义：每张图片之间加载的时间间隔、加载进度回调、表格
imgLoader.loadImg(2,imgLoader.loadProgress,tab);
//imgLoader.addToTable(tab);
</script>
</html>
附一个 简单的dump工具来调试js的object
/**
* @description:dump工具
* @copyright:该文件保留所有权利
*/
function dump(obj) {
m=window.open('','dump','toolbar=no,directories=no,menubar=no,location=no,scrollbars=yes,resizable=yes,status=no,copyhistory=no,top=300,left=370,width=300,height=150');
m.document.writeln("<table border=1>");
for(i in obj) {
m.document.writeln("<tr><td>"+i+"</td><td>"+obj[i]+"</td></tr>");
}
m.document.writeln("</table>");
}
function dump2(obj){
var str ="";
for(var i=0; i<obj.attributes.length;i++){
str += "\n"+obj.attributes.item(i).name+":::"+obj.attributes.item(i).value;
}
alert(str);
}
function debug(message) {
m=window.open('','dump','toolbar=no,directories=no,menubar=no,location=no,scrollbars=yes,resizable=yes,status=no,copyhistory=no,top=300,left=370,width=300,height=150');
m.document.writeln("<p>");
m.document.writeln(message);
m.document.writeln("</p>");
}
其它可用资源
1、openlayers脚本式地图：http://openlayers.org/
2、js-gis：http://jsgis.sourceforge.net/
3、专业级Gis应用站点“GIS空间站”：http://www.gissky.net/
4、NASA主站：http://www.nasa.gov/