mapbox-gl 控制缩放层级

1,410 阅读1分钟

1.经度纬度

lng:是Longtitude的简写,表示经度,0-180
lat:是Latitude的简写,表示纬度,0-90

2.map对象

container: 将地图呈现的html元素id,指定元素不能有子元素。参数:htmlElement|string

minZoom: 地图最小缩小级别(0-24)。参数number。

maxZoom: 地图最大放打级别(0-24)。参数number。

style: mapbox的地图样式。参数string

3.代码展示

this.map = new mapboxgl.Map({
     container: mapDom,
     style: {
       version: 8,
       sources: {
         'raster-tiles': {
          type: 'raster',
          tiles: ['http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'],
          tileSize: 256,
          },
       },
       layers: [
         {
           id: 'simple-tiles',
           type: 'raster',
           source: 'raster-tiles',
           minzoom: 0,
           maxZoom: 17,
         },
       ],
       glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
      },
      center: [121.487899486, 31.24916171], // 地图中心点
      minZoom: 2.5,  //地图缩放最小层级
      zoom: 11, // starting zoom
      maxZoom: 17,  //地图放大最大层级
    }).on('load', () => {
        this.$emit('load', this.map);

        this.map.on('click', 'recommendLayer', this.handleRecommendLayerClick);

        this.map.on('mouseenter', 'report', this.handleReportLayerHover);
        this.map.on('mouseleave', 'report', () => {
          setTimeout(() => {
            if (this.reportPop && !this.mouseOnPop) {
              this.reportPop.remove();
            }
          }, 100);
        });

        this.map.on('click', 'report', (e) => {
          const routeData = this.$router.resolve({ path: `/report?id=${e.features[0].properties.id}` });

          window.open(routeData.href, '_blank');
        });
      });

其他对象内容查看链接:www.jianshu.com/p/98b105e19…