Question

使用产品：iclient vue组件库 操作系统：win10 x64
数据类型： shp
问题详细描述：我使用了官方提供的Vue组件库，用起来确实很方便。但是我不清楚该如何用代码实现一些功能了，就比如官方组件中的打开文件组件，用它可以加载shp文件，但是请问该如何写代码来加载shp图层呢？我没有看到相关示例，在api中也并没有收获，谢谢！

Answer 1

您好，您可以参考这个示例：打开文件组件 (supermap.io)，这个示例可以实现打开shp文件

Comments

谢谢您的回复，不过这个示例是演示了如何调用打开文件这个组件，而我的想法是用代码来加载shp图层，也就是一打开网页就能看到加载的shp图层，而并非在页面加载后再点击按钮来加载图层，请问这该怎么实现呢？另外，我想知道怎么在这个组件库中获取mapbox的map实例，谢谢！

---

我找到了一种实现获取mapbox的map实例的方法，我把代码放在下面了，写在mounted里，不过这种方法显然很不规范，因为如果不用settimeout直接获取mapbox的map实例的话会提示undefined，我试过用vue中的nexttick方法也是无效的，目前能用的方法就是等个几秒钟才行。并且这个时间还是难以预测的，往往首次加载还会失败，希望能告知一个稳定的方法，谢谢！

  let that = this

    setTimeout(() => {

      that.map = that.$children[0].map

      let map = that.map

      addData('/static/xx.json', 'xx')

      function addData(source, sourcename) {

        //加载source数据源

        map.addSource(sourcename, {

          "type": "geojson",

          "data": source

        });

        map.addLayer({

          name: '1',

          id: 'measure-points',

          'type': 'fill',

          source: sourcename,

          'paint': {

            'fill-color': '#0080ff', // blue color fill

            'fill-opacity': 0.2

          }

        })

        //外边框

        map.addLayer({

          'id': 'outline',

          'type': 'line',

          'source': sourcename,

          'layout': {},

          'paint': {

            'line-color': '#000',

            'line-width': 0.5

          }

        });

      }

    }, 3000);