# 快速上手

## 使用

### 全局注册

全局注册将一次性引入Openlayer地图组件库的所有组件。

```javascript
import Vue from 'vue'
import openlayermap from 'openlayermap'

Vue.use(openlayermap)
```

```html
<template>
  <sl-map class="sl-view">
  </sl-map>
</template>

<style>
.sl-view {
  width: 100%;
  height: 300px;
}
</style>
```

### 局部注册

如果有按需引入组件的需要，可以选择局部注册openlayer地图组件，这将减少工程打包后的容量尺寸。
所有的独立组件均存放在 `vue-openlayer-map/components` 文件夹下，按需引用即可。
由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 `include` 和 `exclude` 选项命中了组件库。

```html
<template>
  <sl-map class="sl-view">
  </sl-map>
</template>

<script>
import SlMap from 'openlayermap/components/map/Map.vue'
export default {
  components: {
    SlMap
  }
}
</script>

<style>
.sl-view {
  width: 100%;
  height: 300px;
}
</style>
```

### CDN 全局注册

```html
<script>
Vue.use(slMap.default)
</script>
```

## 常见问题

- `openlayerMap` 组件容器本身是一个空的块级元素，如果容器不定义高度，openlayer地图将渲染在一个高度为 0 不可见的容器内。
- 没有设置 `center` 和 `zoom` 属性的地图组件是不进行地图渲染的。

### 错误用法

```html
<template>
  <sl-map :center="center" :zoom="zoom"></sl-map>
</template>
<script>
export default {
  data () {
    return {
      center: [0, 0],
      zoom: 3
    }
  },
  mounted () {
    this.center[0] = 116.404
    this.center[1] = 39.915
    this.zoom = 15
  }
}
</script>
```