I try to create a webGL-based icon-Clustering with an array of self-hosted images. My approach was to combine the iconSprites-WebGL-Example with ol.clusterSource. The ClusterLayer shoes up, but it is only displayed as pointCoordinates without the images. If i only render the main vectorLayer, all images are there, but (of course) not clustered. Somehow i can´t access the features from the vectorLayer inside the clusterLayer. Does anybody have an idea, what i´m doing wrong (js is attached) Thanks a lot!
var i;var iconCount = 1001;var icons = new Array(iconCount);for (i = 0; i < iconCount; ++i) {icons = new ol.style.Icon({ opacity: 1, size: [100, 100], crossOrigin: 'anonymous', src: 'data/images_' + i + '.jpg'});}var featureCount = 1000;var features = new Array(featureCount);var feature, geometry;var e = 25000000;for (i = 0; i < featureCount; ++i) { geometry = new ol.geom.Point( [2 * e * Math.random() - e, 2 * e * Math.random() - e]); feature = new ol.Feature(geometry); feature.setStyle( new ol.style.Style({ image: icons[i % (iconCount - 1)] }) ); features = feature;}var vectorSource = new ol.source.Vector({ features: features});var vector = new ol.layer.Vector({ source: vectorSource});// ********************** CLUSTERING ********************************var clusterSource = new ol.source.Cluster({ distance: 40, source: vectorSource});var clusterLayer = new ol.layer.Vector({ source: clusterSource});var map = new ol.Map({ layers: [clusterLayer], renderer: 'webgl', target: document.getElementById('map'), view: new ol.View({ center: [0, 0], zoom: 5 })});
أكثر...
var i;var iconCount = 1001;var icons = new Array(iconCount);for (i = 0; i < iconCount; ++i) {icons = new ol.style.Icon({ opacity: 1, size: [100, 100], crossOrigin: 'anonymous', src: 'data/images_' + i + '.jpg'});}var featureCount = 1000;var features = new Array(featureCount);var feature, geometry;var e = 25000000;for (i = 0; i < featureCount; ++i) { geometry = new ol.geom.Point( [2 * e * Math.random() - e, 2 * e * Math.random() - e]); feature = new ol.Feature(geometry); feature.setStyle( new ol.style.Style({ image: icons[i % (iconCount - 1)] }) ); features = feature;}var vectorSource = new ol.source.Vector({ features: features});var vector = new ol.layer.Vector({ source: vectorSource});// ********************** CLUSTERING ********************************var clusterSource = new ol.source.Cluster({ distance: 40, source: vectorSource});var clusterLayer = new ol.layer.Vector({ source: clusterSource});var map = new ol.Map({ layers: [clusterLayer], renderer: 'webgl', target: document.getElementById('map'), view: new ol.View({ center: [0, 0], zoom: 5 })});
أكثر...