OpenLayers学习-示例学习2:图层

Posted on   |   In   |  

博文作者:ruantao1989{@}gmail.com
引自博客:ruantao.duapp.com/blog

二:Layer图层

1.添加/删除图层

1
2
3
//按OpenLayers的封装, 估计还会有".Layer.WFS"一类的子类(后查得WFS在)
map.addLayer(new OpenLayers.Layer.WMS(...));
map.removeLayer(this.layer);

2.自定义图层

1
2
this.layer = new OpenLayers.Layer.Vector("Editable");
this.map.addLayer(this.layer);

3.json数据图层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
map = new OpenLayers.Map({
        div: "map",
    maxExtent: new OpenLayers.Bounds(
        1549471.9221, 6403610.94, 1550001.32545, 6404015.8
    )
});
var vectors = new OpenLayers.Layer.Vector("Lines", {
    strategies: [new OpenLayers.Strategy.Fixed()],                
    protocol: new OpenLayers.Protocol.HTTP({
        url: "data/roads.json",//Ajax请求本地的json文件,chrome默认不允许 需要修改下
        format: new OpenLayers.Format.GeoJSON()//格式是GeoJSON
    }),
    //styleMap: styles 可以单独制定线的样式等等,默认是黄的
});
map.addLayer(vectors);//json图层
map.zoomToMaxExtent();

4.多个图层及切换

1
2
3
4
var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});//默认不显示
map.addLayers([osm, gmap]);//添加多个图层(倒序添加,第0层会盖住第1层)
map.addControl(new OpenLayers.Control.LayerSwitcher());//切换器

5.ArcGIS服务的图层

1
2
3
layer = new OpenLayers.Layer.ArcGIS93Rest
cacheLayer = new OpenLayers.Layer.ArcGISCache
new OpenLayers.Layer.ArcIMS

6.图层描述

1
2
//配合map.addControl(new OpenLayers.Control.Attribution());
new OpenLayers.Layer.WMS(...,{attribution:"描述信息!@#$"});

7.Bing图层

1
2
3
4
5
new OpenLayers.Layer.Bing({
    name: "Road",
    key: apiKey,
    type: "Road"
});

8.缩放级别限制

1
2
3
//bing地图的级别, 一般都是在new Map时候传入参数    
maxResolution: 76.43702827453613,
numZoomLevels: 3

9.Layer.Boxes绘制矩形线框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//绘图图层
var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );
//边界
var box_extents = [
    [-10, 50, 5, 60],
    [-75, 41, -71, 44],
    [-122.6, 37.6, -122.3, 37.9],
    [10, 10, 20, 20]
];
//根据边界画矩形
for (var i = 0; i < box_extents.length; i++) {
    ext = box_extents[i];
    bounds = OpenLayers.Bounds.fromArray(ext);
    box = new OpenLayers.Marker.Box(bounds);
    box.events.register("click", box, function (e) {
        this.setBorder("yellow");
    });
    boxes.addMarker(box);
}
map.addLayers([ol_wms, boxes]);

10.Layer.Vector绘制矩形要素

1
2
3
4
5
6
7
8
9
10
11
12
var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
for (var i = 0; i < box_extents.length; i++) {
    ext = box_extents[i];
    bounds = OpenLayers.Bounds.fromArray(ext);
    box = new OpenLayers.Feature.Vector(bounds.toGeometry());
    boxes.addFeatures(box);
}
map.addLayers([ol_wms, boxes]);
//选择Vector工具
var sf = new OpenLayers.Control.SelectFeature(boxes);
map.addControl(sf);
sf.activate();//激活选择器, 可点选激活

11.缓存瓦片数

1
2
//设置缓存的瓦片数(包括视野外的)默认是0
 new OpenLayers.Layer.WMS( ..., {'buffer':4})

12.利用localStorage做缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//1.写
cacheWrite = new OpenLayers.Control.CacheWrite({
    autoActivate: true,
    imageFormat: "image/jpeg",
    eventListeners: {
        cachefull: function() { status.innerHTML = "Cache full."; }
    }
});
map.addControl(cacheWrite);
//写事件
map.layers[0].events.on({'tileloaded': updateStatus});
//2.读
cacheRead = new OpenLayers.Control.CacheRead();
map.addControl(cacheRead);
//读事件
new OpenLayers.Layer.WMS({...
    eventListeners: {
        tileloaded: updateHits
    }
})

13.canvas绘图元素

1
2
3
4
var wfs = new OpenLayers.Layer.Vector("States", {    
            ... ...
        renderers: ["Canvas", "SVG", "VML"]
    });

14.Vector上绘制GeoJSON

1
2
3
4
5
6
7
var vector = new OpenLayers.Layer.Vector("GeoJSON", {
        ...
        protocol: new OpenLayers.Protocol.HTTP({
            url: "geojson-reprojected.json",
            format: new OpenLayers.Format.GeoJSON()
        })
    });

15.xml加载GeoRSS图层

1
var newl = new OpenLayers.Layer.GeoRSS(

16.自定义图片图标加在GeoRSS图层上

1
2
3
var yelp = new OpenLayers.Icon("http://www.openlayers.org/images/OpenLayers.trac.png", new OpenLayers.Size(49,44));
var newl = new OpenLayers.Layer.GeoRSS( 'Yelp GeoRSS', 'yelp-georss.xml', {'icon':yelp});
map.addLayer(newl);

17.GML图层

1
2
3
4
5
map.addLayer(new OpenLayers.Layer.Vector("GML", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: "gml/polygon.xml",
        format: new OpenLayers.Format.GML()
    }),

18.google图层

1
2
3
4
var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: G_PHYSICAL_MAP}
);

19.静态网格图层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/有点儿wmts的意思
new OpenLayers.Layer.Grid(
    "Google Streets",
    "http://maps.googleapis.com/maps/api/staticmap?sensor=false&maptype=roadmap", 
    null, options
),
var options = {
    singleTile: true,
    ratio: 1,
    isBaseLayer: true,
    wrapDateLine: true,
    getURL: function() {
        var center = this.map.getCenter().transform("EPSG:3857", "EPSG:4326"),
            size = this.map.getSize();
        return [
            this.url, "&center=", center.lat, ",", center.lon,
            "&zoom=", this.map.getZoom(), "&size=", size.w, "x", size.h
        ].join("");
    }
};

20.gutter沟槽

1
2
3
4
5
6
//这个不知道干嘛用的, 是个纯地质学的概念, 不太理解
//查得gutter的值会影响imageSize和imageOffset
new OpenLayers.Layer.WMS( "States (15px gutter)",
        "http://suite.opengeo.org/geoserver/wms",
        {layers: 'usa:states'},
        {gutter: 15,

21.图像图层

1
2
3
4
5
6
7
var graphic = new OpenLayers.Layer.Image(
    'City Lights',
    'data/4_m_citylights_lg.gif',
    new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
    new OpenLayers.Size(580, 288),
    {numZoomLevels: 3}
);

22.KaMap图层

1
2
var jpl_wms = new OpenLayers.Layer.KaMap( "Satellite",
     "http://www.openlayers.org/world/index.php", {g: "satellite", map: "world"});

23.绘制KML轨迹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
new OpenLayers.Map({
    div: "map",
    projection: mercator,
    layers: [
            ... ...
            eventListeners: {
                "beforefeaturesadded": function(e) {
                    // group the tracks by fid and create one track for
                    // every fid
                    var fid, points = [], feature;
                    for (var i=0, len=e.features.length; i<len; i++) {
                        feature = e.features[i];
                        if ((fid && feature.fid !== fid) || i === len-1) {
                            this.addNodes(points, {silent: true});
                            points = [];
                        } else {
                            points.push(feature);
                        }
                        fid = feature.fid;
                    }
                    return false;
                }
            }

24.图层加载事件

1
2
3
4
5
6
layer.events.register("loadstart", layer, function() {
    this.logEvent("Load Start");
});
layer.events.register("tileloaded", layer, function() {
    this.logEvent("Tile loaded. " + this.numLoadingTiles + " left.");
});

25.WMS图层透明度

1
shade.setOpacity(newOpacity);//shade是Layer.WMS

26.XYZ图层

1
var earth = new OpenLayers.Layer.XYZ(

27.MapGuide图层

1
var layer = new OpenLayers.Layer.MapGuide(

28.MapServer图层

1
layer = new OpenLayers.Layer.MapServer(

29.文字图层

1
new OpenLayers.Layer.Text( "text", { location:"./textfile.txt"} );

30.maker压盖顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var layer = new OpenLayers.Layer.Vector(
    "Y-Order",
    {
        ... ...
        rendererOptions: {yOrdering: true},
        renderers: renderer
    }
);
var layer = new OpenLayers.Layer.Vector(
    "Drawing Order",
    {
        isBaseLayer: true,
        // enable the indexer by setting zIndexing to true
        rendererOptions: {zIndexing: true}
    }
);

31.OSM在Canvas画布上的事件

1
2
3
4
5
6
7
8
9
10
11
layer = new OpenLayers.Layer.OSM('Simple OSM Map', null, {
    eventListeners: {
        tileloaded: function(evt) {
            var ctx = evt.tile.getCanvasContext();
            if (ctx) {
                var imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);
                var pix = imgd.data;
                for (var i = 0, n = pix.length; i < n; i += 4) {
                    pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;
                }
                ctx.putImageData(imgd, 0, 0);

32.点阵

1
2
3
var points = new OpenLayers.Layer.PointGrid({
    isBaseLayer: true, dx: 15, dy: 15
});

33.GeoRSS

1
rss = new OpenLayers.Layer.GeoRSS(parts[parts.length-1], value);

34.坐标系切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
'EPSG:3574': {
    projection: new OpenLayers.Projection('EPSG:3574'),
    units: 'm',
    maxExtent: new OpenLayers.Bounds(-5505054, -5505054, 5505054, 5505054),
    maxResolution: 5505054 / 128,
    numZoomLevels: 18
},
//切换坐标系
function setProjection() {
    projCode = this.innerHTML;
    var oldExtent = map.getExtent();
    var oldCenter = map.getCenter();
    var oldProjection = map.getProjectionObject();
    // map projection is controlled by the base layer
    map.baseLayer.addOptions(projectionOptions[projCode]);
    // with the base layer updated, the map has the new projection now
    var newProjection = map.getProjectionObject();
    // transform the center of the old projection, not the extent
    map.setCenter(
        oldCenter.transform(oldProjection, newProjection,
        map.getZoomForExtent(oldExtent.transform(oldProjection, newProjection))
    ));
    for (var i=map.layers.length-1; i>=0; --i) {
        // update grid settings
        map.layers[i].addOptions(projectionOptions[projCode]);
        // redraw layer - just in case center and zoom are the same in old and
        // new projection
        map.layers[i].redraw();
    }
}

35.shift和ctrl画矩形

1
2
3
4
5
6
7
8
9
polyOptions = {sides: 4};
polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
                                OpenLayers.Handler.RegularPolygon,
                                {handlerOptions: polyOptions});
//配置,形状:shape==>"3" triangle ,"4"  square,"5" pentagon ,"6" hexagon "40" circle
polygonControl.handler.setOptions(options);
//
var radius = fraction * map.getExtent().getHeight();
polygonControl.handler.setOptions({radius: radius,angle: 0});

36.瓦片缓存图层

1
2
3
4
5
6
layer = new OpenLayers.Layer.TileCache("TileCache Layer",
                ["http://c0.tilecache.osgeo.org/wms-c/cache/",
                 "http://c1.tilecache.osgeo.org/wms-c/cache/",
                 "http://c2.tilecache.osgeo.org/wms-c/cache/",
                 "http://c3.tilecache.osgeo.org/wms-c/cache/",
                 "http://c4.tilecache.osgeo.org/wms-c/cache/"],

37.瓦片原点的偏移

1
tileOrigin: new OpenLayers.LonLat(-180, -90)

38.TMS查询

1
2
layer = new OpenLayers.Layer.TMS( "TMS",
        "http://tilecache.osgeo.org/wms-c/Basic.py/", {layername: 'basic', type:'png'} );

39.图层zoom时的过渡效果

1
transitionEffect:'resize' ; //null

40.UTFGrid

1
2
3
4
5
6
//读对应位置的json
var utfgrid = new OpenLayers.Layer.UTFGrid({
    url: "utfgrid/world_utfgrid/${z}/${x}/${y}.json",
    utfgridResolution: 4, // default is 2
    displayInLayerSwitcher: false
});

41.WMS长url

1
2
3
4
5
6
7
8
var base = new OpenLayers.Layer.WMS(
    base.mergeNewParams({makeTheUrlLong: longText});
    var string = OpenLayers.Util.getElement('year').value + "-" +
                         OpenLayers.Util.getElement('month').value + "-" +
                         OpenLayers.Util.getElement('day').value + "T" +
                         OpenLayers.Util.getElement('hour').value + ":" +
                         OpenLayers.Util.getElement('minute').value + ":00";
    base.mergeNewParams({'time':string});

42.WMTS图层

1
2
3
4
5
6
7
8
9
10
11
var wmts = new OpenLayers.Layer.WMTS({
    name: "Medford Buildings",
    url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",
    layer: "medford:buildings",
    matrixSet: "EPSG:900913",
    matrixIds: matrixIds,
    format: "image/png",
    style: "_null",
    opacity: 0.7,
    isBaseLayer: false
});

43.WorldWind图层

1
new OpenLayers.Layer.WorldWind

44.Zoomify图层

1
2
var zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url, 
        new OpenLayers.Size( zoomify_width, zoomify_height ) );