- 指南

  - 安装
  - 快速上手
  - 模块说明
  - 注意事项
  - 结构
  - 控制视图
  - 注记视图
  - 绘制视图
  - 图层与数据源
  - 子图层控制
  - 制图综合

- 样式模板

  - 样式模板
  - 通用模板
  - 国土模板
  - 军标模板

- 组件

  - 地图

  - 地图对象

  - 地图子组件

  - 控制组件
  - 标注
  - 气泡
  - MVT比例尺
  - MVT图例
  - 打印
  - 绘制
  - 编辑
  - 测量
  - 图例
  - 鹰眼
  - 卷帘
  - 缩放
  - 状态栏
  - 表格

  - 图层

  - GeoJSON图层
  - 动态注记图层
  - 矢量图层
  - 栅格图层/通用瓦片
  - 图像图层
  - 视频图层
  - 画布图层
  - Igs地图文档
  - Igs瓦片服务
  - Igs矢量图层
  - OGC-WMTS
  - OGC-WMS
  - ArcGIS地图
  - ArcGIS瓦片
  - 自定义栅格瓦片
  - MVT样式图层
  - 行业标绘图层
  - 行业标绘绘制组件
  - 态势推演组件
  - 行业标绘二三维联动

  - 可视化

  - Echarts
  - MapV
  - 聚类
  - 热力
  - 建筑白膜
  - 轨迹跟踪
  - 弹性搜索

- 插件组件

  - 使用插件组件
  - 创建插件组件

# 中地数码

@mapgis/webclient-vue-mapboxgl

Get Started →

## Declarative style

You can use map elements like layers, markers, popups as Vue components and control them via synchronized props

## Vuefied

Map elements declared as components respect Vue lifecycle, emit map events like Vue events and can be used in OOP-style

## Promisified async actions

You can do async map operations and get results in Promise without messing with map events and figuring out what action cause it

If you like long story, check out blog post
(opens new window)

    // main.js
    import Mapgis2d from "@mapgis/webclient-vue-mapboxgl";
    Vue.use(Mapgis2d);

    <template>
      <mapgis-web-map
        container="map-test"
        :center.sync="center"
        :accessToken="accessToken"
        :mapStyle="mapStyle"
      >
        <mapgis-marker :coordinates.sync="markerCoordinates" color="green" />
        <mapgis-geojson-layer
          type="fill"
          :sourceId="sourceId"
          :layerId="layerId"
          :source="geojson"
          @click="handleClick"
        />
      </mapgis-web-map>
    </template>

    <script>
    export default {
      name: 'App',
      data() {
        return {
          accessToken: 'some_token',
          mapStyle: 'mapbox://map_style',
          geojson: { /* … some geojson */}
          layerId: 'firstLayer',
          sourceId: 'firstSource',
          markerCoordinates='[50, 50]'
        }
      }
    }
    </script>

Dependencies

Vue.js 2.5+
(opens new window)
Mapbox GL JS 1.9.2+
(opens new window)
map-promisified
(opens new window)

Size

~ 15 kB minified and gzipped

Browser compatibility

Coming soon

© 2020 云生态圈, all rights reserved.<a href="http://www.beian.miit.gov.cn/" target="_blank">ICP证：鄂B2-20190047</a><a><img src="http://oss-smaryun-new.oss-cn-beijing.aliyuncs.com/images/police_icon.png" style="height:18px;">鄂公网安备 42018502000503号</a><a href="http://wljg.scjgj.wuhan.gov.cn:80/whwjww/indexquery/indexqueryAction!dizviewjk.dhtml?webId=2ec48b653aa55ca194b9df62cc4e45fe" target="_blank"><img src="http://oss-smaryun-new.oss-cn-beijing.aliyuncs.com/images/govIcon.gif" style="height:20px;" title="武汉网监电子标识">工商电子标识</a>