《仔細細分析Ext》第N章図表、エクセル表、GIS、トポロジ構造第三節VMLに基づくWEBGIS 5
9221 ワード
第一部分(底レイヤー)の完全な例コード:
説明:ここではまずオリジナルのDivとTableを簡単にパッケージし、ImageLoaderクラスを作って画像をロードします.この部分のコードはVmlの内容に関係していません.各ブラウザに共通しています.FireFox、IE 8、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 += "
"+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/