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

    添加到电子地图上的资源点经常需要对其进行旋转操作。本文主要讲解如何基于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);

好了，旋转看看吧