Search code examples
cluster-analysisopenlayersopenlayers-3openlayers-6

Cluster creation in openlayer 6.4.3 - Uncaught TypeError: this.source.loadFeatures is not a function

I am trying to create cluster using ol 6.4.3. My script is

var cluster_data = {
            "type": "Feature",
          'features': [
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [686213.47091037, 1093486.3776117],
              },
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [687067.04391223, 1094462.7275206],
              },
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [687214.60645801, 1094362.868384],
              },
            }

            ],
        };
var features = new Array(3);
 var source = new ol.layer.Vector({
          features: new ol.format.GeoJSON().readFeatures(cluster_data),
});

var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: source,
});

var styleCache = {};
var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function (feature) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = new Style({
        image: new CircleStyle({
          radius: 10,
          stroke: new Stroke({
            color: '#fff',
          }),
          fill: new Fill({
            color: '#3399CC',
          }),
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({
            color: '#fff',
          }),
        }),
      });
      styleCache[size] = style;
    }
    return style;
  },
});
map.addLayer(clusters);

I have added other 3 Tile layers map.getLayers().extend([bm,road,landmark]); and trying to add cluster over this. But getting error Uncaught TypeError: this.source.loadFeatures is not a function while adding cluster.

The map I got after adding my layer is enter image description here

Solution

  • The error is because

    var source = new ol.layer.Vector({

    should be

    var source = new ol.source.Vector({

    Also the first type in the data before the features should be

    "type": "FeatureCollection",

    And if you are using the OpenLayers full build new Style new CircleStyle new Stroke new Fill and new Text should be new ol.style.Style new ol.style.Circle new ol.style.Stroke new ol.style.Fill and new ol.style.Text

    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);

var cluster_data = {
          "type": "FeatureCollection",
          'features': [
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [686213.47091037, 1093486.3776117],
              },
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [687067.04391223, 1094462.7275206],
              },
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [687214.60645801, 1094362.868384],
              },
            }

            ],
        };

var source = new ol.source.Vector({
          features: new ol.format.GeoJSON().readFeatures(cluster_data),
});

var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: source,
});

var styleCache = {};
var clusters = new ol.layer.Vector({
  source: clusterSource,
  style: function (feature) {
    var size = feature.get('features').length;
    var style = styleCache[size];
    if (!style) {
      style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({
            color: '#fff',
          }),
          fill: new ol.style.Fill({
            color: '#3399CC',
          }),
        }),
        text: new ol.style.Text({
          text: size.toString(),
          fill: new ol.style.Fill({
            color: '#fff',
          }),
        }),
      });
      styleCache[size] = style;
    }
    return style;
  },
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    projection: "EPSG:32643"
  })
});

map.addLayer(clusters);

map.getView().fit(source.getExtent());
map.getView().setZoom(map.getView().getZoom() - 6);

    </script>
  </body>
</html>