# # 地图文档

> 目前该组件只支持作为的子组件使用，暂时不支持脱离于独立使用。

    <mapgis-web-map @load="handleMapLoad">
      <mapgis-igs-doc-layer v-bind="igsdoc" />
      <mapgis-igs-tile-layer v-bind="igstile" />
      <mapgis-document />
    </mapgis-web-map>

## # 属性

All common layers props

### # `wrapperStyle`

- 类型: `String`
- 非侦听属性
- 描述: 外部传入样式，用来自定义样式
- 默认值

      {
        "position": "absolute",
        "background": "#ffffff",
        "top": "20px",
        "left": "20px",
        "zIndex": 10,
        "borderRadius": "6px"
      }

## # Provide

### # `document`

> 方法

1. `setLayers` 设置或者更新当前图层的信息，特别注意，此处的 layers 不是mapboxgl-style
   (opens new window)中的图层而是图层组件的数据，用来获取对应的图层组件信息
2. `getLayerComInfo` 模糊查找获取图层组件的组件 name 以及对应的图标等组件信息，此处返回的的 webclient-vue-mapboxgl 的封装组件信息
3. `getLayerMapType` 获取图层组件实际对应的 mapbox 的图层类型，此处返回的是 mapboxgl 的原生类型 MapboxGL 图层信息
   (opens new window)
4. `getLayerMapInfo` 根据 LayerId 获取实际 mapbox 渲染图层的信息，此处返回的是 mapboxgl 的原生对象 MapboxGL 图层信息
   (opens new window)

> 使用场景 提供给槽或者子组件的地图文档，主要是用来获取当前地图的地图状态

1. 提供给右键菜单获取对应的地图文档信息

       // 右键菜单按钮
       <template>
            <contextmenu-item :autoHide="false">
                <mapgis-ui-iconfont type="mapgis-bilichi" />级别控制
                <mapgis-ui-slider range v-model="zoom" :min="minzoom" :max="maxzoom" />
            </contextmenu-item>
       </template>
       <script>
       {
        methods: {
            resetLayerInfo(layerId) {
                let { document } = this;
                const layer = document.getLayerMapInfo(layerId);
                let { minzoom, maxzoom } = layer;
                minzoom = minzoom || 0;
                maxzoom = maxzoom || 24;
                this.zoom = [minzoom, maxzoom];
            }
        }
       </script>

2. 提供给子组件获取对应的地图文档信息，和上面类似，此处的 layers 是图层组件的数组而不是 mapboxgl-style 返回的 layers,需要特别注意

## # 自定义/封装 Document

默认提供的地图文档一般都无法满足对应的业务需求，

1. 定义自定义的地图文档

       <template>
         <div>
           <mapgis-document />
         </div>
       </template>

       <script>
       export default {
         name: "custom-mapgis-document"
       };
       </script>

       <style></style>

2. 使用封装的地图文档组件

       <template>
         <div class="hello">
           <mapgis-web-map @load="handleMapLoad">
             <mapgis-arcgis-tile-layer v-bind="arcgistile" />
             <mapgis-arcgis-map-layer v-bind="arcgismap" />

             <mapgis-igs-doc-layer v-bind="igsdoc" />
             <mapgis-igs-tile-layer v-bind="igstile" />

             <mapgis-ogc-wmts-layer v-bind="ogcwmts" />
             <mapgis-ogc-wms-layer v-bind="ogcwms" />
             <!-- <mapgis-document /> -->
             <custom-document />
           </mapgis-web-map>
         </div>
       </template>

       <script>
       export default {
         name: "custom-mapgis-2d-wrapper"
       };
       </script>