[vue-mapvgl] installation

vue-mapvgl is some layer library, which is attached to vue-bmap-gl, and vue-bmap-gl needs to be installed at the same time.

need

technical point

Official website address: component | vue-mapvgl

gitee address: vue-mapvgl: vue2 and vue3 of Baidu map mapvgl component

Install

npm install vue-bmap-gl --save

npm install vue-mapvgl --save

accomplish

<template>
  <div class="bmap-wrapper">
    <el-bmap vid="bmapDemo" :zoom="zoom" :center="center" class="bmap-demo">
      <el-bmapv-view :lazy="300">
          <el-bmapv-point-layer :lazy="2000" :zoom-threshold="[12,15]" :color="color" :shape="shape" :blend="blend" :size="size" :data="data" :enable-picked="true" :auto-select="true" :on-click="(e)=>{clickMarker(e)}"></el-bmapv-point-layer>
      </el-bmapv-view>
    </el-bmap>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      count: 1,
      zoom: 14,
      center: [121.5273285, 31.21515044],
      color: '#f00',
      shape: 'circle', // 默认为圆形 circle ，可传 square 改为正方形
      blend: 'lighter',
      size: 60,
      data: [
        {
          geometry: {
            type: 'POINT',
            coordinates: [121.5273285, 31.21515044]
          },
          properties: {
            id: '1'
          }
        },
        {
          geometry: {
            type: 'POINT',
            coordinates: [121.5483395, 31.21515154]
          }
        }
      ]
    }
  },
  methods: {
    clickMarker(e){
        console.log(e);
    }
  }
}
</script>
 
<style>
.bmap-wrapper {
  width: 500px;
  height: 500px;
}
</style>