【vue-mapvgl】安装

vue-mapvgl是一些图层库，是依附于vue-bmap-gl的，需要同时安装vue-bmap-gl。

需求

技术点

官网地址：组件 | vue-mapvgl

gitee地址：vue-mapvgl: 百度地图mapvgl组件的vue2和vue3

安装

npm install vue-bmap-gl --save

npm install vue-mapvgl --save

实现

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