vue-minemap

v0.0.3

Published

4 years ago

minemap vue component

0High
0Medium
0Low

zhuweileo

minemap api的vue实现

特性

使用vue组件风格创建minemap图层
减少minemap api调用，专注于业务逻辑
使用简单，易上手

组件列表

MineMap
MMSource
MMLayer
MMMarker
MMPopup

文档

https://zhuweileo.github.io/vue-minemap/vuepress/#/

变更日志

https://github.com/zhuweileo/vue-minemap/releases

安装和基本使用

$ npm install --save vue-minemap

首先，引入minemap api

index.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v2.0.0/minemap.css">
    <title>vue-minemap-demo2</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="//minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

使用地图组件

<tempalte>
  <div id="app">
    <mine-map
          :accessToken= "'e919a6f32ce242f5aec22652d9dc1fdb'"
          :solution= "'7185'"
          :options= "{
            container: 'map',
            style: `http://minedata.cn/service/solu/style/id/7185`,
            center: [116.1866179, 39.992559],
            zoom: 9,
            minZoom: 3,
            maxZoom: 17,
          }"
    ></mine-map>
  </div>
</tempalte>
<script>
  import {MineMap} from 'vue-minemap'
  export default {
    name:'app',
  }
</script>
<style>
  html,body{
    height: 100%;
  }
  #app{
    height: 100%;
  }
</style>

添加source和layer

<tempalte>
  <mine-map
          :accessToken= "'xxxxxxxxxxxxxxxxxxxxxxxxx'"
          :solution= "'7185'"
          :options= "{
            container: 'map',
            style: `http://minedata.cn/service/solu/style/id/xxxx`,
            center: [116.1866179, 39.992559],
            zoom: 9,
            minZoom: 3,
            maxZoom: 17,
          }"
  >
      <MMSource :id="sourceId" :options="sourceOption">
        <MMLayer
        :id="layerOption.id"
        :type="layerOption.type"
        :paint="layerOption.paint"
        ></MMLayer>
      </MMSource>
  </mine-map>
</tempalte>
<script>
  import {MineMap,MMSource,MMLayer} from 'vue-minemap'
  export default {
    name:'app',
    data(){
      return {
        sourceId: 'test',
        sourceOption:{
           type: 'geojson',
           data: {type: 'Point', coordinates: [116.1866179, 39.992559],}
        },
        layerOption:{
           id: 'test',
           type: 'circle',
           paint: {'circle-radius': 10, 'circle-color': '#ccc'}
        }
      }
    }
  }
</script>

参数

MineMap

accessToken

Type: string
Required: true

地图token值

<mine-map :accessToken="'xxxxxxxxxxxxxxxxxx'"/>

solution

Type: string | number
Required: true
Default: true

地图solution

<mine-map :solution="'xxxx'"/>

options

Type: object
Required: true

地图初始化参数，格式和minemap api兼容通用

<mine-map :options="{
   container: 'map',
   style: `http://minedata.cn/service/solu/style/id/xxxx`,
   center: [116.1866179, 39.992559],
   zoom: 9,
   minZoom: 3,
   maxZoom: 17,
}"/>

MMSource

id

Type: string
Required: true

source的id

<m-m-source :id="'test'"/>

options

Type: object
Required: true

source的初始化参数，格式和minemap api兼容通用

<m-m-source :options="{
  type:'geojson',
  data: {}
}"/>

mapInstance

Type: minemap.Map
Required: false

minemap.Map 的实例化对象，当该组件不作为MineMap组件的子组件，而是单独使用时，需要传入

<m-m-source :mapInstance="map"/>

MMLayer

id

Type: string
Required: true

layer的id

<m-m-layer :id="'test'"/>

type

Type: string
Required: true

图层类型。 circle,line,fill,symbol,background,raster,extrusion,heatmap,hillshade中的一种。

<m-m-layer :type="'circle'"/>

sourceLayer

Type: string
Required: false
Default: ''

矢量数据时，需要传入

<m-m-layer :sourceLayer="'link'"/>

layout

Type: object
Required: false
Default: null

图层初始换参数中的 layout部分，格式和minemap api 兼容

<m-m-layer :layout="{
  visibility: 'visible'
}">

paint

Type: object
Required: false
Default: null

图层初始换参数中的paint部分，格式和minemap api 兼容

<m-m-layer :paint="{
  'circle-color': '#000'
}">

filter

Type: array
Required: false
Default: null

图层初始换参数中的filter部分，格式和minemap api 兼容

<m-m-layer :filter="['==','name','leo']">

MMMarker

lnglat

Type: array
Required: true

marker的坐标点

<m-m-marker :lnglat="[116.34,39.45]"></m-m-marker>

offset

Type: array
Required: false

marker位置偏移 offset[0]: 相对于左上角向右偏移多少像素， offset[1]: 相对于左上角向下偏移多少像素

<m-m-marker :offset="[50,0]"></m-m-marker>

参数/MMPopup

lnglat

Type: array
Required: false

popup的坐标点

<m-m-popup :lnglat="[116.34,39.45]"></m-m-popup>

offset

Type: array
Required: false

popup位置偏移 offset[0]: 相对于锚点向右偏移多少像素， offset[1]: 相对于锚点向下偏移多少像素

<m-m-popup :offset="[50,0]"></m-m-popup>

anchor

Type: string
Required: false

popup的偏移锚点可选值'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , 'bottom-right'

<m-m-popup :anchor="'top'"></m-m-popup>

closeButton

Type: boolean
Required: false
Default true

popup是否显示关闭按钮

<m-m-popup :closeButton="false"></m-m-popup>

closeOnClick

Type: boolean
Required: false
Default true

点击地图是否可以关闭popup

<m-m-popup :closeOnClick="false"></m-m-popup>

事件

MineMap

map-load

Required: false
Parameters: map实例

当地图加载完时调用

<mine-map @map-load="onLoad" />

待完成工作

[x] 写单元测试
[x] marker组件
[x] popup组件
[ ] 路径规划组件
[ ] poi搜索组件
[ ] 城市搜索组件

参与贡献

欢迎参与代码贡献


# 打包组件代码
npm run build

# 运行demo
npm run demo:dev

# 打包demo
npm run demo:build

# 运行文档
npm run docs:dev

# 打包文档
npm run docs:build

# 运行单元测试
npm run test

许可证

MIT license

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

目录

特性

组件列表

文档

变更日志

https://github.com/zhuweileo/vue-minemap/releases

安装 和 基本使用

参数

MineMap

accessToken

solution

options

MMSource

id

options

mapInstance

MMLayer

id

type

sourceLayer

layout

paint

filter

MMMarker

lnglat

offset

参数/MMPopup

lnglat

offset

anchor

closeButton

closeOnClick

事件

MineMap

map-load

待完成工作

参与贡献

许可证

安装和基本使用