OpenLayer + Ags 综合应用(一)--OpenLayer 地图展现
作者:Flyingis
本文严禁用于商业目的,如需转载请注明作者及原文链接,其他疑问请联系:dev.vip#gmail.com
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示例中最简单的地图展现开始
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Basic Single WMS Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Basic Single WMS Example</h1>
<div id="tags"></div>
<div id="shortdesc">Show a Simple Map</div>
<div id="map" class="smallmap"></div>
<div id="docs">
This example shows a very simple layout with minimal controls. This example uses a single WMS base layer.
</div>
</body>
</html>
几个关键点:
(1)引入OpenLayer.js
(2)body onload中初始化地图
OpenLayer.Layer要和中文翻译的“图层”概念区分开,这里的一个Layer是一个完整的服务,例如Ags服务器发布出来的一个WMS服务,这个服务可能有一个或多个图层组成。
2.理解OpenLayer.Layer
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var jpl_wms = new OpenLayers.Layer.WMS(
"NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}
);
var dm_wms = new OpenLayers.Layer.WMS(
"DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png"},
{
minResolution: 0.17578125,
maxResolution: 0.703125
}
);
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
这里添加了三个wms服务,每个服务都是作为OL Map的一个Layer,运行之后可以看到Base Layer和Overlayers,并不包含三个服务中的具体图层。
服务前面有的是单选框,有的是复选框,显示复选框是因为设置了transparent为true,透明图层一般放置在地图上方,不会用做底图,因此OL使用复选框方便用户选择或取消该服务地图的显示,设置为false之后,全部为底图只能单选。
3.一次性添加多个服务
除了map.addLayers逐个添加服务外,还可以将多个服务作为一个Array一次性加入map中:
function init(){
map = new OpenLayers.Map( 'map' );
var urlArray = ["http://t1.labs.metacarta.com/wms-c/Basic.py",
"http://t2.labs.metacarta.com/wms-c/Basic.py"];
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", urlArray, {layers: 'basic'} );
map.addLayer(layer);
}
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外还有:
{
layers: "bathymetry,land_fn,park,drain_fn,drainage,prov_bound,fedlimit,rail,road,popplace",
transparent: "true",
format: "image/png"
}
还可以设置第四组参数{'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。
OpenLayer + Ags 综合应用(一)--OpenLayer 地图展现相关推荐
- 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
- java高德地图api开发平台_【高德地图API】从零开始学高德JS API(一)地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
- 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
- 转载:高德地图API学习 从零开始学高德JS API(一)地图展现
原文地址:https://www.cnblogs.com/milkmap/p/3687855.html [高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图 摘 ...
- 使用PostGIS+GeoServer+Openlayer+Vue构建简单的web地图应用
一.将shx通过postgis导入 1.创建数据库 2.右键–>新建对象–>新建扩展 3.菜单栏点击插件–>打开postgis 也可通过开始菜单 注意点:文件路径不可有中文,文件格式 ...
- openlayer加载天地图 并设置地图颜色为科技蓝
1.天地图是很多地图项目考虑的地图,但是由于天地图的配色与很多ui设计不符合,这里我是通过添加地图时候的className,添加css滤镜进行更改,效果良好,如下图所示: 核心代码:className ...
- 教你做5种地图展现方法,无需代码,上手即会
数据可视化中使用频率最高的展现方式肯定是地图可视化,基本上现有的大屏都是以地图作为主视图来呈现的.怎么将地理数据处理的更好,怎么把地图设计出更好的视觉效果也一直是我们研究的方向. 由于地图能够最直观地 ...
- U880纯GPS定位综合解决方案,支持谷歌地图老虎地图百度地图
一,背景篇 1. 在天国,我们都是不需要谷歌服务的,所有的国行都是没有谷歌服务的.但有太多的机油觉得也许天国之外的东西不一定坏,所以我们需要谷歌服务包(GMS). 我的第一个安卓机是摩托的里程碑,水货 ...
- 用Python绘制地理图,将地图展现可视化,得取数据
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 本文章来自腾讯云 作者:计算机与AI 想要学习Python?有问题得不到第一时间解 ...
最新文章
- 集中化监控SQL Server数据库
- Chrome网络库的请求处理
- Atom ctrl+atl+b 快捷键修复
- 使用VMware VSphere WebService SDK进行开发 (六)——检测告警信息
- SAP Spartacus CmsService的CmsActions.LoadCmsComponent
- Android开发之关于MVVM架构中视图数据绑定框架dataBinding的基本用法
- Object相关方法
- servlet 异常处理_Servlet异常和错误处理示例教程
- 自考计算机毕业论文答辩视频,过来人谈自考毕业论文答辩有感
- MapXtreme 2005学习(1):创建临时图层
- ksu7对讲机调频软件_建伍TK3107对讲机调频及软件处理设置
- 七年级画图计算机教案,信息技术画图软件学习教案
- 说说基因组的垃圾DNA-Transposable elements
- DDL操作提示了一个DML操作才会抛的ORA错误?
- matlab tcpip数据解析,Matlab数据输出、从MATLAB 以tcpip形式传输数据到 vvvv
- 程序员可以选择哪些平台写技术博客?
- 3gpp-24.229中文版R7
- 众咖云集的 PyCon 2019 上海站,大佬们都讲了啥
- 资源管理器占用CPU过高的解决方法
- fw150rm刷openwrt固件_N1刷openwrt固件至eMMC详细教程,非常适合小白!!!