GIS: Openlayer 中使用SLD动态改变地图

时间：2022-03-28 19:04:21

首先定义layer

var bounds = new OpenLayers.Bounds(73.4469604492188, 3.40847730636597,
            135.085830688477, 53.5579261779785);
    var options = {
        controls : [],
        maxExtent : bounds,
        maxResolution : 0.3407768368721023,
        projection : "EPSG:4326",
        units : 'degrees'
    };
    map = new OpenLayers.Map('map', options);

lyr0 = new OpenLayers.Layer("Fake BaseLayer");

其中‘map’为html中的div的ID，设置其style

<!--
#map {
    clear: both;
    position: relative;
    width: 800px;
    height: 710px;
    border: 1px solid black;
}

-->

接下来，定义图层：

lyr1 = new OpenLayers.Layer.WMS("CAS:test - Tiled",
        "http://cybergis.cnic.cn/geoserver/wms" ,
        {
                height:"600",
                width:"800",
           "LAYERS": "CAS:prov",   此处名称必须由GEOServer定义
            "FORMAT": "image/png",
            "VERSION": "1.1.1",
            "EXCEPTIONS": "application/vnd.ogc.se_inimage",
            "TRANSPARENT": "TRUE",
            "SERVICE": "WMS",
            "REQUEST": "GetMap",
            "STYLES": "",
            "SRS": "EPSG:4326",
            tilesOrigin : "70.3650169372559,0.9010048627853431",
        },
        {
            "noMagic": true,
            "isBaseLayer": true,
            "isVisible": true,
            "gutter": 10,
            "buffer": 1,
            "opacity": 1,
            "displayOutsideMaxExtent": true
        });

第三步：添加图层

map.addLayers([lyr1]);

//定义地图的辅助控件
       map.addControl(new OpenLayers.Control.Navigation());
       // map.addControl(new OpenLayers.Control.MousePosition());
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.Scale($('scale')));
        map.addControl(new OpenLayers.Control.PanZoomBar({
        position : new OpenLayers.Pixel(2, 15)
    }));
        map.zoomToExtent(bounds);
        //map.zoomToMaxExtent();

第四步：定义修改地图的js方法

function switchColor(colors)
    {
            lyr1.mergeNewParams({sld:'http://159.226.10.23/ews/chnprov.sld'});
            lyr1.redraw();
    }
注意sld的url不能用localhost，否则服务器无法获取sld文件

第五步：修改sld文件

标签：

相关文章