Skyline地图二次开发框架.docx
《Skyline地图二次开发框架.docx》由会员分享,可在线阅读,更多相关《Skyline地图二次开发框架.docx(28页珍藏版)》请在冰豆网上搜索。
![Skyline地图二次开发框架.docx](https://file1.bdocx.com/fileroot1/2023-4/21/e8bc91cd-725f-41a7-9da5-86d22bf212e4/e8bc91cd-725f-41a7-9da5-86d22bf212e41.gif)
Skyline地图二次开发框架
项目介绍:
项目是三维地理信息系统的开发,框架MVC4.0+EF5.0+Extjs4.2+SkyLine+Arcgis,是对SkyLine的二次开发。
项目快结束了,先给大家看一眼效果^^。
话不多说,直接进入主题。
1.创建一个MVC项目
2.将项目自带的一些文件,删掉并且创建一个,不继承模板页的View
3.将Extjs5.0的包引进去
-创建一个JS文件SkyMap,存放Skyline的功能。
4.将三维球空间放置到View中。
5.将.fly文件加载进来
-在页面Onload事件中调用此函数(此函数写在SkyMap.js文件里)。
1
2
3
4
5
6
7
8
9
//页面初始化函数
function CreateSGWord(){
document.getElementById("TerraExplorerX").setAttribute("classid", "CLSID:
3a4f9192-65a8-11d5-85c1-0001023952c1");
document.getElementById("TerraExplorerX").style.display= "block";
sgworld=document.createElement("object");
sgworld.id= "sg";
sgworld.classid= "CLSID:
3a4f9197-65a8-11d5-85c1-0001023952c1";
sgworld.Open("http:
//10.10.10.10/xx.FLY");
}
6.运行
-在页面没有进行布局的情况下,是下面的效果。
7.结束语
今天就写到这,后面会讲到,在开发过程中,碰到的一系列的难题,并且解决方案。
上节讲到,地图加载。
但我们可以发现,当没有页面布局的情况下,
这节要讲的是用Extjs为
1.将Extjs包引进项目。
-这里需要注意,网上下载的Extjs5.0包里,包含有很多例子之类的,为了保证项目尽可能的干净,我们只去一小部分。
2.在项目中应用
-我们在上一节,将OBJECT空间直接写在Index.cshtml里,在这里,我们需要修改一下,
我们要用Extjs里的ViewPort渲染到Index.cshtml里。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@{
Layout=null;
}
DOCTYPE html>
三维地图 @*这样IE8-9就可以兼容了,IE10暂时没测试*@
Ext.onReady(function(){
Ext.define('HJ.view.Main',{
extend:
'Ext.panel.Panel',
layout:
'border',
alias:
'widget.main',
initComponent:
function(){
varcenterPanel=Ext.create('Ext.panel.Panel',{
region:
'center',
margins:
'0000',
paddings:
'0000',
layout:
'fit',
style:
{
textAlign:
'right'
},
items:
{
html:
''
}
});
this.items=[centerPanel];
this.callParent(arguments);
}
});
Ext.create('Ext.container.Viewport',{
layout:
'border',
autoload:
true,
items:
[
{
xtype:
'main',region:
'center'
}
]
});
});
3.在没有加载地图的时候,我们看一下效果。
-占满了整个屏幕^^。
4.结束语
-有些人会说,这个控件布局何必这么麻烦,检测下IE高度,加载控件时将高度附上去就OK了,
这里我想说的是,既然要判断那就需要IE版本,或者以后SkyLine开发Google或者火狐浏览器时,还得判断其他浏览器,
这里Extjs是我找到比较省事儿的方法。
上节将显示我们地图的OBJECT控件,布了一下局,但地图没有进行加载。
这是因为我们要在另一个页面,对OBJECT控件进行地图加载,并且得到该控件的sgworld,以便对其进行我们想要的开发。
这里,细心的人会说,为什么要在另一个页面加载呢?
为什么不在OBJECT所在页面进行加载呢?
这也是一个比较关键性的问题,原因很简单,
因为Object控件上,放置任何DIV,SPAN,或者其他控件时,都会被Object控件覆盖在下面。
在网上找了很多办法,最有效的,而且项目中常用到的就是IFRAME方法。
1.项目中加上一个HTML页。
2.在Index.cshtml中加入Iframe,并且src指向MenuPage.html
-z-index将Iframe,放置于Object之上。
1
2
3
3.看一下效果。
-左-菜单,右-地图^^
4.设置焦点
-在这又遇到新问题,页面加载后,当点击3D窗口控件时,左边菜单又被盖到,地图下面。
解决办法,设置一个隐藏按钮,放置在MenuPage.html里,在任何情况下,将焦点设置在该按钮上,这个问题就可以解决了。
加载的时候,聚一次焦,加上一个文档OnClick事件,当每次点击本文档时,都要聚焦一次。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
DOCTYPE html>
//www.w3.org/1999/xhtml">
functionLoad(){
document.getElementById('btnhidden').focus(); //加载时,设置焦点
if(document.all){
window.document.onclick=newFunction("returnonClick(event);");//当点击MenuPage.html时,再次聚焦
}else{
window.document.body.setAttribute("onclick","returnonClick(event);");
}
}
functiononClick(ev){
ev=ev||window.event;
vartarget=ev.target||ev.srcElement;
if(target&&target.id&&target.id=="PanelBox"){
}
else{
if(target.tagName=='INPUT'){
if(target.role=='checkbox'){
document.getElementById('btnhidden').focus(); //当点击checkbox的时候,再次聚焦
}
}
else{document.getElementById('btnhidden').focus();}
}
}
40px;z-index:
-2;position:
absolute;top:
0px;left:
0px;filter:
alpha(opacity=0);"id="btnhidden"/>
*这个时候我们发现,我们点击网页上任何地方的时候,菜单页都不会被盖在地图下。
5.结束语
-这一节,我们征服了,任何HTML控件都不能放在OBJECT控件之上的霸道的一面。
继续上一节...
1.Extjs5.0版Menu.
-将Extjs包引入MenuPage.html页。
2.前段用Extjs的MVC框架
-在根目录下创建app文件夹,文件夹下分别创建controller,model,store,view文件夹
-根目录下创建app.js文件
-view文件夹下创建MainLayout.js文件
-controller文件夹下创建MainController.js文件
3.菜单页面布局
-MainLayout.js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Ext.define('ZZH.view.MainLayout',{
extend:
'Ext.panel.Panel',
alias:
'widget.mainLayout',
layout:
'border',
initComponent:
function (){
//底部
var topPanel=Ext.create('Ext.panel.Panel',{
region:
'north',
split:
false,
margins:
'0000'
});
//左边
var leftPanel=Ext.create('Ext.tab.Panel',{
layout:
'fit',
tabPosition:
'left',
region:
'west',
id:
'tabbar',
alias:
'tabbar',
width:
400,
items:
[
{title:
'菜单1' },
{title:
'菜单2' },
{title:
'菜单3' },
{title:
'菜单4' },
{title:
'菜单5' },
{title:
'菜单6' },
{title:
'菜单7' }
]
});
//中心
var centerPanel=Ext.create('Ext.panel.Panel',{});
//右侧
var resultPanel;
this.items=[leftPanel,centerPanel,resultPanel];
this.callParent(arguments);
}
});
-MainController.js代码
1
2
3
4
5
6
7
8
Ext.define('ZZH.controller.MainController',{
extend:
'Ext.app.Controller',
init:
function (app){
this.control({
});
},
views:
['MainLayout']
});
4.将MainLayout渲染到MenuPage.html里,并且加载地图
-app.js代码
-把app.js引用到MenuPage.html里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Ext.application({
name:
'ZZH',
appFolder:
'../app',
controllers:
[
'MainController'
],
launch:
function (){
Ext.create('Ext.container.Viewport',{
layout:
'fit',
autoload:
true,
items:
[
{
xtype:
'mainLayout'
}
],
listeners:
{
afterrender:
{
fn:
function (vp,eOpts){
setTimeout('CreateSGWord()',1);
}
}
}
});
}
});
-这里要注意的是CreateSGWord()函数,之前我们是在SkyMap.js文件中写到取Object控件是
document.getElementById("TerraExplorerX").setAttribute("classid","CLSID:
3a4f9192-65a8-11d5-85c1-0001023952c1");
但我们后来加了Iframe,结构变了,代码也需要稍微改一下
SkyMap.js代码
1
2
3
4
5
6
7
8
9
//页面初始化函数
function CreateSGWord(){
window.parent.document.getElementById("TerraExplorerX").setAttribute("classid", "CLSID:
3a4f9192-65a8-11d5-85c1-0001023952c1");
window.parent.document.getElementById("TerraExplorerX").style.display= "block";
sgworld=document.createElement("object");
sgworld.id= "sg";
sgworld.classid= "CLSID:
3a4f9197-65a8-11d5-85c1-0001023952c1";
sgworld.Open("http:
//xx.xx.xx.xx/xxx.FLY");
}
5.运行
6.这时我们注意到,当点击菜单页后,再点击地图时,地图还是会给菜单覆盖掉(真是令人头疼哈)
-没有关系,我们将MenuPage.html里的代码改成如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
DOCTYPE html>
//www.w3.org/1999/xhtml">
functionLoad(){
document.getElementById('btnhidden').focus(); //加载时,设置焦点
}
functionMyFocus(){
if(document.all){
window.document.onclick=newFunction("returnonClick(event);");//当点击MenuPage.html时,再次聚焦
}else{