mbvue

灵感

mbvue 是一套为 Vue 应用使用的 MapboxGL 风格的 地图 组件库。❤

灵感来自于 Github 上的 arturbien/React95 项目。

npm 安装

npm install mbvue

npm install less less-loader -D

需要安装 less 和 less-loader

快速上手

将介绍如何使用 mbvue

引入 mbvue

你可以引入整个 mbvue，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 mbvue。

完整引入

1.将node_module下的mbvue文件夹中的dist文件夹的内容拷贝到工程的public目录下 2.在index.html添加两项连接

<script src='./js/mapboxgl/include-mapboxgl.js'></script> <script src='./js/jquery.min.js'></script>

在 main.js 中写入以下内容：

import Vue from 'vue'
import ElementUI from 'element-ui';

import MBMapCom, { 
  addHugePoints,
  drawCircleSymbol,
  queryGeometry, 
  filterKeySearch, 
  clearSpatial,
  RouteTrack, InfoWindow,  
  filterKeyPOI,
  filterKey } from 'mbvue';

Vue.use(MBMapCom);
Vue.use(RouteTrack);
Vue.use(InfoWindow);

Vue.config.productionTip = false
Vue.prototype.addHugePoints = addHugePoints
Vue.prototype.drawCircleSymbol = drawCircleSymbol
Vue.prototype.queryGeometry = queryGeometry
Vue.prototype.filterKeySearch = filterKeySearch
Vue.prototype.clearSpatial = clearSpatial
Vue.prototype.filterKeyPOI = filterKeyPOI
Vue.prototype.filterKey = filterKey

new Vue({
  render: h => h(App),
}).$mount('#app')

在 App.vue 中写入以下内容：

<template>
 
    <sl-mbmap  :mapContainerID = "mapContainerID" :minZoom="minZoom" :mapStyle = 'mapStyle' :extent = 'extent' :maxZoom="maxZoom" :center="center" :zoom="zoom"   >    
    </sl-mbmap>
 
   
</template>
<script>
 
export default {
  name: "app",
  data() {
   return {
        mapContainerID:'mapContainer',
        zoom: 9,
        minZoom:0,
        maxZoom:18,
        poiID:'poi',
        extent:{
            maxX: 102.25874537880524,
            maxY: 31.455581919611046,
            minX: 110.35124415810212,
            minY: 30.91313196843917
        },
        drawType:"Point",
        mapStyle:"./json/rstyle.json",
        center:[121.434576,31.255456],
        projection: 'EPSG:4326',
        poiMap:{},
        drawActive:false,
        serverurl: "http://172.20.32.31:7001/geometry",
        tablename:"qingpufinalroad",
        query:false
    }
  },
  mounted () {
      
  },
  methods:{  
 
  } 


};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>