首页 / 浏览问题 / WebGIS / 问题详情
Vue-iClient-MapboxGL中该如何获取map实例
2EXP 2021年12月10日

使用产品:Vue-iClient-MapboxGL 操作系统:win10 x64
数据类型: 文件型

我使用了官方提供的Vue组件库,用起来确实很方便。但是我没找到获取到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);

1个回答

您好,vue这个是封装好的组件,不能获取到map实例,您可以打印看看window.supermap,或者window.mapboxgl有没有您想要的
1,010EXP 2021年12月10日
谢谢你的回复,window.supermap和window.mapboxgl我都看过了,貌似是没法直接获取的,当我在控制台打印window.map时出现的是<div id="map" class="sm-component-web-map mapboxgl-map" >   这个dom元素。如果不能获取到map实例,那就几乎没有办法再在组件库的基础上进行二次开发了,这样真的很不方便开发者,希望能够考虑暴露这个map实例,我在源代码中也看到了map = new mapboxgl.Map相关的代码,因此完全是可以暴露的。
...