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

最新推荐文章于 2023-07-12 22:59:48 发布

yanghw0510

最新推荐文章于 2023-07-12 22:59:48 发布

阅读量1.3k

点赞数

文章标签： styles colors filter encoding border service

本文链接：https://blog.csdn.net/yanghw0510/article/details/6239606

版权

首先定义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文件

<?xml version="1.0" encoding="UTF-8"?> <StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:gml="http://www.opengis.net/gml" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd"> <NamedLayer>  <Name>CAS:prov</Name> <UserStyle> <Name>CAS:prov</Name> <Title>China Province</Title> <FeatureTypeStyle> <Rule> <Title>xinjiang</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>name</ogc:PropertyName>  <ogc:Literal>新疆维吾尔自治区</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <PolygonSymbolizer> <Fill> <CssParameter name="fill">#000000</CssParameter> <CssParameter name="fill-opacity">0.7</CssParameter> </Fill> </PolygonSymbolizer> </Rule>