基于二維和三維利用iframe來實現(xiàn)分屏跨域

二維界面(test.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試demo</title>
<link rel="stylesheet" href="./css/animate.min.css" />
<script src="./js/jquery.min.js"></script>

    <script type="text/javascript">

paramer= {"xmin":116.54021315114413,"ymin":38.417550531259764,"xmax":118.73747877614413,"ymax":39.507943597666014}
function callChild(fun, paramer) {

            syniframe("http://127.0.0.1:8020/二三維同步demo/test/syn3DMap.html", fun, paramer);
        }
        function syniframe(url, fun, paramer,x) {
            var paramerurl = 'fun=' + fun + '&paramer=' + paramer  +'&t=' + Math.random();
            paramerurl = encodeURI(paramerurl);
            if (typeof(synobj) == 'undefined') {
                synobj = document.createElement('iframe');
                synobj.name = 'synframe';
                synobj.src = url + '?' + paramerurl;
                synobj.style.display = 'none';
                document.body.appendChild(synobj);
            } else {
                synobj.src = url + '?' + paramerurl;
            }
        }
    </script>
</head>

<body>
    <div id="maincontent" style="width: 100%;height: 100%;">
        <div id="map2DContainer" style="position: absolute;height: 100%; left:0px; top: 0px; right: 50%; bottom: 0;">
            <input id="button" type="button" value="按鈕" onclick="callChild(thislocation关拒,paramer)" />
        </div>
        
        <div id="map3DContainer" style="position: absolute;height: 99.6%;left:50%; top: 0px; right: 0; bottom: 0;">
            <iframe name="map3dframe" onload="" src="http://127.0.0.1:8020/二三維同步demo/test/test.html" scrolling="no" frameborder="0" style="width: 100%; height: 100%;overflow-y:hidden;overflow-x:hidden;" /></iframe>
        </div>
    </div>
</body>

</html>
三維界面(syn3DMap.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> </title>
</head>

<body>
<script type="text/javascript">
var src = window.location.href;
// 解析參數(shù)
var winurl = src;
var wlp = winurl.split("?")[1];
var wincs = wlp.split("&");
if(wincs != null && wincs.length > 0){
for (var i = 0; i < wincs.length; i++) {
var tur = wincs[i].split("=");
if (tur[0] == "fun") {
fun = tur[1];
}else if(tur[0] == "paramer"){
paramer = tur[1];
}
}
}
paramer = paramer.substring(0,paramer.length);
// 函數(shù)名
var obj = eval('(' + paramer + ')');
if (fun="thislocation"){
parent.window.map3dframe.thislocation(obj.xmin,obj.xmax,obj.ymin,obj.ymax);
}
</script>
</body>
</html>
三維界面(test.html)
<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var flyurl="D:\data\tjfly\YJP_MX\fly\kong.fly";
function load(){
SGWorld.Project.Open(flyurl)
}
function thislocation(xmin,xmax,ymin,ymax){
if(xmin&&xmax&&ymin&&ymax){
var pointArray=[];
pointArray.push(xmin);
pointArray.push(ymax);
pointArray.push(0);
pointArray.push(xmax);
pointArray.push(ymax);
pointArray.push(0);
pointArray.push(xmax);
pointArray.push(ymin);
pointArray.push(0);
pointArray.push(xmin);
pointArray.push(ymin);
pointArray.push(0);
pointArray.push(xmin);
pointArray.push(ymax);
pointArray.push(0);
var groupId=SGWorld.ProjectTree.CreateGroup("temp");
//創(chuàng)建一個extent對應(yīng)的矩形致讥,找到一個合適的高度適應(yīng)extent(范圍)
var polygon=SGWorld.Creator.CreatePolygonFromArray(pointArray,0xFF00FF00,0x00646464,2,groupId);
var dist=polygon.Terrain.GetRecommendedDistance();
var cpos=SGWorld.Creator.CreatePosition(polygon.Geometry.Envelope.Centroid.X, polygon.Geometry.Envelope.Centroid.Y , 0, 0, 0, -89, 0, dist*0.65);
SGWorld.ProjectTree.DeleteItem(groupId);
SGWorld.Navigate.FlyTo(cpos);
}
}
</script>
</head>
<body onload="load()" style="width:100%;height:100%;">
</body>
<object id="TerraExplorer3DWindow" classid="CLSID:3A4F9192-65A8-11D5-85C1-0001023952C1" style="width:100%;height:100%;"></object>
<object id="SGWorld" classid="CLSID:3A4F9199-65A8-11D5-85C1-0001023952C1" style="width:100%;height:100%;"></object>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末逞盆,一起剝皮案震驚了整個濱河市当船,隨后出現(xiàn)的幾起案子裂明,更是在濱河造成了極大的恐慌,老刑警劉巖筑公,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闹啦,死亡現(xiàn)場離奇詭異,居然都是意外死亡票腰,警方通過查閱死者的電腦和手機甜滨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肮之,“玉大人掉缺,你說我怎么就攤上這事「昵埽” “怎么了眶明?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長筐高。 經(jīng)常有香客問我搜囱,道長,這世上最難降的妖魔是什么柑土? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任蜀肘,我火速辦了婚禮,結(jié)果婚禮上稽屏,老公的妹妹穿的比我還像新娘幌缝。我一直安慰自己,他們只是感情好诫欠,可當(dāng)我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布涵卵。 她就那樣靜靜地躺著,像睡著了一般荒叼。 火紅的嫁衣襯著肌膚如雪轿偎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天被廓,我揣著相機與錄音坏晦,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛昆婿,可吹牛的內(nèi)容都是我干的球碉。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼仓蛆,長吁一口氣:“原來是場噩夢啊……” “哼睁冬!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起看疙,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤豆拨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后能庆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體施禾,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年搁胆,在試婚紗的時候發(fā)現(xiàn)自己被綠了弥搞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡渠旁,死狀恐怖拓巧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情一死,我是刑警寧澤肛度,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站投慈,受9級特大地震影響承耿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜伪煤,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一加袋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抱既,春花似錦职烧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至捷泞,卻和暖如春足删,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锁右。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工失受, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留讶泰,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓拂到,卻偏偏與公主長得像痪署,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子兄旬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 單例模式 適用場景:可能會在場景中使用到對象狼犯,但只有一個實例,加載時并不主動創(chuàng)建辖试,需要時才創(chuàng)建 最常見的單例模式辜王,...
    Obeing閱讀 2,065評論 1 10
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品劈狐,去做同樣的事情罐孝,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,752評論 2 17
  • 如何控制alert中的換行肥缔?\n alert(“p\np”); 請編寫一個JavaScript函數(shù) parseQu...
    heyunqiang99閱讀 1,084評論 0 6
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理莲兢,服務(wù)發(fā)現(xiàn),斷路器续膳,智...
    卡卡羅2017閱讀 134,652評論 18 139
  • body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoot...
    wangyw閱讀 576評論 0 0