OpenLayers3 learning Experience (vi)--WMS service

Recently, some classmates asked how to load GeoServer published WMS service, do not know how to set zoom and extent, first explain the meaning of these two properties:

Zoom: Zooms the map to a level that is understood by the individual;

Extent: The extent of the layer render, beyond which the layer will not be visible (this is the attribute in the layer, others refer to the corresponding version of the API);

Here's how to load the WMS service. Because the ol3 default coordinate system is epsg:3875 and the epsg:2836 corresponds to the previous one, there are two examples of cases

1. Coordinate system is epsg:3875

Note When publishing a service, set the coordinate system to the coordinate system encoded as 3875, so that it is in ol. You can set the center point and zoom level of the display directly in the view.

function init () {
            var extent=[968000,200000,990000,225000];//layer Displays the maximum range after which the
            var layers=[new is not displayed
                    Ol.layer.Tile ({
                        extent:extent,
                        source:new ol.source.TileWMS ({
                            URL: ' http://localhost:8080/geoserver/ Houwork/wms ',
                            params:{
                                ' LAYERS ': ' houwork:nyc_roads ',
                                ' tiled ': true
                            },
                            servertype: ' GeoServer '
                        })
            ];
            var map=new ol. Map ({

                layers:layers,
                target: ' map ',
                view:new ol. View ({
                    //projection:projection,
                    center:[988000,214000],
                    //extent:extent,
                    zoom:12

                })
            });
        }

2. Other coordinate systems

To load a service with another coordinate system, to replace the view's default projection, here we load a epsg:26713 service

2.1 New Projection

                    Projection:new ol.proj.Projection ({
                        code: ' epsg:26713 ',
                        Units:ol.proj.Units.METERS
                    })

2.2 Creating a new view

View:new ol. View ({
                    projection:new ol.proj.Projection ({
                        code: ' epsg:26713 ',
                        Units:ol.proj.Units.METERS

                    }),
                    center:[599167,4921980],
                    zoom:12

                })

2.3 Overall

function Init2 () {
            var layers=[
                new Ol.layer.Tile ({
                    source:new ol.source.TileWMS ({
                        URL: '/http// Localhost:8080/geoserver/sf/wms ',
                        params:{
                            ' LAYERS ': ' sf:roads ',
                            ' tiled ': true
                        },
                        ServerType : ' GeoServer '})
            ];
            var map=new ol. Map ({

                layers:layers,
                target: ' map ',
                view:new ol. View ({
                    projection:new ol.proj.Projection ({
                        code: ' epsg:26713 ',
                        Units:ol.proj.Units.METERS

                    }) ,
                    center:[599167,4921980],
                    //extent:extent,
                    zoom:12

                })
            });
        

2.4 Results