SuperMap/iClient-JavaScript

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

hongwei985 opened this issue · 1 comments

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 [当前现象]

image

image

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? [需求的场景和目的是什么?]

stale commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.