nov17-ol

Vue2 OpenLayers 地图组件库

安装

npm install nov17-ol

使用

全局注册

import Vue from 'vue'
import Nov17Ol from 'nov17-ol'

Vue.use(Nov17Ol)

按需引入

import { OlMap } from 'nov17-ol'

export default {
  components: {
    OlMap
  }
}

在模板中使用

<template>
  <div>
    <ol-map 
      :center="[116.3974, 39.9093]"
      :zoom="10"
      width="100%"
      height="400px"
      @map-ready="onMapReady"
    />
  </div>
</template>

<script>
export default {
  methods: {
    onMapReady(mapData) {
      console.log('地图加载完成', mapData)
    }
  }
}
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | width | 地图容器宽度 | String | '100%' | | height | 地图容器高度 | String | '400px' | | center | 初始中心点坐标 [经度, 纬度] | Array | [116.3974, 39.9093] | | zoom | 初始缩放级别 | Number | 10 | | minZoom | 最小缩放级别 | Number | 1 | | maxZoom | 最大缩放级别 | Number | 18 | | controls | 是否显示控件 | Boolean | true | | zoomControl | 是否显示缩放控件 | Boolean | true | | scaleLine | 是否显示比例尺 | Boolean | true |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | map-ready | 地图加载完成 | { center, zoom, map } |

Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | setCenter | 设置地图中心点 | center: Array | | setZoom | 设置缩放级别 | zoom: Number | | getMap | 获取地图实例 | - |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

许可证

MIT