Openlayers WFS in GML for Layer Cluster

by LandsD Map API

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<script src="https://cdn.rawgit.com/Viglino/OL3-AnimatedCluster/gh-pages/interaction/selectclusterinteraction.js"></script>
<script src="https://cdn.rawgit.com/Viglino/OL3-AnimatedCluster/gh-pages/layer/animatedclusterlayer.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="map" class="map">
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  font-size: 10px;
  width: 150px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "X";
}

JavaScript

var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809'

var builingSource = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: function(extent) {
    return 'https://landsd.azure-api.net/ogc/wfs?key=' + apikey + '&' +
      'service=WFS&' +
      'version=1.1.0&request=GetFeature&typename=landsd:building&' +
      'outputFormat=application/json&srsname=EPSG:3857&' +
      'bbox=' + extent.join(',') + ',EPSG:3857';
  },
  //strategy: ol.loadingstrategy.bbox
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ())
});

var StreetSource = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: function(extent) {
    return 'https://landsd.azure-api.net/ogc/wfs?key=' + apikey + '&' +
      'service=WFS&' +
      'version=1.1.1&request=GetFeature&typename=landsd:streetcenterlines_tc&' +
      'outputFormat=application/json&srsname=EPSG:3857&' +
      'bbox=' + extent.join(',') + ',EPSG:3857';
  },
  //strategy: ol.loadingstrategy.bbox
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ())
});

var StreetSource1 = new ol.source.Vector({
  loader: function(extent) {
    $.ajax('https://landsd.azure-api.net/ogc/wfs', {
        type: 'GET',
        data: {
          key: apikey,
          service: 'WFS',
          version: '1.1.0',
          request: 'GetFeature',
          typename: 'landsd:streetcenterlines_tc',
          srsName: 'EPSG:3857',
          //outputformat:'application/json',
          bbox: extent.join(',') + ',EPSG:3857'
        }
      }).done(loadFeatures)
      .fail(function() {
        console.log("fail loading layer!!!");
        //alert("fail loading layer!!!")
      });
  },
  strategy: ol.loadingstrategy.bbox
});

function loadFeatures(response) {
  var formatWFS = new ol.format.WFS();
 
  var features = formatWFS.readFeatures(response);
  console.log(features);
  StreetSource1.addFeatures(features);
  
}

var SchoolSource = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url =...