Skyline地图二次开发框架.docx

1、Skyline地图二次开发框架项目介绍： 项目是三维地理信息系统的开发，框架MVC4.0 + EF5.0 + Extjs4.2 + SkyLine + Arcgis，是对SkyLine的二次开发。项目快结束了，先给大家看一眼效果。话不多说，直接进入主题。1.创建一个MVC项目2.将项目自带的一些文件，删掉并且创建一个，不继承模板页的View3.将Extjs5.0的包引进去-创建一个JS文件SkyMap，存放Skyline的功能。4.将三维球空间放置到View中。5.将.fly文件加载进来-在页面Onload事件中调用此函数(此函数写在SkyMap.js文件里)。123456789/页面初始化函

2、数functionCreateSGWord() 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-0001023

3、952c1;sgworld.Open(http:/10.10.10.10/xx.FLY);6.运行-在页面没有进行布局的情况下，是下面的效果。7.结束语今天就写到这，后面会讲到，在开发过程中，碰到的一系列的难题，并且解决方案。上节讲到，地图加载。但我们可以发现，当没有页面布局的情况下，控件，没有占满整个屏幕，这里我们就要用到Extjs的功能了。这节要讲的是用Extjs为控件布局，让它适应任何版本的IE浏览器(因为SkyLine目前只支持IE)。1.将Extjs包引进项目。-这里需要注意，网上下载的Extjs5.0包里，包含有很多例子之类的，为了保证项目尽可能的干净，我们只去一小部分。2.在项目

4、中应用-我们在上一节，将OBJECT空间直接写在Index.cshtml里，在这里，我们需要修改一下，我们要用Extjs里的ViewPort渲染到Index.cshtml里。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354Layout = null;三维地图 *这样IE8-9就可以兼容了，IE10暂时没测试*Ext.onReady(function () Ext.define(HJ.view.Main, extend: Ext.panel.Pan

5、el,layout: border,alias: widget.main,initComponent: function () var centerPanel = Ext.create(Ext.panel.Panel, region: center,margins: 0 0 0 0,paddings: 0 0 0 0,layout: fit,style: textAlign: right,items: html: );this.items = centerPanel;this.callParent(arguments););Ext.create(Ext.container.Viewport,

6、layout: border,autoload: true,items: xtype: main, region: center););3.在没有加载地图的时候，我们看一下效果。-占满了整个屏幕。4.结束语-有些人会说，这个控件布局何必这么麻烦，检测下IE高度，加载控件时将高度附上去就OK了，这里我想说的是，既然要判断那就需要IE版本，或者以后SkyLine开发Google或者火狐浏览器时，还得判断其他浏览器，这里Extjs是我找到比较省事儿的方法。上节将显示我们地图的OBJECT控件，布了一下局，但地图没有进行加载。这是因为我们要在另一个页面，对OBJECT控件进行地图加载，并且得到该控件的

7、sgworld，以便对其进行我们想要的开发。这里，细心的人会说，为什么要在另一个页面加载呢？为什么不在OBJECT所在页面进行加载呢？这也是一个比较关键性的问题，原因很简单，因为Object控件上，放置任何DIV,SPAN,或者其他控件时，都会被Object控件覆盖在下面。在网上找了很多办法，最有效的，而且项目中常用到的就是IFRAME方法。1.项目中加上一个HTML页。2.在Index.cshtml中加入Iframe,并且src指向MenuPage.html-z-index将Iframe，放置于Object之上。1233.看一下效果。-左-菜单，右-地图4.设置焦点-在这又遇到新问题，页面加

8、载后，当点击3D窗口控件时，左边菜单又被盖到，地图下面。解决办法，设置一个隐藏按钮，放置在MenuPage.html里，在任何情况下，将焦点设置在该按钮上，这个问题就可以解决了。加载的时候，聚一次焦，加上一个文档OnClick事件，当每次点击本文档时，都要聚焦一次。12345678910111213141516171819202122232425262728293031323334function Load() document.getElementById(btnhidden).focus(); /加载时，设置焦点if (document.all) window.document.oncli

9、ck = new Function(return onClick(event);); /当点击MenuPage.html时，再次聚焦 else window.document.body.setAttribute(onclick, return onClick(event););function onClick(ev) ev = ev | window.event;var target = ev.target | ev.srcElement;if (target & target.id & target.id = PanelBox) else if (target.tagName = INPUT

10、) if (target.role = checkbox) document.getElementById(btnhidden).focus(); /当点击checkbox的时候，再次聚焦else document.getElementById(btnhidden).focus(); *这个时候我们发现，我们点击网页上任何地方的时候，菜单页都不会被盖在地图下。5.结束语-这一节，我们征服了，任何HTML控件都不能放在OBJECT控件之上的霸道的一面。继续上一节.1.Extjs5.0版Menu.-将Extjs包引入MenuPage.html页。2.前段用Extjs的MVC框架-在根目录下创建ap

11、p文件夹,文件夹下分别创建controller,model,store,view文件夹-根目录下创建app.js文件-view文件夹下创建MainLayout.js文件-controller文件夹下创建MainController.js文件3.菜单页面布局-MainLayout.js代码1234567891011121314151617181920212223242526272829303132333435363738394041424344Ext.define(ZZH.view.MainLayout, extend:Ext.panel.Panel,alias:widget.mainLayou

12、t,layout:border,initComponent:function() / 底部vartopPanel = Ext.create(Ext.panel.Panel, region:north,split:false,margins:0 0 0 0);/ 左边varleftPanel = 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, t

13、itle:菜单5, title:菜单6, title:菜单7);/中心varcenterPanel = Ext.create(Ext.panel.Panel, );/ 右侧varresultPanel;this.items = leftPanel, centerPanel, resultPanel;this.callParent(arguments););-MainController.js代码12345678Ext.define(ZZH.controller.MainController, extend:Ext.app.Controller,init:function(app) this.c

14、ontrol();,views: MainLayout);4.将MainLayout渲染到MenuPage.html里，并且加载地图-app.js代码-把app.js引用到MenuPage.html里12345678910111213141516171819202122232425262728Ext.application(name:ZZH,appFolder:./app,controllers: MainController,launch:function() Ext.create(Ext.container.Viewport, layout:fit,autoload:true,items:

15、 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代码

16、123456789/页面初始化函数functionCreateSGWord() 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.cl

17、assid =CLSID:3a4f9197-65a8-11d5-85c1-0001023952c1;sgworld.Open(http:/xx.xx.xx.xx/xxx.FLY);5.运行6.这时我们注意到，当点击菜单页后，再点击地图时，地图还是会给菜单覆盖掉(真是令人头疼哈)-没有关系，我们将MenuPage.html里的代码改成如下。1234567891011121314151617181920212223242526272829303132333435363738394041function Load() document.getElementById(btnhidden).focus(); /加载时，设置焦点function MyFocus() if (document.all) window.document.onclick = new Function(return onClick(event);); /当点击MenuPage.html时，再次聚焦 else