Vue-iClient-MapboxGL教程之地图组件应用

作者：LX

背景

在上一篇文章《快速上手iClient组件之Vue-iClient-MapboxGL》我们了解了Vue-iClient-MapboxGL如何安装使用。为了让大家进一步熟悉和了解Vue-iClient-MapboxGL的具体功能，让大家能够在项目中轻松运用，本文将继续给大家介绍Vue-iClient-MapboxGL里面地图以及地图子组件的使用方法和技巧。

概念

地图组件即Web Map 地图组件
组件写法：<sm-web-map></sm-web-map>
支持对接的地图类型： iServer/iPortal/Online 地图以及支持ZXY规范的地图。
支持地图坐标系：‘EPSG:3857’，‘EPSG:4326’，‘EPSG:4490’，‘EPSG:4214’，‘EPSG:4610’。

实际应用

加载 iServer 地图
参数说明：

地图的参数通过map-options传给组件，可设参数参考MapboxGL文档里面map对象的 属性：ttps://docs.mapbox.com/mapbox-gl-js/api/#map
代码：

<sm-web-map :map-options="mapOptions"></sm-web-map>
<script>
export default {
  data() {
      return {
       // mapOptions是sm-web-map组件的props
          mapOptions: {
              container: 'map', // container id
              style: {
                "version": 8,
                "sources": {
                  "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles":['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China'
                    ],
                    "tileSize": 256,
                    rasterSource: 'iserver'
                  }
                },
                "layers": [{
                  "id": "simple-tiles",
                  "type": "raster",
                  "source": "raster-tiles",
                  "minzoom": 0,
                  "maxzoom": 22
                }]
              },
              center: [120.143, 30.236], // starting position
              zoom: 3 // starting zoom
            }
      };
  }
}
</script>

加载天地图
加载天地图的方法和iServer组件类似，也是给组件传map-options参数，地图的对接参数也是和Mapbox对接地图参数设置一样。
代码：

<sm-web-map :map-options="mapOptions"></sm-web-map>
<script>
export default {
  data() {
      return {
             // mapOptions是sm-web-map组件的props
              mapOptions: {
              center: [126.64318, 45.74141],
              zoom: 11,
              style: {
                version: 8,
                sources: {
                  baseLayer: {
                    type: 'raster',
                    tiles: [
                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
                    ],
                    tileSize: 256
                  }
                },
                layers: [
                  {
                    id: 'baseLayer',
                    type: 'raster',
                    source: 'baseLayer',
                    minzoom: 0,
                    maxzoom: 18
                  }
                ]
              },
              renderWorldCopies: false
            }
      };
}
}
</script>

加载 iPortal 地图
参数说明：

代码：

<sm-web-map server-url="https://iportal.supermap.io/iportal/" map-id="801571284"></sm-web-map>