Dynamics crm 在openlayers集成中使用标记放大/缩小时，UI被阻止

我已经将openlayers集成到我的angularJs/Typescript项目和bing地图中，以开发ms dynamics crm客户端应用程序。我将此应用程序用作field service mobile crm中的脱机html

我在地图上有大约5公里的记录作为标记，但当我放大/缩小地图时，这意味着当时所有的活动都会被阻挡大约10-20秒，我认为这很可怕

下面是一些代码：

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

this.ClusterSource=new ol.source.Cluster({
距离:距离,，
来源：矢量源
});
var vectorLayer=新ol.layer.Vector({
renderMode:'图像'，
来源：this.ClusterSource，
style:this.styleFunction，
zIndex:9999
});
self.MapControl.addLayer（矢量层）；
styleFunction=（功能、分辨率）=>{
让自我=这个；
如果（！feature | |！resolution）返回；
让最后的风格：ol.style.style；
让features=feature.get（“features”）；
如果（features.length==1）{
finalStyle=新的ol.style.style({
图片：新的ol.style.Icon（{src:
self.getIconForSinglePlace（feature.get（“features”）[0]））
});
}否则如果（features.length>1）{
如果（分辨率>1）最终样式=
self.getStyleForCluster（features.length）；
else self.显示重叠（特征）；
}
返回最终样式；
}
getStyleForCluster=（大小：数字）：ol.style.style=>{
让clusterStyle=（window.styleCache[size]；
如果（！clusterStyle）{
clusterStyle=新的ol.style.style({
图片：新ol.style.Circle({
半径：（数学对数（大小）/数学对数（10））*3+10，
填充：新的ol.style.fill({
颜色：此。getFillColorForPlace（大小）
})
}),
文本：新的ol.style.text({
text:size.toString（），
填充：新的ol.style.fill({
颜色：“fff”
})
})
});
（window）.styleCache[size]=clusterStyle；
}
返回簇样式；
}
getIconForSinglePlace（功能：任意）{
返回feature.get（“元数据”）.图标
？feature.get（“元数据”）.图标
: 
`../images/pushpins/${feature.get（“元数据”）.Color.substring（1）}.png`；
}
//此函数调用标记的重复位置
displayOverlapping=（功能：ol.Feature[]）=>{
如果（功能）{
设坐标=（特征[0].getGeometry（））.getCoordinates（）；
设points=this.generatePointsCircle（features.length，坐标）；
设multiLineString=new ol.geom.multiLineString（[]）；
多重约束。集合坐标（[]）；
features.forEach（（feature，index）=>{
multiLineString.appendLineString（新的ol.geom.LineString（[坐标，点[索引]））；
特征.集合几何（新的ol.几何点（点[索引]）；
});
}
};

---

我正在寻找专家的建议。

您应该像缓存集群样式一样缓存单个特征样式

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

if（features.length==1）{
设src=self.getIconForSinglePlace（feature.get（“features”）[0]）；
finalStyle=（window.styleCache[src]；
如果（！finalStyle）{
finalStyle=新的ol.style.style({
图片：新的ol.style.Icon（{src:src}）
});
（window）.styleCache[src]=finalStyle；
}

Hi@Mike，谢谢你的建议。在实施你的解决方案后，当我放大/缩小地图时，仍然会遇到同样的问题，阻塞用户界面约20秒。场景是在搜索后，我在地图上的记录约为2k到3/5k，我放大了/我们的，当我单击标记或用户界面上的任何按钮时，用户界面会被阻塞约20秒，它会消失只发生一次。在刷新页面之前，问题永远不会发生。那么原因是什么呢？