MapGIS10Web端应用开发之JavaScript应用开发

1、开发新视界，共享智开发新视界，共享智无限无限MapGIS MapGIS 直通车直通车MapGIS 10 Web端应用开发之JavaScript应用开发平台二次开发支持部第一部分 基于Javascript的二次开发体系第二部分 “纵生”式开发模式之Javascript开发介绍第三部分 开发入门实战第一部分MapGIS IGServer平台架构OpenLayers简介 开发框架介绍二次开发功能库介绍【让人人享有地理信息服务】 MapGIS IGServer平台架构1.1业务数据（气象/实时交通/公交/车辆/导航/PIO/）数据服务器三维数据矢量数据卫星影像数据文档数据Micro CoreJAVA.

2、NET数据仓库功能仓库基础内核JAVA.NETMapGIS Web ServiceOGC Service第三方Web服务Interface三维地图服务真三维服务第三方地图服务空间分析三位分析网络分析大众应用OGC服务应用影像分析追踪等值线地形分析车载导航定位监控。3S功能服务服务层服务集群集群配置管理集群状态监控MapGIS Server Manager功能仓库服务发布管理权限管理安全管理集群管理FlexSliverlightJavaScript搭建式政府应用大众应用企业应用客户端MapGIS IGServer二次开发体系【让人人享有地理信息服务】开发框架介绍1.2基于JavaScript的二

3、次开发框架介绍GIS数据业务数据其他数据系统数据功能服务（.NET/Java）数据服务（.NET/Java）DCServer内核GIS服务IGServer（.NET/Java）Browser Application客户端基本库开源库支持扩展直接通信【让人人享有地理信息服务】OpenLayersOpenLayers简介简介1.3技术复杂、开发难度大 性能差，不能满足更高的、全方位的Web体验要求传统JavaScript开发模式重要转变前后台模式纯客户端模式快捷的开发，强大的功能，丰富的体验纯客户端新特性：客户端GIS应用的转变11OpenLayers是由MetaCarta公司开发的用于GIS客户

4、端的开源JavaScript包，采用纯面向对象的JavaScript方式开发，全面支持跨浏览器，意在为互联网客户端提供强大的地图展示功能。支持网络多源地图、图片数据显示 全面支持 跨浏览器客户端展现绚丽全开放的应用扩展能力JavaScript新技术特点OpenLayers新技术之一JavaScript：基于REST服务，是一组非常便于理解的URL，它将互联网上的一切都表示为资源，使用REST，以请求资源的Json表示形式，并快速的将Json转化为javascript对象，而无需使用传统的ashx页面。这样将帮助您大幅度减少工程的复杂度和代码量。第三方Web服务MapGIS WebService

5、OGC WebServiceJavaScriptREST服务标准OpenLayers新技术之一1、二次开发方式：代码式(功能类)2、使用二次开发库：基本库+开源库+扩展IGServer（GIS服务）基础库（GIS基本功能封装）开源库（OpenLayers地图展现功能、自定义地图控件+扩展）OpenLayers开发模式【让人人享有地理信息服务】二次开发功能库介绍1.4MapGIS IGS JavaScript 开发方式： MapGIS IGServer平台二次开发方式中的一种（脚本开发模式）。 提供一套客户端二次开发脚本库zdclient.jszdclient与 OpenLayers ： 借鉴

6、继承 结合 脚本API借鉴OpenLayers纯面向对象的思想而开发，所有功能都由对象提供，开发方式类似于C#、Java等编译型面向对象语言。OpenLayers二次开发功能库介绍 支持Javascript客户端直接跨域访问REST服务，无需站点后台页面中转。跨域 客户端提供了代理服务，便于一些对数据安全性要求较高的用户隐藏真实服务器地址。安全性 客户端兼容IE，Chrome和Firefox等主流浏览器，用户不需要再去关心浏览器的兼容性。兼容性全面的GIS常用功能接口，包括地图显示、编辑、查询、几何分析（单点投影、计算面积和距离、拓扑分析）、缓冲区分析、叠加分析、裁剪分析、网络分析、投影变换、

7、目录服务、专题图服务等。GIS功能全面支持API扩展。扩展性zdclient.js的特点17zdclient.js实质上是IGServer平台提供的数据与功能服务在客户端的封装，用户调用该库的功能控件可以直接获取IGServer平台提供的数据与功能资源，无需关注IGServer平台提供的资源服务的调用接口。zdclientMapServiceObjectDocTileLayerAnalysisCatalogEditQueryThemeArcPoint2Dzdclient.js接口介绍显示瓦片图示例 var map, tile;$(document).ready(function () map

8、= new OpenLayers.Map(map1, numZoomLevels: 10, maxExtent: new OpenLayers.Bounds(114.125602, 30.453932, 114.500707, 30.829037), maxResolution: 0.00146525390625,controls: new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(); tile = new Zondy.Map.TileLayer(MapGIS Tile, WhMap);map.

9、addLayer(tile); map.setCenter(new OpenLayers.LonLat(114.300, 30.57), 3); ); MapGIS IGServer MapDisplay Example 矢量地图文档、瓦片地图、矢量图层显示 显示瓦片图示例代码第一部分 基于Javascript的二次开发体系第二部分 “纵生”式开发模式之Javascript开发介绍第三部分 开发入门实战新一代工具集开发模式应用框架功能插件配置文件插件存放容器JSON配置文件框架+插件Web开发模式架构Web应用框架装载功能插件工具条读取并解析$framework$.json文件，动态加载插件功

10、能插件目录（$tools$）功能插件1功能插件2功能插件1插件入口程序插件入口程序$framework$.json调用插件功能功能插件：创建功能应用便于框架调用；Web应用框架：通过JSON配置的调用功能插件里的js方法。2、调用插件2、调用插件读取$framework$.json插件信息1、创建UI菜单1234实现插件实现插件搭建框架搭建框架运行运行打包打包入门实战示例步骤流程【让人人享有地理信息服务】开发框架搭建流程Web应用框架开发创建Web站点32$framework$.json信息结构定义页面标题插件按钮地图容器基本操作创建Web框架站点读配置文件，创建功能菜单添加功能插件文件夹和配

11、置文件1Web应用框架开发添加文件32$framework$.json信息结构定义创建Web框架站点读配置文件，创建功能菜单添加功能插件文件夹和配置文件1Web应用框架开发json文件结构3$framework$.json信息结构定义创建Web框架站点读配置文件，创建功能菜单添加功能插件文件夹和配置文件属性属性说明说明id插件的idname工具插件名称或功能名author作者description插件的描述信息imgSrc插件功能按钮图片urlimgFun插件按钮点击执行的js方法jsPage插件初始引入的js文件属性属性说明说明idWeb框架IDtoolsWeb框架调用插件的配置信息，JSO

12、N结构配置信息为JSON结构属性字段名称可自定义2112$framework$.json信息结构定义读配置文件，创建功能菜单3Web应用框架开发创建功能菜单创建Web框架站点添加功能插件文件夹和配置文件【让人人享有地理信息服务】工具插件开发Web插件开发插件是基于框架进行开发从云交易中心下载应用，基于该应用的框架进行开发插件重新开发新的框架，基于此框架进行插件开发插件开发插件开发1、引入js文件2、json配置3、开发具体功能插件开发要点Web插件开发var toolIdKB= ;/获取工具插件IDvar fileName = importKBCtrl.js;var scripts = doc

13、ument.getElementsByTagName(script);for (var i = 0; i scripts.length; i+) var src = scriptsi.src; if (src.indexOf(fileName) != -1) src = src.substring(src.lastIndexOf(fileName+ ?) + (fileName.length + 1); var array = src.split(&); for (var j = 0; j array.length; j+) var finalObj = arrayj.split(=)

14、; if (finalObjj = toolId) toolIdKB = finalObjj + 1;/iD /动态引入js文件到主页面loadjscssfile(/js/KeyBordControl.js, js, toolIdKB);/IDid:a75749662f714e938c11169d4e9fc44a,name:OpenLayersTileDemo,tools: id:001, name:添加基本控件, version:1.0, author:w. x., imgSrc:/lib/basicop.png, imgFun:AddBasicControl, jsPage:/js/MapBasicControls.js MapBasicControls.js初始引入插件的js文件JSON配置的插件信息第一部分 基于Javascript的二次开发体系第二部分 “纵生”