[GIS] OpenLayers 3, adding existing SLD for WFS layer

Question

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>

Answer 1

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.