Question

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.

Answer 1

您应该以与缓存集群样式相同的方式缓存单个要素样式。

    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;
        }

UI is getting blocked when zooming in/out with markers in openlayers integration

1 个答案: