アイコンスプライトレンダリングに対する負荷にGeoJSONデータと使用のアイコンopenlayers5-

  addGeojson() {
    var vectorSource = new VectorSource({
      url: '/json/air.json',
      format: new GeoJSON()
    });
    // resolution:分辨率
    var styleFunction = function (feature, resolution) {
      return new Style({
// 添加circle
  /*       image: new CircleStyle({
          radius: 10,
          fill: new Fill({
            color: 'rgba(255, 0, 0, 0.1)'
          }),
          stroke: new Stroke({
            color: 'red',
            width: 1
          })
        }), */
//添加sprite图标
        image: new Icon({
          offset: [56,0],
          opacity: 1.0,
          rotateWithView: 28,
          rotation: 0.0,
          scale: 1.0,
          size: [28,29],
          crossOrigin: 'anonymous',
          src: '/img/sprite.png'
        }),
        text: new Text({
          textAlign: 'center',
          textBaseline: 'top',
          // font: font,
          offsetX: 0,
          offsetY: 12,
          text: resolution < 180 ? feature.get('ZDMC') : '',
          fill: new Fill({
            color: '#149321'
          }),
          // 字体阴影
          // stroke: new Stroke({
          //   color: '#149321',
          //   width: 1
          // }),
        })
      });
    };

解像度は解像度
/img/sprite.png（スプライトがドロップされた画像であった）スプライト図合成