Skyline地图二次开发框架.docx
《Skyline地图二次开发框架.docx》由会员分享，可在线阅读，更多相关《Skyline地图二次开发框架.docx（28页珍藏版）》请在冰豆网上搜索。
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:
'3a4f9192-65a8-11d5-85c1-0001023952c1">'
}
}）;
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"/>