open-index/open-npm huggingface dataset:
npm package: @mapgis/webclient-vue-mapboxgl
Description: 中地数码webclient-vue-mapboxgl
Author: Wuhan Zondy Cyber Science&Technology Co.Ltd.
Latest version: 17.8.0

# Webclient-Vue-MapboxGL

---

## 简介

webclient-vue-mapboxgl是基于MapboxGL实现的vue组件开发库，提供构建Web二维GIS应用的常用vue组件。

[comment]: <> (### 核心框架)

[comment]: <> (![核心框架]&#40;./docs/images/framework/webclient-vue-mapboxgl.png&#41;)

### 模块说明

![模块说明](./docs/guide/webclient-vue-mapbox.png)

### 特点

+ 组件式风格

通过 Vue 的组件方式调用 layers, markers, popups， 并且使用同步`synchronized props`来控制状态

+ Vue 控制

`面向对象编程`：地图元素拥有 Vue 的生命周期，将原生地图事件封装成 Vue 的事件

+ 同步的 Promise Actions

原先异步的地图操作变成`同步操作`，并且采取`Promise`的方式进行开发避免大量的地图事件回调导致代码逻辑混乱，能够清晰的知道是什么行为导致地图的变化。

## 编译
> 由于vue-cli针对core-js2和core-js3的支持不同，导致了目前只能处理对应core-js2的版本，需要安装环境的时候先**屏蔽**dependencies所有依赖后，先安装devDependencies将环境设置为core-js2,再**放开**dependencies依赖

---

## 安装

```bash
npm install --save @mapgis/webclient-vue-mapboxgl
# 或者
yarn add @mapgis/webclient-vue-mapboxgl
```

在 main.js 中全局引入组件和样式文件

```js
import "@mapgis/webclient-vue-ui/dist-libs/webclient-vue-ui.css";
import "@mapgis/webclient-vue-mapboxgl/dist-libs/webclient-vue-mapboxgl.css";

import MapgisUi from "@mapgis/webclient-vue-ui";
import Mapgis2d from "@mapgis/webclient-vue-mapboxgl";

Vue.use(MapgisUi);
Vue.use(Mapgis2d);
```

---

## 相关链接

+ [基本示例](http://develop.smaryun.com:8899/#/gallery/vue-mapboxgl)
+ [参考文档](http://120.78.82.242:8891/)
+ [项目源码](https://github.com/MapGIS/WebClient-Vue/tree/main/mapboxgl)

---

## 项目依赖

+ [Vue.js 2.5+](https://github.com/vuejs/vue)  
+ [MapGIS/Mapbox GL JS 0.54+](https://github.com/mapbox/mapbox-gl-js)  
+ [MapGIS/WebClient-MapboxGL](https://github.com/mapbox/mapbox-gl-js)
npm package: @mapgis/webclient-vue-ui
Description: 中地数码webclient-vue-ui
Author: Wuhan Zondy Cyber Science&Technology Co.Ltd.
Latest version: 17.8.0

# Webclient-Vue-Ui

[![npm version][npm-img]][npm-url]
[![apache licensed](https://img.shields.io/badge/license-Apache%202.0-orange.svg?style=flat-square)](https://github.com/MapGIS/WebClient-JavaScript/blob/master/LICENSE)
-------------
[![less version][less]][less]
[![less loader][less-loader]][less-loader]
[![sass version][sass]][sass]
[![sass loader][sass]][sass-loader]

[npm-img]: https://img.shields.io/badge/npm-10.5.5-brightgreen
[npm-url]: https://www.npmjs.com/package/@mapgis/webclient
[less]: https://img.shields.io/badge/less-^3.12.2-blue
[less-loader]: https://img.shields.io/badge/lessloader-^7.0.2-blue
[sass]: https://img.shields.io/badge/sass-^4.11.0-red
[sass-loader]: https://img.shields.io/badge/sassloader-^10.1.1-red

## 使用
```javascript
// main.js
import '@mapgis/webclient-vue-ui/dist-libs/webclient-vue-ui.css';
import mapgisui from "@mapgis/webclient-vue-ui";

Vue.use(mapgisui);
```

```vue
<template>
<mapgis-ui-layout>
  <mapgis-ui-layout-header>Header</mapgis-ui-layout-header>
  <mapgis-ui-layout-content>Content</mapgis-ui-layout-content>
  <mapgis-ui-layout-footer>Footer</mapgis-ui-layout-footer>
</mapgis-ui-layout>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  }
};
</script>
```
## 样式冲突
> 将你的工程下的样式依赖版本强行设置成下面依赖，再重新安装环境一般能够解决大部分的样式冲突问题
``` json
"less": "3.12.2",
"less-loader": "7.0.2",
"node-sass": "^4.11.0",
"sass-loader": "10.1.1",
```


## 目的
> 用于开发 Vue 版本的 MapGIS-UI 组件

## 组件增强说明

1、Select、Input 组件添加属性：`autoWidth`，设置为 true 时可实现宽度 100% 自适应。

2、Card 组件已添加属性：`customPosition`，可控制卡片显示的绝对位置：

```javascript
customPosition: {
  type: String,
  default: '',
  validator: v =>
    [
      'top-right',
      'top-left',
      'bottom-right',
      'bottom-left'
    ].includes(v)
},
```
3、基于List组件增加无限加载列表组件：`mapgis-ui-infinite-list`，详情可查看StoryBook。