OpenLayers导航功能

获得视图的中心点坐标,进行调整即可。ol.Map.render();//request a map render 请求地图绘制ol.proj.transform主要用于坐标转换,它的第一个参数是ol.Coordinate类型的坐标,后面两个参数依次是当前坐标所用的坐标系,及转换后的坐标所用的坐标系,ol.proj.transform([104.06, 30.67], ‘EPSG:4326‘, ‘EPSG:3857‘)就能把EPSG:4326的坐标[104.06, 30.67]转换为EPSG:3857的坐标。// 向左移动地图
        function moveToLeft() {
            var view = map.getView();
            var mapCenter = view.getCenter();
            // 让地图中心的x值增加,即可使得地图向左移动,增加的值根据效果可自由设定
            mapCenter[0] += 50000;
            view.setCenter(mapCenter);
            map.render();
        }

        // 向右移动地图
        function moveToRight() {
            var view = map.getView();
            var mapCenter = view.getCenter();
            // 让地图中心的x值减少,即可使得地图向右移动,减少的值根据效果可自由设定
            mapCenter[0] -= 50000;
            view.setCenter(mapCenter);
            map.render();
        }

        // 向上移动地图
        function moveToUp() {
            var view = map.getView();
            var mapCenter = view.getCenter();
            // 让地图中心的y值减少,即可使得地图向上移动,减少的值根据效果可自由设定
            mapCenter[1] -= 50000;
            view.setCenter(mapCenter);
            map.render();
        }

        // 向下移动地图
        function moveToDown() {
            var view = map.getView();
            var mapCenter = view.getCenter();
            // 让地图中心的y值增加,即可使得地图向下移动,增加的值根据效果可自由设定
            mapCenter[1] += 50000;
            view.setCenter(mapCenter);
            map.render();
        }

        // 移动到成都
        function moveToChengDu() {
            var view = map.getView();
            // 设置地图中心为成都的坐标,即可让地图移动到成都
            view.setCenter(ol.proj.transform([104.06, 30.67], ‘EPSG:4326‘, ‘EPSG:3857‘));
            map.render();
        }

        // 放大地图
        function zoomIn() {
            var view = map.getView();
            // 让地图的zoom增加1,从而实现地图放大
            view.setZoom(view.getZoom() + 1);
        }

        // 缩小地图
        function zoomOut() {
            var view = map.getView();
            // 让地图的zoom减小1,从而实现地图缩小
            view.setZoom(view.getZoom() - 1);
        }

 

时间: 2024-10-08 00:38:29

OpenLayers导航功能的相关文章

ROS机器人程序设计(原书第2版)补充资料 (捌) 第八章 导航功能包集入门 navigation

ROS机器人程序设计(原书第2版)补充资料 (捌) 第八章 导航功能包集入门 navigation 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用. 本章三个非常重要概念:TF,SLAM,AMCL.务必掌握. 补充内容:http://blog.csdn.net/zhangrelay/article/details/50299417 第216页: 简介本章要点. 第217页: 导航综合功能包组成架构等. 补充如下: 目录 配置并使用导航功能

OpenLayers介绍和第一个例子(转载)

什么是OpenLayers? 作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可以使用它.OpenLayers最初由Metacarta

openlayers中的自定制工具栏,包含画点、线、面

先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想自己去加一个. 然后就发现统一的drawfeature的样式(olControlDrawFeatureItemInactive),没有分为point.path和polygon的,然后就去源代码中找控制这个样式点代码去修改他,但是始终没有找到,只能作罢. 又去网上搜索找到了openlayers自带的一

openlayers实现wfs属性查询和空间查询

概述: 一直在寻求openlayers中wfs加载和属性查询的相关操作,功夫不负有心人,蓦然回首,那人却在灯火阑珊处,找到了这篇博文:http://blog.csdn.net/longshengguoji/article/details/39377931,试了下,在IE8中正常运行,但是在chrom中涉及到跨域的问题,待后期接解决吧.本文讲解如何通过wfs实现属性的查询与展示. 效果: 初始化状态 属性查询结果 空间查询结果 数据表: 关键代码: 添加wfs图层 wfs = new OpenLa

基于openlayers实现聚类统计展示

概述: 在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚类统计的博文地址为: http://blog.csdn.net/gisshixisheng/article/details/40867989 效果: 实现关键点: 实现代码: 1.数据格式 2.设置显示样式 var style = new OpenLayers.Style({ fillColor: "#ffcc66",

openlayers实现多图显示

概述: 本文讲述在openlayers中如何实现多图联动. 思路: 1.判断鼠标在哪个地图上: 2.添加该地图的地图移动事件: 3.设置另外一个地图的bound为该地图的. 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> <link rel=&q

OpenLayers 之 图层(Layers) 详解

声明:文章为本人原创,转载或使用请注明作者和出处!!谢谢! 如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象.实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层. 在 OpenLayers 中,图层是使用 layer 对象表示的,主要有 热度图层(heatmaplayer).图片图

OpenLayers 如何管理多控件的激活

在使用OpenLayers的时候,常常需要使用多个控件,来实现像:绘制矢量要素(DrawFeature),查询要素属性(WMSGetFeatureInfo),等等.这样就需要在不同的控件之间进行切换,也就是激活控件.常用的方式是,在创建控件的时候,保存到一个数组中,并给予命名,例如: var infoControls = { click: new OpenLayers.Control.WMSGetFeatureInfo(), // 参数省略 hover: new OpenLayers.Contr

OpenLayers学习--加载指定等级指定范围的高德地图数据

在使用高德地图数据的时候,我们通常不需要加载世界地图,只需要指定项目片区地图数据即可:同样,我们也不需要所有等级的数据,只需要指定等级数据即可. 按照<OpenLayers学习--Layer体系(一)>中的方法,直接使用XYZ图层类来加载,显然无法实现该功能.主要原因有以下两点: 1.没有指定地图的分辨率 OpenLayers的机制就是,当你没有给Layer指定分辨率,也没有给Map指定分辨率,则直接将地图的最大范围的左上角点作为切图原点,并且按照18级来计算切图分辨率,分辨率是以1/2向下递