MapBox测量组件

贴个群号

WebGIS学习交流群461555818，欢迎大家。

源码

这里用到一个插件 mapbox-measure,需要首先安装一下，npm i maobox-measure
只需要传入map实例，注意不能立即监听，因为第一次传入map实例的时候一般是空的，map还没有load好，这样立即监听就会第二次找不到map容器。

<template>
    <div class="print-tools tool-item">
      <!-- <i class="iconfont iconmeasure"  @click="showMeasureSub"></i> -->
      <div class="measure-result-sub sub" ref="measure"></div>
    </div>
  </template>
  
  <script>
  import Measure from 'mapbox-measure'
  const measure = new Measure()
  
  export default {
    name: 'Measure',
    data () {
      return {
        measure: null,
        map:null
      }
    },
    props:['mapLoad'],
    watch: {
        mapLoad:{
            handler:function(newVal){
                this.map=newVal,
                // this.initMeasure()
                setTimeout(() => {
                    if (!this.measure) {
                    this.initMeasure()
                    }
                }, 1000)
            },
            // immediate:true
        }
    },
    // computed: {
    //   map () {
    //     return this.$store.state.map.map
    //   }
    // },
    // mounted () {
    //   setTimeout(() => {
    //     if (!this.measure) {
    //       this.initMeasure()
    //     }
    //   }, 1000)
    // },
    methods: {
      initMeasure () {
        this.$refs.measure.appendChild(measure.onAdd(this.map))
        this.measure = measure
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .tool-item {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  // background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  > i {
    font-size: 20px;
  }

  .sub {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-110%);

    :deep(.mapboxgl-ctrl-group){
      display: flex;

      .mapbox-gl-draw_ctrl-draw-btn {
        border-top: none!important;
      }
    }
  }
}
  </style>