首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Openlayers学习札记——Geometry 和 Feature类

2012-08-21 
Openlayers学习笔记——Geometry 和 Feature类GeometryGeometry类是feature对象的基本组成部分,Vector类采用

Openlayers学习笔记——Geometry 和 Feature类
   Geometry
   Geometry类是feature对象的基本组成部分,Vector类采用Geometry类来存储一个要素的几何信息。
  
   Feature
   Feature类是Vector类用来在地图上展示几何对象,是Vector图层类一个属性。这个属性是个要素数组。
   要素基类有两个部分,Geometry对象和attributes属性,attributes包含要素相关的数据。在OpenLayers中Vector图层对应着一个Feature.Vector类,该类除了继承了父类的Geometry和attributes属性之外,还添加了一个控制要素外观的style属性。
   1.要素类的方法
     %destroy():销毁要素对象;
     %clone:复制要素对象;
     %getVisibilrty():判断指定要素是否显示出来;
     %move():将要素对象移动到location,location一般是OpenLayers.LonLat对象。
   2.要素对象初始化
     创建要素对象:
        var my_feature=new OpenLayers.Feature.Vector(geometry_object,attributes,style);
    geometry_object是个几何对象。attributes对象是个可选对象可指定要素数据的属性数据,附加数据如{'building_area':18000,'building_floors':2},style对象也是可选的,可以指定要素的样式。
   
    3.要素间的交互类——Control.SelectFeature
    在OpenLayers中,矢量数据是加载到客户端的,所以与矢量要素的交互是实时的,快速的,在选择要素时它不需要向服务器请求数据。
    在选择要素时,我们需要应用SelectFeature control类(OpenLayers.Control.SelectFeature)。该控制类允许我们与要素对象交互,比如当鼠标移动到或点击某一要素时做些处理。
    %SelectFeature的使用
   1) 在地图、矢量图层、要素添加到矢量图层后,我们首先创建selectFeature类
    var select_feature_control=new Openlayers.Control.SelectFeature(vector_layer,{
   multiple:false,
   toggle:true,
   multipleKey:'shiftKey'
});
   map.addControl(select_feature_control);
   2)完成上面代码,我们就已经将selectFeature添加到了地图上,但是在我们使用之前需要调用一个activate方法。
   select_feature_control.activate();
   3) 现在我们可以选择要素了,在此注意multiple属性值为false,说明在鼠标点击要素时一次只能选择一个,若是需要多选可以将其改为true,或者按住shift进行多选。
   4) 选择要素过程中需要指定相关事件的执行函数,这里我们调用featureselected事件。
     function select_feature(event){
      document.getElmentById('map_feature_log').innerHTML='';
           
      //Show the current selected feature (passed in from the
event object)
      var display_text = 'Clicked on: '
          + '<strong>' + event.feature.attributes.location + '</
strong>'
          + ': ' + event.feature.attributes.description + '<hr
/>';
    document.getElementById('map_feature_log').innerHTML =
display_text;
        
    //Show all the selected features
    document.getElementById('map_feature_log').innerHTML += 'All
selected features: ';
    //Now, loop through the selected feature array
    for(var i=0; i<vector_layer.selectedFeatures.length; i++){
            document.getElementById('map_feature_log').innerHTML
+=
                vector_layer.selectedFeatures[i].attributes.
location + ' | ';
        }
  }
    }
     5) 注册函数与事件的联系
      vector_layer.events.register('featureselected',this,selected_feature);
     6) 允许查看效果
   

               
    

热点排行