# vue-maptalks

**Repository Path**: Devil666/vue-maptalks

## Basic Information

- **Project Name**: vue-maptalks
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: maptalk-v1.0.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-05
- **Last Updated**: 2023-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Ctfo-vue-maptalks
Vue2 maptalks 千方内部实现版本,sdk 使用公司地图服务提供的 maptalks 在线sdk,如果需要使用npm包引入maptalksjs,请参考[vue2-maptalks](https://github.com/sxyhappy/vue2-maptalks)

## 开发
```bash
npm run dev
```

## build
```bash
npm run build
```

## 安装
```bash
npm i http://172.20.72.121:3000/shixiaoyu/ctfo-vue-maptalks.git#v0.0.22 -S
```

## 使用
### 引入 maptalks sdk

#### 手动引入script
在页面中必须引入的script
```html
<script src="http://<geo server>/maptalks.min.js"></script>
<script src="http://<geo server>/mapbox-gl.js.js"></script>
<script src="http://<geo server>/mtkext.min.js"></script>
<link href="http://<geo server>/maptalks.css" rel="stylesheet" />
<link href="http://<geo server>/mapbox-gl.css" rel="stylesheet" />
```
可选 script
```html
<!-- heatmap script -->
<script src="http://<geo server>/maptalks.heatmap.min.js"></script>
```

#### 自动引入script(推荐)
使用 [vue-cli-plugin-maptalks](http://172.20.72.121:3000/shixiaoyu/vue-cli-plugin-maptalks) 插件自动引入 script
```bash
npm install http:/172.20.72.121:3000/shixiaoyu/vue-cli-plugin-maptalks.git -D
# use yarn
yarn add http://172.20.72.121:3000/shixiaoyu/vue-cli-plugin-maptalks.git -D
```

### 包引入
```js
import Vue from 'vue';
import { CtfoVueMaptalks } from 'ctfo-vue-maptalks';

Vue.use(CtfoVueMaptalks)
```

### 使用
```html
<div>
  <c-button class="m-b-8" @click="current = current === 'tile' ? 'mapbox' : 'tile'">图层切换</c-button>
  <div class="map">
    <c-map :options="mapOptions">
      <c-tile-layer :visible="current === 'tile'" id="tile" url-template="https://api.mapabc.com/v3/tile?x={x}&y={y}&z={z}"></c-tile-layer>
      <c-mapbox-layer :visible="current === 'mapbox'" id="mapbox" :gl-options="glOptions"></c-mapbox-layer>
    </c-map>
  </div>
</div>

<script>
export default {
  name: 'MapDemo',
  data() {
    return {
      mapOptions: {
        zoom: 12,
        center: [115.76, 40.50],
      },
      glOptions : {
        style: 'http://172.20.72.36:8889/server/cbd'
      },
      current: 'tile'
    }
  }
}
</script>
```

## 更新记录
[CHANGELOG](./CHANGE.md)