OpenLayers S1

Q. JS如何编写类与生成构造函数
A.
  基类为Class,代码如下：
   var Class = {//原始基类
  create: function() {   
    return function() {
      this.initialize.apply(this, arguments);
     }
  }
}


var Book = Class.create();  //声名为Book的类
Book.prototype = {        //给Book类添加成员和方法
   className:"Book",        //属性：类名
   initialize: function(name){ //构造函数
   this.name = name;
   },
   getName:function(){   //方法：取书名
   return this.name;
   }
   }  
   var book = new Book('XYZ');  //创建一个Book对像
   document.write(book.getName());       //打印书名  
  
  
Q. Opanlayers如何添加WMS服务层
A.
  map = new OpenLayers.Map( 'map',{ controls: [] } );
  layer = new OpenLayers.Layer.WMS( "test",              //层别名
          "http://192.168.2.60:8083/wmsconnector/com.esri.wms.Esrimap"  //服务连接
          , {
          layers: 'street3', //包含层的ID，AXL文件里层的ID，用","分开
          format:OpenLayers.Util.alphaHack()?'image/gif':'image/png',   //图片格式     
          transparent:'true',  //是否透明，注意，IE只支持GIF透明，
          ServiceName: "test2",//wms服务名
          async: true,
          srs:'EPSG:4214'   //坐标系统,经纬度写EPSG:4326
          }
          ,{
          maxExtent:new OpenLayers.Bounds(489757.940,293425.5058,534205.948491573,326902.17035), //最大范围坐标
          projection:"EPSG:4214",
          isBaseLayer:true,
          singleTile:true,//是否瓦片图
          maxResolution: (534205.948491573-489757.940)/1024 //最大分辨率                  
          }
           );
      map.addLayer(layer);
      map.setCenter(new OpenLayers.LonLat(512950.10208490635, 312347.9883206317), 0);//第一个参数为坐标，第二个为缩放等级,0为顶级
  
Q. Opanlayers如何添加工具条toolbar
A.
 
  //关键代码
   zoomIn = new OpenLayers.Control.ZoomBox({title:'放大',displayClass:'olZoomIn'});
       zoomOut = new OpenLayers.Control.ZoomBox({out:true,title:'缩小',displayClass:'olZoomOut'});
       pan = new OpenLayers.Control.DragPan({title:'移动',displayClass:'olPan'});
       var panel = new OpenLayers.Control.Panel({defaultControl: pan});    //     defaultControl为默认工具 
       panel.addControls([zoomIn,zoomOut,pan]);
       map.addControl(panel);   //map为上例定义   
  
  
   与代码对应的CSS文件，displayClass与下面的对应，如displayClass:'olpan',那么按钮激活状态的
CSS类为.olPanItemActive，非激活状态为.olZoomOutItemInactive。工具条的DIV的Class
默认为:.olControlPanel，通过DIV+CSS定位工具条。以上工具条的CSS示例为：
  .olControlPanel div {
  display:block; 
  top: 0px;
  left: 190px;
  width:  360px;
  height: 26px;
  margin: 0px;
}
.olControlPanel .olZoomInItemInactive {
  width:  26px;
  height: 26px;
  float:left;
  position:relative;
  background-image: url("../SritGisScript/img/zoomin.gif");
}
.olControlPanel .olZoomInItemActive {
  width:  26px;
  height: 26px;
  float:left;
  position:relative;
  background-image: url("../SritGisScript/img/zoomin_1.gif");
}

.olControlPanel .olZoomOutItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("../SritGisScript/img/zoomout.gif");
}
.olControlPanel .olZoomOutItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("../SritGisScript/img/zoomout_1.gif");
}

.olControlPanel .olPanItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("../SritGisScript/img/pan.gif");
}
.olControlPanel .olPanItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("../SritGisScript/img/pan_1.gif");
}   

Q. Opanlayers如何添加测距功能
A.

  说明：本段代码是在  openlayers/examples/measure.html 基础上进行完善
  ===================================================
  CSS添加内容：
  .olControlPanel .olMeasureLineItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("img/measureline.gif");
}
.olControlPanel .olMeasureLineItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("img/measureline_1.gif");
}

.olControlPanel .olMeasurePolygonItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("img/measurearea.gif");
}
.olControlPanel .olMeasurePolygonItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("img/measurearea_1.gif");
}
     ======================================================================
javascript添加内容:
var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
           
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
            var styleMap = new OpenLayers.StyleMap({"default": style});
           
            measureLine=new OpenLayers.Control.Measure(                       
                        OpenLayers.Handler.Path, {
                        title:'测距',
                        displayClass:'olMeasureLine',
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                );
          measureLine.events.on({
                    "measure": handleMeasurements    //测距功能回调方法
                });
               
               
            measurePolygon=new OpenLayers.Control.Measure(           
                    OpenLayers.Handler.Polygon, {
                    title:'测面积',
                    displayClass:'olMeasurePolygon',
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                );
             measurePolygon.events.on({             
                    "measurepartial": handleMeasurements  ////测面积功能回调方法
                });
               
             map.addControls([measureLine,measurePolygon]);
          ==================================================================  
          //回调方法,根据需要编写，本示例为在output的Div里输出
         function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var element = document.getElementById('output');
            var out = "";
            if(order == 1) {
                out += "measure: " + measure.toFixed(3) + " " + units;
            } else {
                out += "measure: " + measure.toFixed(3) + " " + units + "2";
            }
            element.innerHTML = out;
        }

    =====================================================================


         
 
 

评论

1 楼 ljx0517 2010-03-17  

请问 openlayers 如何能定位坐标?
就是由用户输入个坐标
点击后就跳到相应地点