电子地图中要素旋转功能实现

    添加到电子地图上的资源点经常需要对其进行旋转操作。本文主要讲解如何基于openlayers2往地图中添加资源点,并实现资源点的旋转操作。

    往地图上面添加资源点图标主要有两种方式,一种是通过markers方式,利用的接口为OpenLayers.Layer.Markers。通过marker方式往地图上添加图标的示例代码如下:

   

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));

   第二种方式就是通过vectorlayer的方式,把一个资源点作为一个矢量vector。当需要对资源点图标进行旋转的时候只有通过vectorlayer方式添加资源点才行。通过vectorlayer建立可旋转的图标步骤如下:

   1.新建vectorlayer图标

    

vectorLayer = new OpenLayers.Layer.Vector(
            "inducedScreen",
            {
                styleMap: new OpenLayers.StyleMap({
                    "default": {
                        externalGraphic: basePath +"/marker.png",
                        graphicWidth: 36,
                        graphicHeight: 36,
                        title:"${tooltip}",
//                        label:"${tooltip}",
                        //labelYOffset:-18,
                        fontColor:"#ff0000",
                        graphicXOffset: -18,
                        graphicYOffset: -18,
                        rotation: "${angle}"
                    },
                    "select": {
                        externalGraphic:basePath +"/marker.png",
                        graphicWidth: 36,
                        graphicHeight: 36,
                        title:"${tooltip}",
//                        label:"${tooltip}",
                        //labelYOffset:-18,
                        fontColor:"#ff0000",
                        graphicXOffset: -18,
                        graphicYOffset: -18,
                        rotation: "${angle}"
                    }

                })
//                rendererOptions: {yOrdering: true},
//                renderers: renderer
            }
        );

   2.为该图层注册点击事件,此时图标旋转的机制为用户按住ctrl键的同时点击图标,则图标旋转,图标每次旋转的度数为其上一次旋转度数加90。实现代码为:

		//诱导屏选中事件注册
	vectorLayer.events.on({'featureselected': function(evt){
		if(evt.feature.attributes["resourceId"]==null){
			$.say("诱导屏数据出错!");
			return ;
		}
		//判断用户是否按下shift键盘,按下shift键表示旋转诱导屏图标,否则为管理停车位操作
		if(event.ctrlKey){
			//诱导屏旋转角度增加90度
			var angle = ((evt.feature.attributes["angle"]*1)+90)%360;
			evt.feature.attributes["angle"] = angle;

			featureRotate(evt);
			evt.feature.layer.drawFeature(evt.feature);
		}else{
			//其他操作
		}
		}
	});

   3.把vectorlayer添加到地图上

    map.addLayer(vectorlayer);

   4.这里有些读者可能会以为点击诱导屏的时候诱导屏的resourceId和angle是如何获取的。这两个字段是创建vector对象的时候作为属性添加上去的。具体方式如下:

        featureArray = [];
	featureArray.push(
		            new OpenLayers.Feature.Vector(
		            		geometry, {tooltip:sparams.resource,resourceId:sparams.resourceId,angle:0}
		            )
		        );
		vectorLayer.addFeatures(featureArray);

好了,旋转看看吧

时间: 2015-10-13

电子地图中要素旋转功能实现的相关文章

Flash+XML实现电子地图查询及定位功能

xml 上一讲,我们实现了电子地图中如何在线标注地名功能(参阅<Flash+ASP实现电子互动地图在线标注功能>),本例我们一讲中我们学习实现按地名名称查询及定位功能. 本例要实现的功能分成"查询"和"定位"两部分,查询功能通过调用XML文件的数据一一比对实现.定位功能通过将地图进行适当的缩放和移动,将被查询到的地名显示在窗口的中央位置来实现. 制作步骤: 制作如图所示的界面: 图1 查询功能的界面 用input_txt动态文本框接收输入的地名名称.用载

Win8系统平板电脑怎么设置屏幕自动旋转功能

  Win8系统平板电脑怎么设置屏幕自动旋转功能           一般在右侧工具栏(CharmBar)中进行屏幕旋转设置; 但发现侧边栏中没有自动转屏功能,只有调节亮度和其他选项 开启方法: 1.在平板win8系统右侧边栏中搜索"Services"并打开Services设置; 2.打开Services设置窗口后,并找到"Sensor Monitoring Service"选项并鼠标右键菜单选择启动类型为"自动"状态; 3.再次打开右侧工具栏(

在PowerPoint 2007中制作旋转风车

"风车"大家小时候都玩过.微风吹过,风车便轻轻地旋转,风车的色彩也便随之流动起来,为我们的童年增添不少快乐的回忆.除了实体的风车之外,E时代的我们其实还可以在我们的演示文稿中制作旋转的风车,既可以帮我们重拾童年的快乐,也可以为我们的演示文稿作品增光添彩的. 一.单个扇形的制作 风车可以看成不同颜色的扇形面组成的.我们可以利用自选图形来制作它.比如简单一点的,用六个圆心角为60度半径相同的扇形,每个扇形填充不同的颜色,这样就可以得到一个简单的风车图形了. 点击功能区"插入&qu

怎样用好Win7系统屏幕旋转功能

Win7系统有一个非常酷炫的功能,就是能让屏幕旋转,相信很多用户都不知道吧.这个旋转功能主要用于使用投影仪或外输设备时,有时候进行多屏游戏时也会用到旋转,让整个画面能显示的更加全面.下面就来教大家如何使用Win7屏幕的旋转功能. 操作方法: 1.点击操作系统的开始菜单,在开始菜单之中点击控制面板栏目. 2.在弹出的控制面板对话框之中的中部可以寻找到外观和个性化项目,点击其下方的调整屏幕分辨率子项目. 3.在弹出的新窗口中部,点击方向右边的小三角形,弹出了如下图下拉列表.在这里点击横向翻转.多数外

ios-需要在IOS中设置延迟功能

问题描述 需要在IOS中设置延迟功能 需要一个延时器,进行23秒的延迟然后执行函数.应该怎么实现?用不用NSTimer? 解决方案 performSelector: withObject: afterDelay: 解决方案二: 简单点的话,使用performSelector: withObject: afterDelay: 方法 [self performSelector:@selector(delayMethod:) withObject:nil afterDelay:23];

Python的Flask框架中实现分页功能的教程

  这篇文章主要介绍了Python的Flask框架中实现分页功能的教程,文中的示例基于一个博客来实现,需要的朋友可以参考下 Blog Posts的提交 让我们从简单的开始.首页上必须有一张用户提交新的post的表单. 首先我们定义一个单域表单对象(fileapp/forms.py): ? 1 2 class PostForm(Form): post = TextField('post', validators = [Required()]) 下面,我们把这个表单添加到template中(file

java struts2-怎样利用Java 中的struts2框架实现数据库中用户登录功能?

问题描述 怎样利用Java 中的struts2框架实现数据库中用户登录功能? 在Action中LoginAction怎样写? 配置文件中怎样写? 总体实现能够使数据库中已经存在的用户凭自己的密码与用户名登录成功呢?数据库是Oracle数据库.

在自制主页中实现搜索功能

  Internet海洋的确波澜壮阔.博大精深, 也正是因为它的波澜壮阔和博大精深而使得许多初次上网的小网虫们被扑面而来的信息打得晕头转向,最终两手空空.一无所获. 有经验的网友们并不满足一个网址上的信息, 同时还要参考其他同类网址上的信息进行比较,以保证所掌握的资料最全面.最准确,这就要能找到包含您所需信息的所有网址. 使用过任一搜索引擎的网友都知道这些问题在这里都非常简单.本文并不是教您如何使用搜索引擎, 而是告诉您如何在自己的主页中调用这些搜索引擎.在自制主页中调用搜索引擎要解决的关键问题

PHP中的加密功能

加密 数据加密在我们生活中的地位已经越来越重要了,尤其是考虑到在网络上发生的大量交易和传输的大量数据.如果对于采用安全措施有兴趣的话,也一定会有兴趣了解PHP提供的一系列安全功能.在本篇文章中,我们将介绍这些功能,提供一些基本的用法,以便你能够为自己的应用软件中增加安全功能. 预备知识 在详细介绍PHP的安全功能之前,我们需要花点时间来向没有接触过这方面内容的读者介绍一些有关密码学的基本知识,如果对密码学的基本概念已经非常熟悉,就可以跳过去这一部分. 密码学可以通俗地被描述为对加/解密的研究和实