首页 / 浏览问题 / WebGIS / 问题详情
[继续求助]Vue+@supermap/iclient-ol加载矢量瓦片报错
2EXP 2022年08月18日

各位好,如标题所示,通过Vue+@supermap/iclient-ol加载矢量瓦片报错(Cannot read properties of undefined (reading 'stylefunction'))

工程为新建的vue3.0功能,只加了2个依赖包("@supermap/iclient-ol": "^11.0.0", "node-polyfill-webpack-plugin": "^2.0.1"),加载TileLayer,可以正常显示,加载矢量切片报错。

代码片段(按照官方示例修改):

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

      });

    };

请大家帮帮忙,3Q,需要完整工程代码,可以私发。

4 个回答

之前用vue3创建工程引用好像报过类似错。换成vue2就正常了。不知道是不是这个影响的。
711
202EXP 2022年08月19日
如果真是这样的,还是麻烦超图的帮忙看下能不能支持下3创建的项目呢。
我换成vue2 还是报错,报错信息有些不一样,但还是相关的样式报错,olms这个东西,或者您那边有demo可以发我参考下么
没得。老早前的项目了。
再检查一下引入呢,或者可能是vue3的问题吧。
346EXP 2022年08月19日
只引入了2个包,分别是:"@supermap/iclient-ol": "^11.0.0"           "node-polyfill-webpack-plugin": "^2.0.1"    也不确定是不是版本的问题,后面又换成了vue2,也是相关有些类似的报错
您好,您可以查看您的\node_modules\@supermap\iclient-ol\overlay\vectortile\MapboxStyles.js是否存在,如果不存在可以通过命令“npm install @supermap/iclient-ol”进行下载,将获得的node_modules复制到您的node中。

希望可以帮助到您!
446EXP 2022年08月19日
看了下,是存在的
私信联系您

您好,可以安装我们的博客https://blog.csdn.net/supermapsupport/article/details/109294147重新搭建Vue的开发环境,适用于各种超图二维iClient的Vue开发。希望可以帮助到您!

446EXP 2022年09月22日
...