openlayer2常用功能

0. 用以下css可自定义控件的显示样式，其他地方均不改
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/custom-style.html
        <style type="text/css">
            p {
                width: 500px;
            }
            div.olControlMousePosition {
                font-family: Verdana;
                font-size: 0.5em;
                color: red;
            }
        </style>






０.　自定义属性
参考
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/styles-unique.html
http://hi.baidu.com/e6175423/blog/item/4084e9428a5ede1f73f05d57.html
   var context = function(feature) {
                return feature;
            }
            var styleMap = new OpenLayers.StyleMap();
            
            // create a lookup table with different symbolizers for the different
            // state values
            var lookup = {};
            lookup[OpenLayers.State.UNKNOWN] = {fillColor: "green"};
            lookup[OpenLayers.State.UPDATE] = {fillColor: "green"};
            lookup[OpenLayers.State.DELETE] = {fillColor: "red"};
            lookup[OpenLayers.State.INSERT] = {fillColor: "orange"};


            styleMap.addUniqueValueRules("default", "state", lookup, context);
            layer = new OpenLayers.Layer.Vector('Points', {
                styleMap: styleMap
            });
            
//胥实现：构造自定义属性
tAtt={};
tAtt['speed']=tspeed;
tAtt['time']=ttime;
tAtts = OpenLayers.Util.extend({img:'Img/car_normal.png' ,vehicleNumber:name.toString() ,angle: tdirection}, tAtt); 
features.push( new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(tLonLatT.lon,tLonLatT.lat),    
tAtts
));  


0. 直接绘制轨迹可以用以下格式：
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/highlight-feature.html
            var feature = new OpenLayers.Feature.Vector(
                OpenLayers.Geometry.fromWKT(
                    "POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
                )
            );
            vectors.addFeatures([feature]);
0. feature高亮选中
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/highlight-feature.html
            var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                eventListeners: {
                    beforefeaturehighlighted: report,
                    featurehighlighted: report,
                    featureunhighlighted: report
                }
            });


            var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
                {clickout: true}
            );


            map.addControl(highlightCtrl);
            map.addControl(selectCtrl);
            highlightCtrl.activate();
            selectCtrl.activate();




0. 跟踪位置
http://www.openlayers.org/dev/examples/geolocation.html


0. 借鉴做动画的思路
http://www.openlayers.org/dev/examples/kml-track.html
http://www.openlayers.org/dev/examples/kml-pointtrack.html
http://www.openlayers.org/dev/examples/filter-strategy.html
http://www.openlayers.org/dev/examples/filter.html
使用Filter strategy
可以将数据生成在服务器端，用kml、geojeson、php等方式，让vector透过http代理读取。
实现动画的效果
以下例子是使用LineString 绘制feature
http://www.openlayers.org/dev/examples/simplify-linestring.html
 var original = OpenLayers.Geometry.fromWKT("LINESTRING(" +
        "6.247872 11.316756," +
        "6.338566 11.316756," +
        "6.633323 11.205644," +
 "0.000000 10.960167)"
    );
    vectorlayer.addFeatures([new OpenLayers.Feature.Vector(original)]);
    var maxExtent = vectorlayer.getDataExtent();






0. geojson的例子
http://www.openlayers.org/dev/examples/geojson.html


0. google v3版地图投影变EPSG:900913 
http://www.openlayers.org/dev/examples/google-v3-alloverlays.html
    // Google.v3 uses EPSG:900913 as projection, so we have to
    // transform our coordinates
    map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    ), 5);
0. 用第3版的google，不需要API,但是图面会经常弹出提示窗口，最好用v2版。
需要添加extra theme/default/google.css stylesheet. 
以显示正确的位置。
http://www.openlayers.org/dev/examples/google-v3.html
http://www.openlayers.org/dev/examples/google.html


.olLayerGoogleCopyright{right:3px;bottom:2px;left:auto;}.olLayerGoogleV3.olLayerGoogleCopyright{bottom:0;right:0!important;}.olLayerGooglePoweredBy{left:2px;bottom:2px;}.olLayerGoogleV3.olLayerGooglePoweredBy{bottom:0!important;}
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">


        <script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
        <script src="../OpenLayers.js"></script>
        <script src="google-v3.js"></script>


0. 可以用名字来调用ol内置的图片
http://www.openlayers.org/dev/examples/graphic-name.html


0. 调用图片的例子
http://www.openlayers.org/dev/examples/image-layer.html
            var graphic = new OpenLayers.Layer.Image(
                'City Lights',
                'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
                new OpenLayers.Size(580, 288),
                options
            );
0. 调用mapserver的例子
http://www.openlayers.org/dev/examples/mapserver.html


0. 地图投影相关
http://www.openlayers.org/dev/examples/web-mercator.html


0. 多种免费地图调用，墨卡托投影
http://www.openlayers.org/dev/examples/spherical-mercator.html


1. 添加缩放条，如下方法可以避免google地图添加缩放调无效的情况
map = new OpenLayers.Map('map',
{controls: [new OpenLayers.Control.Navigation(), 
           new OpenLayers.Control.Scale({'div' : OpenLayers.Util.getElement('scale')}),
                  new OpenLayers.Control.PanZoomBar()]//, numZoomLevels: 22(不指定则缩放条随图层变)
                                           });


2. 控件可以在创建地图的时候添加。
map = new OpenLayers.Map('map',
{ maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
controls: [new OpenLayers.Control.Navigation(),
           new OpenLayers.Control.KeyboardDefaults(),
           new OpenLayers.Control.Scale($('scale')),
           new OpenLayers.Control.MousePosition({
        'div' : OpenLayers.Util.getElement('location')
        }),
                  new OpenLayers.Control.PanZoomBar()]//, numZoomLevels: 22(不指定则缩放条随图层变)
                                           });


3. 不同的控件参数不同，如scale和MousePosition，需要查看源码看是怎么用的，不然不会成功。




4. 如果投影选择墨卡托，单位指定为米，则需要将经纬度转为地图的投影。
方法参考：
http://www.openlayers.org/dev/examples/sundials-spherical-mercator.html
 new OpenLayers.Bounds(
                    68.774414, 11.381836, 123.662109, 34.628906
                ).transform(map.displayProjection, map.projection)
5. 可以加入图片作为底图
  layer = new OpenLayers.Layer.Image(
                "popupMatrix", 
                "img/popupMatrix.jpg", 
                new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5),
                new OpenLayers.Size(1024,768)
            );
6. 利用vector 和 feature标注：
如果feature不是点、线、面，直接调用传入的对象的位置等属性。
http://hi.baidu.com/zgldh/blog/item/da1d510fa923ff3e6159f324.html
var  vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap(
                {'default':{
                    strokeColor: "#00FF00",
                    strokeOpacity: 1,
                    strokeWidth: 3,
                    fillColor: "#FF5500",
                    fillOpacity: 0.5,
                    pointRadius: 6,
                    pointerEvents: "visiblePainted",
                    label : "name: ${name} age: ${age}",
                   
                    fontColor: "${favColor}",
                    fontSize: "12px",
                    fontFamily: "宋体",
                    fontWeight: "normal",
                    labelAlign: "${align}",
                    labelXOffset: "${xOffset}",
                    labelYOffset: "${yOffset}"
                }}),
                renderers: renderer
            });
            // allow testing of specific renderers via "?renderer=Canvas", etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;


 7. 可以直接读取添加KML或GeoJSON的数据格式到图层中 ，进行空间分析，甚至可以读取PHP, txt文件。
http://www.openlayers.org/dev/examples/kml-layer.html
http://www.openlayers.org/dev/examples/dynamic-text-layer.html
vectors = new OpenLayers.Layer.Vector("Lines", {
                    isBaseLayer: true,
                    strategies: [new OpenLayers.Strategy.Fixed()],                
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "data/roads.json",
                        format: new OpenLayers.Format.GeoJSON()
                    }),
                    styleMap: styles,
                    maxExtent: new OpenLayers.Bounds(
                        1549471.9221, 6403610.94, 1550001.32545, 6404015.8
                    )
                });
                var layer = new OpenLayers.Layer.Vector("POIs", {
                    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "textfile.txt",
                        format: new OpenLayers.Format.Text()
                    })
                });


8. 拖动feature，可直接加控件：
  controls = {
                    point: new OpenLayers.Control.DrawFeature(vectors,
                                OpenLayers.Handler.Point),
                    line: new OpenLayers.Control.DrawFeature(vectors,
                                OpenLayers.Handler.Path),
                    polygon: new OpenLayers.Control.DrawFeature(vectors,
                                OpenLayers.Handler.Polygon),
                    drag: new OpenLayers.Control.DragFeature(vectors)
                };


9. 如果想在绘点、线、面或量算距离或面积时能够拖动底图，可以用：
http://www.openlayers.org/dev/examples/draw-feature.html
 function allowPan(element) {
                var stop = !element.checked;
                for(var key in drawControls) {
                    drawControls[key].handler.stopDown = stop;
                    drawControls[key].handler.stopUp = stop;
                }
            }
10. 可以将wms的图层放到叠加层中，如果不想显示在图层选择器中，可以设置displayInLayerSwitcher: false


11. 可以对WMS图层进行信息获取，用控件，如下：
http://www.openlayers.org/dev/examples/getfeatureinfo-control.html
http://www.openlayers.org/dev/examples/getfeatureinfo-popup.html
  infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://demo.opengeo.org/geoserver/wms', 
                title: 'Identify features by clicking',
                layers: [water],
                queryVisible: true
            }),
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://demo.opengeo.org/geoserver/wms', 
                title: 'Identify features by clicking',
                layers: [water],
                hover: true,
                // defining a custom format options here
                formatOptions: {
                    typeName: 'water_bodies', 
                    featureNS: 'http://www.openplans.org/topp'
                },
                queryVisible: true
            })
        }


12. 可以修改所绘制的点、线、面。
http://www.openlayers.org/dev/examples/modify-feature.html
            controls = {
                point: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Point),
                line: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Path),
                polygon: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Polygon),
                regular: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.RegularPolygon,
                            {handlerOptions: {sides: 5}}),
                modify: new OpenLayers.Control.ModifyFeature(vectors)
            };
13. 分辨率与比例、单位的关系：
scale = resolution * OpenLayers.INCHES_PER_UNIT[units] * OpenLayers.DOTS_PER_INCH
http://www.openlayers.org/dev/examples/zoomLevels.html
http://blog.csdn.net/dazhi_1314/archive/2010/08/05/5790506.aspx
http://simpgps.blog.163.com/blog/static/23856923200910863920923/
1、Scale：比例尺，图上距离和实地距离之比。
2、Resolution：分辨率，每个象元代表的实地距离（map units per pixels）。
3、Extent：地图的范围（地图四至）。
4、zoomlevel：缩放的级别（0~15）。
假设屏幕距离为P，分辨率为R，则比例尺S为:
实地距离： R * P
图上距离： (P / 72) / 39.3701 = P / (72*39.3701)    
比例尺： S =  P / (72*39.3701)  / R*P   = 1 /  R*72*32.3701
39.3701是inches和米的对应关系。


14. 可以编辑并保存wfs。
http://www.openlayers.org/dev/examples/wfs-snap-split.html
http://www.openlayers.org/dev/examples/wfs-protocol-transactions.html


15. 可以给地图加一个框，用于显示范围
var bounds = new OpenLayers.Bounds(-45,-45, 0, 45); 
 var boxes = new OpenLayers.Layer.Boxes("boxes");
    var box = new OpenLayers.Marker.Box(bounds);
    boxes.addMarker(box);
    map.addLayer(boxes);
http://www.openlayers.org/dev/examples/setextent.html


15. 可以添加WMSGetFeatureInfo控件，获取wms的信息，如县名等。
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/getfeatureinfo-popup.html
        info = new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://demo.opengeo.org/geoserver/wms', 
            title: 'Identify features by clicking',
            queryVisible: true,
            eventListeners: {
                getfeatureinfo: function(event) {
                    map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken", 
                        map.getLonLatFromPixel(event.xy),
                        null,
                        event.text,
                        null,
                        true
                    ));
                }
            }
        });
        map.addControl(info);
        info.activate();
16. marker 使用方法


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


            function add() {
                var url = 'http://www.openlayers.org/dev/img/marker.png';
                var sz = new OpenLayers.Size(21, 25);
                var calculateOffset = function(size) {
                                    return new OpenLayers.Pixel(-(size.w/2), -size.h);
                                 };
                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
                marker = new OpenLayers.Marker(barcelona, icon);
                markers.addMarker(marker);


                marker = new OpenLayers.Marker(madrid, icon.clone());
                markers.addMarker(marker);


            }


            function remove() {
                markers.removeMarker(marker);
            }


17. 可以在vector中创建box，实现随视图缩放大小等功能。
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/boxes-vector.html
            var box_extents = [
                [-10, 50, 5, 60],
                [-75, 41, -71, 44],
                [-122.6, 37.6, -122.3, 37.9],
                [10, 10, 20, 20]
            ];


    var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
    
                for (var i = 0; i < box_extents.length; i++) {
                    ext = box_extents[i];
                    bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
                    
                    box = new OpenLayers.Feature.Vector(bounds.toGeometry());
                    boxes.addFeatures(box);
                }
/×


  for (var i = 0; i < box_extents.length; i++) {
                    ext = box_extents[i];
                    bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
                    box = new OpenLayers.Marker.Box(bounds);
                    box.events.register("click", box, function (e) {
                        this.setBorder("yellow");
                    });
                    boxes.addMarker(box);
                }




×/
                map.addLayers([ol_wms, boxes]);


                var sf = new OpenLayers.Control.SelectFeature(boxes);
                map.addControl(sf);
                sf.activate();


18。 可以取得浏览器的名称
 var header = OpenLayers.Util.getElement("browserHeader");
            header.innerHTML = "(browser: ";
            var browserCode = OpenLayers.Util.getBrowserName();
            switch (browserCode) {
                case "opera":
                    browserName = "Opera";
                    break;
                case "msie":
                    browserName = "Internet Explorer";
                    break;
                case "safari":
                    browserName = "Safari";
                    break;
                case "firefox":
                    browserName = "FireFox";
                    break;
                case "mozilla":
                    browserName = "Mozilla";
                    break;
                default:
                    browserName = "detection error"
                    break;
            }
            header.innerHTML += browserName + ")";
19. 可以价值json到vector中
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/all-overlays.html
             // give the features some style
                var styles = new OpenLayers.StyleMap({
                    "default": {
                        strokeWidth: 2
                    },
                    "select": {
                        strokeColor: "#0099cc",
                        strokeWidth: 4
                    }
                });
            
                // add rules from the above lookup table
                styles.addUniqueValueRules("default", "RP_TYPE", {
                    10: {strokeColor: "#000000", strokeWidth: 2},
                    12: {strokeColor: "#222222", strokeWidth: 2},
                    14: {strokeColor: "#444444", strokeWidth: 2},
                    16: {strokeColor: "#666666", strokeWidth: 2},
                    18: {strokeColor: "#888888", strokeWidth: 2},
                    19: {strokeColor: "#666666", strokeWidth: 1}
                });


                var vectors = new OpenLayers.Layer.Vector("Lines", {
                    strategies: [new OpenLayers.Strategy.Fixed()],                
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "data/roads.json",
                        format: new OpenLayers.Format.GeoJSON()
                    }),
                    styleMap: styles
                });
            
                map.addLayer(vectors);
20. 用georss Marker 进行标注
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/georss-markers.html
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/georss-flickr.html
  var map, layer;


        OpenLayers.ProxyHost = "/proxy/?url=";
        function init(){
            map = new OpenLayers.Map('map', {maxResolution:'auto'});
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var newl = new OpenLayers.Layer.GeoRSS( 'GeoRSS', 'georss.xml');
            map.addLayer(newl);
            var yelp = new OpenLayers.Icon("http://openlayers.org/~crschmidt/yelp.png", new OpenLayers.Size(20,29));
            var newl = new OpenLayers.Layer.GeoRSS( 'Yelp GeoRSS', 'yelp-georss.xml', {'icon':yelp});
            map.addLayer(newl);
        }
21. 可以动态调用一个服务器上的txt、php、KML, GeoJSON文本进行标注
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/dynamic-text-layer.html