|
阅读：1633回复：2
arcims(HtmlView)开发经验总结(5) webGIS基本框架
<P>viewer.htm</P>
<P><HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> </HEAD> <TITLE>地理信息平台</TITLE> </HEAD></P> <P><FRAMESET ROWS="*,50" BORDER=0 > </P> <P> <FRAME NAME="MapFrame" SRC="Map.htm" SCROLLING="No" FRAMEBORDER="1" bordercolor="#ffffffff" RESIZE="YES"> <FRAME NAME="PostFrame" SRC="jsForm.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="0" NORESIZE FRAMESPACING="0" BORDER="0"> </FRAMESET> <NOFRAMES> <BODY> <P> </BODY> </noframes></HTML></P> <P> jsForm.htm</P> <P><HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <TITLE>Default Form</TITLE> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> function passXML() {</P> <P>} </SCRIPT> </HEAD> <BODY BGCOLOR="White" onload="passXML()"> <P> <FORM ACTION="operate.asp" METHOD="POST" name="theForm"> <INPUT TYPE="Hidden" NAME="x1" SIZE="40"> <INPUT TYPE="Hidden" NAME="x2" SIZE="40"> <INPUT TYPE="Hidden" NAME="y1" SIZE="40"> <INPUT TYPE="Hidden" NAME="y2" SIZE="40"> </FORM> </BODY> </HTML></P> <P>map.htm</P> <P> <body onload="init()" onmousedown="m_down()" onmouseup="m_up()"> <div id="map" style="position:absolute;background-color:#ffff9c; overflow:auto; left:15px; top:10px; width:500px; height:400px; z-index:1; visibility:visible;text-align:center;"> 我是地图请点击我。 </div> <div id="shuoming" style="position:absolute;left:600px; top:10px; overflow:auto;"></P> <P></div> </body> <script> function init(){ }</P> <P>var mouseX1; var mouseY1; var mouseX2; var mouseY2; function m_down(){ var objId=window.event.srcElement.id; if(objId=='map'){ mouseX1=event.clientX + document.body.scrollLeft-window.event.srcElement.style.pixelLeft; mouseY1=event.clientY + document.body.scrollTop-window.event.srcElement.style.pixelTop; pf('鼠标下击：x='+mouseX1+' y='+mouseY1); } } function m_up(){ var objId=window.event.srcElement.id; if(objId=='map'){ mouseX2=event.clientX + document.body.scrollLeft-window.event.srcElement.style.pixelLeft; mouseY2=event.clientY + document.body.scrollTop-window.event.srcElement.style.pixelTop; pf('鼠标释放：x='+mouseX2+' y='+mouseY2); request(); pf('请求...............'); } } function request(){ var thePostForm = parent.PostFrame.document.forms[0]; thePostForm.x1.value = mouseX1; thePostForm.x2.value = mouseX2; thePostForm.y1.value = mouseY1; thePostForm.y2.value = mouseY2; thePostForm.action='operate.asp'; thePostForm.submit(); } function process(msg){ pf('响应...............'); alert(msg); } function pf(msg){ shuoming.insertAdjacentHTML("BeforeEnd", "<P>" + msg + "</P>");</P> <P>} </script></P> <P> </P> |
|
|
1楼#
发布于：2004-12-08 10:21
<P>operate.asp</P><P>
<% dim x1,x2,y1,y2</P><P> x1=Request.Item("x1") x2=Request.Item("x2") y1=Request.Item("y1") y2=Request.Item("y2")</P><P> %> <HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <TITLE>Default Form</TITLE> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> function passXML() {</P><P> var x1='<%Response.Write(x1)%>'; var x2='<%Response.Write(x2)%>'; var y1='<%Response.Write(y1)%>'; var y2='<%Response.Write(y2)%>'; var msg='我是从服务器返回的!\r\n'+' newx1='+x1+' newx2='+x2+' newy1='+y1+' newy2='+y2; parent.MapFrame.process(msg); } </SCRIPT> </HEAD> <BODY BGCOLOR="White" onload="passXML()"> <P> <FORM ACTION="operate.asp" METHOD="POST" name="theForm"> <INPUT TYPE="Hidden" NAME="x1" SIZE="40"> <INPUT TYPE="Hidden" NAME="x2" SIZE="40"> <INPUT TYPE="Hidden" NAME="y1" SIZE="40"> <INPUT TYPE="Hidden" NAME="y2" SIZE="40"> </FORM> </BODY> </HTML></P> |
|
|
2楼#
发布于：2004-12-08 10:22
<P>有个网友问我webgis开发如何与服务器交互。 据我经验，操作地图而不刷新页面 在性能，美观，状态保存各方面都有优胜。 </P><P>以上是我依照arcIMS(htmlview)写的个例子，可以在其基础上扩展。</P><P>viewer.htm 主页面 包括 地图显示页面(map.htm) 和 隐藏的服务器交互页面(jsForm.htm)
operate.asp 服务器操作。 可以根据客户端发来的参数，用mapxtreme,ims等处理后，返回结果。</P><P>用这个框架，我们可以把 逻辑实现 和 表示实现 分离。方便了系统维护，升级。 比如，我想从mapxtreme for nt到mapxtreme for java,表示逻辑变动不到。mapxtreme到ims,也可以很容易的平台变动。 </P> |
|
