1

I don't know, how I can add my SLD style for WFS layer. When I add WFS layer, ol using default style for layer. When I add WMS, ol using my SLD style for layer.I using GeoServer + OpenLayers3. My code (ol):

var map;
function init(){

view = new ol.View({
    center: [4701182.98765148, 7492051.764399836],
    zoom: 5,
    maxZoom: 18,
    minZoom: 2
});

map = new ol.Map({
    target: 'map',
    renderer: 'canvas',
    view: view, 
});

var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var vectorSourceHotpoint = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent, resolution, projection) {
    return 'http://192.168.255.197:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=geoportal:hotpoint&' +
    'outputFormat=application/json&srsname=EPSG:4326&' +
    'bbox=' + extent.join(',') + ',EPSG:4326';
    },
    strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 18
    })),
    projection: 'EPSG:4326'
    });


var hotpointLayer = new ol.layer.Vector({
    source: vectorSourceHotpoint,
});
map.addLayer(osmLayer);
map.addLayer(hotpointLayer);
map.addLayer(threatLayer);

And my SLD file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<NamedLayer>
  <Name>Generalization</Name>
  <UserStyle>
    <!-- Styles can have names, titles and abstracts -->
    <FeatureTypeStyle>
      <Transformation>
        <ogc:Function name="gs:PointStacker">
          <ogc:Function name="parameter">
            <ogc:Literal>data</ogc:Literal>
          </ogc:Function>
          <ogc:Function name="parameter">
            <ogc:Literal>cellSize</ogc:Literal>
            <ogc:Literal>30</ogc:Literal>
          </ogc:Function>
          <ogc:Function name="parameter">
            <ogc:Literal>outputBBOX</ogc:Literal>
            <ogc:Function name="env">
           <ogc:Literal>wms_bbox</ogc:Literal>
            </ogc:Function>
          </ogc:Function>
          <ogc:Function name="parameter">
            <ogc:Literal>outputWidth</ogc:Literal>
            <ogc:Function name="env">
           <ogc:Literal>wms_width</ogc:Literal>
            </ogc:Function>
          </ogc:Function>
          <ogc:Function name="parameter">
            <ogc:Literal>outputHeight</ogc:Literal>
            <ogc:Function name="env">
              <ogc:Literal>wms_height</ogc:Literal>
            </ogc:Function>
          </ogc:Function>
        </ogc:Function>
      </Transformation>

      <Rule>
        <Name>rule1</Name>
        <Title>Hotpoint</Title>
        <MaxScaleDenominator>100000</MaxScaleDenominator>
        <PointSymbolizer uom="http://www.opengeospatial.org/se/units/metre">
            <Graphic>
                <Mark>
                    <WellKnownName>square</WellKnownName>
                    <Fill>
                        <CssParameter name="fill">#FFFF00</CssParameter>
                    </Fill>
                    <Stroke>
                      <CssParameter name="stroke">#000000</CssParameter>
                    </Stroke>
                </Mark>
                <Size>250</Size>
                <Rotation>0</Rotation>
            </Graphic>
        </PointSymbolizer>
    </Rule>

      <Rule>
        <MinScaleDenominator>100000</MinScaleDenominator>
        <MaxScaleDenominator>320000000</MaxScaleDenominator>
        <PointSymbolizer>
                <Graphic>
                    <Mark>
                        <WellKnownName>square</WellKnownName>
                        <Fill>
                            <CssParameter name="fill">#FFFF00</CssParameter>
                        </Fill>
                        <Stroke>
                            <CssParameter name="stroke">#000000</CssParameter>
                        </Stroke>
                    </Mark>
                    <Size>10</Size>
                </Graphic>
            </PointSymbolizer>
      </Rule>
      <Rule>
        <Name>rule2</Name>
        <Title>2-9 Hotpoints</Title>
        <ogc:Filter>
          <ogc:PropertyIsBetween>
            <ogc:PropertyName>count</ogc:PropertyName>
            <ogc:LowerBoundary>
              <ogc:Literal>2</ogc:Literal>
            </ogc:LowerBoundary>
            <ogc:UpperBoundary>
              <ogc:Literal>9</ogc:Literal>
            </ogc:UpperBoundary>
          </ogc:PropertyIsBetween>
        </ogc:Filter>
        <PointSymbolizer>
          <Graphic>
            <Mark>
              <WellKnownName>circle</WellKnownName>
              <Fill>
                <CssParameter name="fill">#FFFF00</CssParameter>
              </Fill>
              <Stroke>
                          <CssParameter name="stroke">#000000</CssParameter>
                      </Stroke>
            </Mark>
            <Size>16</Size>
          </Graphic>
        </PointSymbolizer>
        <TextSymbolizer>
          <Label>
            <ogc:PropertyName>count</ogc:PropertyName>
          </Label>
          <Font>
            <CssParameter name="font-family">Arial</CssParameter>
            <CssParameter name="font-size">12</CssParameter>
            <CssParameter name="font-weight">bold</CssParameter>
          </Font>
          <LabelPlacement>
            <PointPlacement>
            <AnchorPoint>
              <AnchorPointX>0.5</AnchorPointX>
              <AnchorPointY>0.8</AnchorPointY>
            </AnchorPoint>
            </PointPlacement>
          </LabelPlacement>
          <Halo>
            <Radius>2</Radius>
            <Fill>
              <CssParameter name="fill">#000000</CssParameter>
              <CssParameter name="fill-opacity">0.9</CssParameter>
            </Fill>
          </Halo>
          <Fill>
            <CssParameter name="fill">#FFFFFF</CssParameter>
            <CssParameter name="fill-opacity">1.0</CssParameter>
          </Fill>
        </TextSymbolizer>
      </Rule>
      <Rule>
        <Name>rule3</Name>
        <Title>> 9-50 Hotpoints</Title>
             <ogc:Filter>
                <ogc:PropertyIsBetween>
                    <ogc:PropertyName>count</ogc:PropertyName>
                        <ogc:LowerBoundary>
                            <ogc:Literal>11</ogc:Literal>
                        </ogc:LowerBoundary>
                        <ogc:UpperBoundary>
                             <ogc:Literal>50</ogc:Literal>
                        </ogc:UpperBoundary>
                 </ogc:PropertyIsBetween>
              </ogc:Filter>
         <PointSymbolizer>
          <Graphic>
            <Mark>
              <WellKnownName>circle</WellKnownName>
              <Fill>
                <CssParameter name="fill">#FFFF00</CssParameter>
              </Fill>
              <Stroke>
                          <CssParameter name="stroke">#000000</CssParameter>
                      </Stroke>
            </Mark>
            <Size>24</Size>
          </Graphic>
         </PointSymbolizer>
        <TextSymbolizer>
          <Label>
            <ogc:PropertyName>count</ogc:PropertyName>
          </Label>
          <Font>
            <CssParameter name="font-family">Arial</CssParameter>
            <CssParameter name="font-size">12</CssParameter>
            <CssParameter name="font-weight">bold</CssParameter>
          </Font>
          <LabelPlacement>
            <PointPlacement>
            <AnchorPoint>
              <AnchorPointX>0.5</AnchorPointX>
              <AnchorPointY>0.8</AnchorPointY>
            </AnchorPoint>
            </PointPlacement>
          </LabelPlacement>
          <Halo>
            <Radius>2</Radius>
            <Fill>
              <CssParameter name="fill">#000000</CssParameter>
              <CssParameter name="fill-opacity">0.9</CssParameter>
            </Fill>
          </Halo>
          <Fill>
            <CssParameter name="fill">#FFFFFF</CssParameter>
            <CssParameter name="fill-opacity">1.0</CssParameter>
          </Fill>
        </TextSymbolizer>
      </Rule>

      <Rule>
        <Name>rule4</Name>
        <Title>Greater 50 Hotpoints</Title>
      <ogc:Filter>
          <ogc:PropertyIsGreaterThan>
            <ogc:PropertyName>count</ogc:PropertyName>
            <ogc:Literal>51</ogc:Literal>
          </ogc:PropertyIsGreaterThan>
        </ogc:Filter>
        <PointSymbolizer>
          <Graphic>
            <Mark>
              <WellKnownName>circle</WellKnownName>
              <Fill>
                <CssParameter name="fill">#FFFF00</CssParameter>
              </Fill>
              <Stroke>
                          <CssParameter name="stroke">#000000</CssParameter>
                      </Stroke>
            </Mark>
            <Size>32</Size>
          </Graphic>
        </PointSymbolizer>
        <TextSymbolizer>
          <Label>
            <ogc:PropertyName>count</ogc:PropertyName>
          </Label>
          <Font>
            <CssParameter name="font-family">Arial</CssParameter>
            <CssParameter name="font-size">12</CssParameter>
            <CssParameter name="font-weight">bold</CssParameter>
          </Font>
          <LabelPlacement>
            <PointPlacement>
              <AnchorPoint>
                <AnchorPointX>0.5</AnchorPointX>
                <AnchorPointY>0.8</AnchorPointY>
              </AnchorPoint>
            </PointPlacement>
          </LabelPlacement>
          <Halo>
             <Radius>2</Radius>
             <Fill>
               <CssParameter name="fill">#000000</CssParameter>
               <CssParameter name="fill-opacity">0.9</CssParameter>
             </Fill>
          </Halo>
          <Fill>
            <CssParameter name="fill">#FFFFFF</CssParameter>
            <CssParameter name="fill-opacity">1.0</CssParameter>
          </Fill>
        </TextSymbolizer>
      </Rule>
    </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

2

There is no SLD parsing in OpenLayers 3. You could use JSONIX to parse the SLD into JSON and then write your code to translate the JSON structure into ol3 style objects / functions. But this is not a trivial task.

  • Worth mentioning JSONNIX for people coming across github.com/openlayers/ol3/issues/2954? – Guy Sep 23 '15 at 10:04
  • @bartvde Ok, then other question, if I will use wms layer, how i can get feature from layer for popup? – Warden Sep 23 '15 at 10:35
  • 1
    You can use WMS GetFeatureInfo for that, check the existing ol3 examples. – bartvde Sep 23 '15 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.