`
wxb880114
  • 浏览: 678724 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Openlayers学习笔记——Controls类

阅读更多
Controls affect the display or behavior of the map.  They allow everything from panning and zooming to displaying a scale indicator.  Controls by default are added to the map they are contained within however it is possible to add a control to an external div by passing the div in the options parameter. API中的描述
Controls是用来控制地图的,主要功能如下:
1.用户与地图交互,如pan、Panto、zoomIn、ZoomOut;
2.在地图map上添加修饰,如Navigation、ToolBar、scaleLine;

一 如何应用Controls?
   首先我们看看Controls的类型分类,在Openlayers中多数Controls直接可以在地图上添加,比如Navigation(导航栏),第二类是需要放在Div元素中才能用,这点与地图map很相似,第三类需要放置在panel(面板)中的操作类似于网页HTML中button按钮,需要点击或绑定才能起作用,最后一类就是自定义类型的。
  如何在地图中添加Controls? 步骤如下:
   1.添加Controls相关的javascript包,实例化地图对象map和Controls对象;
   2.利用map对象的addControl()或addControls()方法在地图上添加Controls对象;

   在地图map实例化时,四中Controls会自动添加到地图map中去,分别为Openlayers.Control.Navigation(导航栏)、Openlayers.Control.PanZoom(向左向右,放大缩小等),Openlayers.Control.ArgParser(允许用户缩放到指定位置,根据Url打开/关闭地图),Openlayers.Control.Attribution(在地图上相应图层添加属性)

二 实例
   创建不含Controls的地图对象
   1.需要创建一个包含空数组control对象的地图对象
      map=new Openlayers.Map('map_element',{control:[]});

   2.地图对象中添加layer

var wms_layer = new OpenLayers.Layer.WMS(
  'WMS Layer Title',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'},
  {}
);
map.addLayer(wms_layer);
  
   3.创建Control对象填充Controls数组

   var navigation_control = new OpenLayers.Control.Navigation({});
var controls_array = [
  navigation_control,
  new OpenLayers.Control.PanZoomBar({}),
  new OpenLayers.Control.LayerSwitcher({}),
  new OpenLayers.Control.Permalink(),
  new OpenLayers.Control.MousePosition({})
];

  4.在地图map对象上添加Controls

  map = new OpenLayers.Map('map_element', {
  controls: controls_array
});
分享到:
评论

相关推荐

    openlayers6学习笔记

    openlayers6学习笔记,节省你的学习成本

    地图个人开发笔记和Demo

    —— 1.1 OlMap 基础类 —— 1.2 openlayers 实例化地图 —— 1.3 openlayers地图OSM形式 —— 1.4 openlayers地图XYZ形式 —— 1.5 国家地理信息公共服务平台 天地图 —— 1.6 天地图.四川 —— 1.7 天地图.西藏 ...

    openlayers3.0学习笔记

    openlayers3.0学习笔记,节省你的学习成本

    OpenLayer学习笔记——第一天

    gis小白从零开始学习,需要懂得前端基础知识 不bb,开干 快速开始 一、形成地图 导入文件 方式一:cnd导入 方式二:下载包导入 github地址:https://github.com/openlayers/openlayers/releases // 创建地图 ...

    《WebGIS之OpenLayers全面解析》一书源码

    本书主要内容涵盖:WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,最后给出了OpenLayers之项目实战——水利...

    WebGIS之OpenLayers全面解析

    本书主要内容涵盖:WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,最后给出了OpenLayers之项目实战——水利...

    openlayers学习文档

    2. **API参考**:详细解释各个函数和类的作用,帮助理解如何使用OpenLayers API。 3. **示例代码**:提供实际的JavaScript代码片段,展示如何实现特定功能。 4. **最佳实践**:指导如何优化地图性能,避免常见问题。...

    openlayers中文.rar

    这个"openlayers中文.rar"压缩包提供了一份中文手册,对于想要学习和掌握OpenLayers的开发者来说,是一份非常实用的学习资源。 1. **OpenLayers基本概念**: - **地图层(Layers)**:OpenLayers中的地图由多个...

    OpenLayers

    要深入学习OpenLayers,可以参考《OpenLayers 2.10 初学者指南》这本书,或访问官方文档、社区论坛获取更多帮助。 总之,OpenLayers 提供了一个强大且灵活的框架,使得Web地图开发变得简单易行。通过掌握其基础概念...

    GeoServer学习——OpenLayers3加载KML地图实现框选

    关于框选功能,OpenLayers3提供了`ol.interaction.Draw`交互类,允许用户在地图上绘制矩形。首先,我们需要创建一个绘制交互实例,设置其类型为`'box'`以启用框选: ```javascript var draw = new ol.interaction....

    免费openlayers学习思维导图

    【解决问题】:如何来高效的学习openlayers,一张思维导图,将核心知识点汇聚,分枝叶查看,促进更好的学习。 【适用人群】: 使用openlayers做开发的小伙伴 【使用场景】:使用openlayers来满足地图开发中的各种...

    WebGIS之OpenLayers全面解析之源码

    WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,最后给出了OpenLayers之项目实战——水利信息在线分析服务...

    openlayers离线文档

    OpenLayers提供多种瓦片管理类,如OpenLayers.Layer.TileCache和OpenLayers.Layer.XYZ。 "事件"(Events)在OpenLayers中用于监听用户交互和地图状态变化。例如,可以监听地图的移动(moveend)事件来执行某些操作...

    openLayers geoserver常见问题

    OpenLayers的例子通常包括基本地图加载、图层管理、标记添加、弹窗显示等,可以通过官方文档找到许多示例代码进行学习。 关于TileCache函数,如getTilesUrl(),用于返回对应坐标范围的瓦片URL,是TileCache服务的...

    openlayers 手册

    本手册涵盖了 OpenLayers 的所有类的介绍说明,及其简单实例。 OpenLayers 对象 OpenLayers 对象提供了一切事物,包括命名空间常量 VERSION_NUMBER,标识版本属性 ImgPath,设置图像存储的路径。 BaseTypes Base...

Global site tag (gtag.js) - Google Analytics