Vue+@supermap/iclient-ol加载矢量瓦片报错

[hongwei985]

One-line summary [问题简述]

工程为新建的vue3.0（脚手架create），只加了3个依赖包（"@supermap/iclient-ol": "^11.0.0", "@supermap/babel-plugin-import": "^0.0.1", "node-polyfill-webpack-plugin": "^2.0.1"），加载TileLayer，可以正常显示，加载矢量切片报错，报错如下：（Cannot read properties of undefined (reading 'stylefunction')）。 后来vue2也测试过，报错类似Cannot read property 'applyBackground' of undefined 感觉都是跟mapbox样式有关系（olms），但现在不知道如何解决。

Version [产品及版本]

• Vue+@supermap/iclient-ol [iClient 产品]:^11.0.0
• chrome最新版本 [浏览器类型和版本]:
• windows 10 [操作系统类型和版本]:

---

Actual Behavior [当前现象]

Expected Behavior [期望现象]

能正常加载矢量切片（如果需要工程文件，可以发给您，vue2和3都有）

Example of reproducing the issue [重现现象的例子]

index.html中加入2条link，

<link href='https://iclient.supermap.io/web/libs/openlayers/6.1.1/ol.css' rel='stylesheet' /> <link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />

主体代码片段如下：

import Map from 'ol/Map';
import View from 'ol/View';
import { MVT } from 'ol/format';
import Feature from 'ol/Feature';
import VectorTileLayer from 'ol/layer/VectorTile';
import TileGrid from 'ol/tilegrid/TileGrid';
import { VectorTileSuperMapRest } from '@supermap/iclient-ol/overlay/VectorTileSuperMapRest';
import { MapboxStyles } from '@supermap/iclient-ol/overlay/vectortile/MapboxStyles';

const initMap = () => {
      const url1 = 'https://iserver.supermap.io/iserver/services/map-mvt-California/rest/maps/California';
      const format = new MVT({
        featureClass: Feature
      });
      const resolutions = getResolutions(10, 0.000003461454994642, 0, 16);
      const map = new Map({
        target: mapRef.value || 'map',
        view: new View({
          center: [116, 39],
          zoom: 6,
          projection: 'EPSG:4326',
          multiWorld: true,
          resolutions
        })
      });
      const style = new MapboxStyles({
        /* map: map, */
        url: url1,
        source: 'California',
        resolutions: resolutions
      });
      style.on('styleloaded', function () {
        const vectorLayer = new VectorTileLayer({
          //设置避让参数
          declutter: true,
          source: new VectorTileSuperMapRest({
            url: url1,
            projection: 'EPSG:4326',
            tileGrid: new TileGrid({
              resolutions: resolutions,
              origin: [-180, 90],
              tileSize: 512
            }),
            tileType: 'ScaleXY',
            format: format
          }),
          style: style.getStyleFunction()
        });
        map.addLayer(vectorLayer);
      });
    };

---

What is motivation or use case for changing the behavior? [需求的场景和目的是什么？]