Skip to content

Latest commit

 

History

History
419 lines (330 loc) · 7.39 KB

README.md

File metadata and controls

419 lines (330 loc) · 7.39 KB

logo

vue-minemap

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" />

待完成工作

  • 写单元测试
  • marker组件
  • 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