# 地图文档

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

<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>