openlayers 使用iconfont作为字体图标来表示大量记录时会出现卡顿

最新推荐文章于 2025-10-29 17:46:08 发布

原创

最新推荐文章于 2025-10-29 17:46:08 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

使用OpenLayers的Iconfont图标在展示大量记录，如航班监控时，可能导致系统卡顿。由于Iconfont通过canvas实时生成图片，频繁更新1000多个航班位置会严重影响性能。为优化，建议切换到使用静态图片来表示图标，预先处理航班监控数据，以提高渲染效率和用户体验。

上一篇讲过openlayers 可以使用iconfont来表示图标，好处是可以任意修改图标图片的颜色，但是如果是来表示大量要素时，存在卡顿现象，如在航班监控时，全国有1000多架航班同时在飞，系统每隔5秒刷新一次，由于用iconfont是用canvas来实时生成的图片的，每个航班生成，1000多架航班刷新会很卡，所以这时候应该用图片来表示图标，即将全国航班监控提取出来，单独用图片表示。

/**
 * 功能：航班样式localStyle
 * @param {feature}  fea         航空要素
 * @param {double}   resolution   分辨率
 */
function localStyle(fea, resolution) {
	var color,opacity;
	var airStatus = fea.get("airStatus");
	if(!airStatus)
		airStatus = "usual";
	var isSetColor = fea.get("isSetColor");
	if(isSetColor == true){
		color = fea.get("setColor");
		opacity = fea.get("setOpacity");
	}
	var icon = fea.get("icon");
	if(!icon){
		icon = fea.get("type");
	}
	var temp = mapFlts.icons[icon];
	var u16  = temp.u16;
	var size = temp.size;
	if(!color){
		color = temp.color?temp.color:(mapFlts.colors[airStatus]?mapFlts.colors[airStatus]:"#ff0000");
		opacity = 1;     
	}
	var zoom = map.getView().getZoom();
	var fontSize = size* zoom/4;
	var scale = 1;
    if(fontSize<0.8*size){
    	fontSize =