OpenLayer + Ags 综合应用(一)--OpenLayer 地图展现

简介:

OpenLayer是一个用于浏览器地图展示的js库,用于构建基于网络的地理应用,OpenLayer使用Prototype.js和Rico作为核心库的基础,实现了工业标准的地理数据访问方法(OGC标准)。在企业级GIS应用中,能较好的作为客户端应用开发框架,消除和GIS服务层之间的耦合。

    ArcGIS Server 9.3对OGC标准提供了更好的支持,OGC标准成为了OpenLayer和ArcGIS Server服务连接的桥梁,基于Ags服务进行OpenLayer开发,是除了adf、js/flex/silverlight api官方开发框架之外的新选择。

    网上已经有很多OpenLayer开发的资源:
    
http://www.3snews.net/?uid-10624-action-spacelist-type-blog-itemtypeid-793
    or Google Search "OpenLayer"

    该系列文章会重复部分OpenLayer功能实现,但更重要的是和大家一起研究OpenLayer设计模式,及如何有效利用Ags服务进行OpenLayer开发。

    准备工作:

    1.下载OpenLayer 2.7
    网址:http://openlayers.org/

    2.成功安装ArcGIS Server 9.3
    安装方法:http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=3891&extra=page%3D1

    3.准备一套完整的Sample数据,可以从ArcGIS Tutor中copy一份,也可以使用自己已有的或从网站上下载数据。

    暂时无法做好2、3准备工作没有关系,先从OpenLayer(简称OL)开始。

    主体内容:

    1.分析OL代码框架和构成请参考其他文章,从Sample示例中最简单的地图展现开始

Code


    几个关键点:
    (1)引入OpenLayer.js
    (2)body onload中初始化地图

    OpenLayer.Layer要和中文翻译的“图层”概念区分开,这里的一个Layer是一个完整的服务,例如Ags服务器发布出来的一个WMS服务,这个服务可能有一个或多个图层组成。

    2.理解OpenLayer.Layer

Code


    这里添加了三个wms服务,每个服务都是作为OL Map的一个Layer,运行之后可以看到Base Layer和Overlayers,并不包含三个服务中的具体图层。


    服务前面有的是单选框,有的是复选框,显示复选框是因为设置了transparent为true,透明图层一般放置在地图上方,不会用做底图,因此OL使用复选框方便用户选择或取消该服务地图的显示,设置为false之后,全部为底图只能单选。



    3.一次性添加多个服务

    除了map.addLayers逐个添加服务外,还可以将多个服务作为一个Array一次性加入map中:
Code

    4.OL文档

    OL在线和下载包中都有一份参考文档,devdocs更全一些,但还是没有囊括所有参数说明,可以从前面使用到的OpenLayer.Layer.WMS对象得到证实,构造方法中的参数:
name {String} A name for the layer 
url {String} Base url for the WMS (e.g.  http://wms.jpl.nasa.gov/wms.cgi) 
params {Object} An object with key/value pairs representing the GetMap query string parameters and parameter values. 
options {Ojbect} Hashtable of extra options to tag onto the layer 

    到此就没有更详细的说明了,只能根据Sample示例和源码去积累,如第三组参数除layers外还有:
Code

    还可以设置第四组参数{'displayInLayerSwitcher': false},layer服务将不显示在服务列表(上图中的蓝色面板)中,默认值为true。{'isBaseLayer': false},默认值为true,服务前显示单选框。这些都需要我们逐步去摸索。

    5.OpenLayers.Layer.WMS

    刚才提到过两个参数displayInLayerSwitcher、isBaseLayer,它们并没有在OpenLayers.Layer.WMS定义,而是在父类OpenLayers.Layer,中间还有OpenLayers.Layer.HTTPRequest、 OpenLayers.Layer.Grid,文档中没有详细说明,但可以从源码中获得更多信息。从这种继承关系中可以发现,OpenLayers继承全部通过prototype原型继承方式实现。

    小结:

    Map对象是地图展示的核心,一切和地图操作相关都要和Map打交道,里面的属性方法很多,可以去学习controls入手,之前我们都没有定义 controls,但还是可以通过鼠标操作地图,那是因为默认情况下,地图自动拥有Navigation、PanZoom、ArgParser、 Attribution四个controls。


本文转自Flyingis博客园博客,原文链接:http://www.cnblogs.com/flyingis/archive/2008/11/07/1328987.html,如需转载请自行联系原作者

相关文章
|
5月前
|
UED
带您一步步构建一个具有复杂布局的电商详情页,涵盖页面结构规划、样式设计以及交互效果的实现
【6月更文挑战第14天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先,规划页面结构,包括顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。接着,进行样式设计,注重色彩搭配、字体选择、布局与间距以及图片处理。例如,使用固定顶部导航栏,轮播图展示商品图片,分块展示商品信息和评价,以及设计相关商品推荐区。最后,实现交互效果,如图片放大、添加到购物车按钮、滚动监听和评论互动,提升用户体验。实际开发时需根据需求和规范进行调整,保证跨设备兼容性。
111 1
|
6月前
|
Ubuntu 数据可视化 Shell
一键访问多功能数据解决方案:如何轻松构建和管理APITable智能多维表格
一键访问多功能数据解决方案:如何轻松构建和管理APITable智能多维表格
105 0
|
前端开发 JavaScript 定位技术
GIS前端-地图事件编程
GIS前端-地图事件编程
80 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
214 1
|
搜索推荐 JavaScript 数据可视化
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
520 0
|
存储 JSON 数据可视化
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
646 0
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
108 0
|
数据可视化 物联网
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
936 15
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
|
移动开发 数据可视化 前端开发
基于Leaflet的全景综合展示实战
众所周知,当前许多GIS类应用底图数据都是有层级限制。在一些需要高清晰的实景展示需求下,就必须要结合一些更接近真实的展示。比如倾斜摄影测量、Bim技术、全景展示技术。而从经济成本和时间成本上来比较,全景展示技术成本较低,制作流程简单
603 0
基于Leaflet的全景综合展示实战
|
SQL 安全 数据可视化
.NET Core开发的iNeuOS工业互联网平台,发布 iNeuDA 数据分析展示组件,快捷开发图形报表和数据大屏
经过一段时间的努力,iNeuDA产品组件已经开发和测试完成,现在正式上线。现在iNeuOS工业互联网操作系统的技术体系和产品体系更佳完善,为中小企业提供更佳全面解决方案。
457 0
.NET Core开发的iNeuOS工业互联网平台,发布 iNeuDA 数据分析展示组件,快捷开发图形报表和数据大屏
下一篇
无影云桌面