-1

I have integrated openlayers in my angularJs/Typescript project with bing map to develop ms dynamics crm client-side application. I am using this application as offline-html in field service mobile crm.

I have about 5k records as markers on the map but when I zooming in/out the map is hanging that means all activities blocking at that time for about 10-20 seconds which is horrible I think.

Here are shallow of the code:

this.ClusterSource = new ol.source.Cluster({
     distance: distance,
     source: vectorSource
});

var vectorLayer = new ol.layer.Vector({
    renderMode: 'image',
    source: this.ClusterSource,
    style: this.styleFunction,
    zIndex: 9999
});


self.MapControl.addLayer(vectorLayer);  

styleFunction = (feature, resolution) => {
    let self = this;

    if (!feature || !resolution) return;

        let finalStyle: ol.style.Style;
        let features = <ol.Feature[]>feature.get("features");
        if (features.length === 1) {
            finalStyle = new ol.style.Style({
                image: new ol.style.Icon({ src: 
                self.getIconForSinglePlace(feature.get("features")[0]) })
            });
        } else if (features.length > 1) {
            if (resolution > 1) finalStyle = 
                self.getStyleForCluster(features.length);
            else self.displayOverlapping(features);
        }

        return finalStyle;
    }



    getStyleForCluster = (size: number): ol.style.Style => {
        let clusterStyle = (<any>window).styleCache[size];
        if (!clusterStyle) {
            clusterStyle = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: (Math.log(size) / Math.log(10)) * 3 + 10,
                    fill: new ol.style.Fill({
                        color: this.getFillColorForPlace(size)
                    })
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                        color: "#fff"
                    })
                })
            });
            (<any>window).styleCache[size] = clusterStyle;
        }
        return clusterStyle;
    }

    getIconForSinglePlace(feature: any) {
        return feature.get("metadata").icon
            ? feature.get("metadata").icon
            : 
  `../images/pushpins/${feature.get("metadata").Color.substring(1)}.png`;
    }

    // this function call for duplicate position of markers
    displayOverlapping = (features: ol.Feature[]) => {
        if (features) {
            let coordinates = (<any>features[0].getGeometry()).getCoordinates();
            let points = this.generatePointsCircle(features.length, coordinates);

            let multiLineString = new ol.geom.MultiLineString([]);
            multiLineString.setCoordinates([]);

            features.forEach((feature, index) => {
                multiLineString.appendLineString(new ol.geom.LineString([coordinates, points[index]]));
                feature.setGeometry(new ol.geom.Point(points[index]));
            });
        }
    };

I am looking suggestion from experts.

user10496245
  • 217
  • 3
  • 17

1 Answers1

0

You should cache your single feature styles in the same way as you are caching cluster styles.

    if (features.length === 1) {
        let src = self.getIconForSinglePlace(feature.get("features")[0]);
        finalStyle = (<any>window).styleCache[src];
        if (!finalStyle) {
            finalStyle = new ol.style.Style({
                image: new ol.style.Icon({ src: src })
            });
            (<any>window).styleCache[src] = finalStyle;
        }
Mike
  • 16,042
  • 2
  • 14
  • 30
  • Hi @Mike, Thank you for your suggestion. After implementing your solution still getting the same problem blocking UI for about 20 secs when I zoom in/out my map. The scenario is after searching I have records on map about 2k to 3/5k and I zoom in/our and when I click on marker or any button on the UI the UI get blocked about 20 secs and it just happens once. Until refresh the page the problem never happens. So what could be the reason? – user10496245 Apr 18 '19 at 06:05