ibs-fullstack/ruoyi-ui/src/map/BaiduHuiTu.vue

<template>
  <div>
    <div id="box"  style="height: 900px; width: 100%" ></div>
    <el-button size="small" style="display: flex" @click="onChange">查看客户</el-button>

  </div>
</template>

<script>
import axios from 'axios'
import {differenceSet} from '@baidu-map/bmap-draw'

export default {
  name: 'BaiduHuiTu',
  props:{},
  data() {
    return {
      sdk: null,
    }
  },
  mounted() {
    this.initSdk();
        // document.getElementsByClassName('base_map--Dzno3')[0].style.display = 'none';
        // 一定要卸载
        //sdk.destroy();
     
  },
  beforeUnmount(){
    if(this.sdk){
        console.log("bye");
        this.sdk.destroy();
    }
  },
  methods: {
    initSdk(){
      this.sdk = new QuHuaSdk({
        ak: 'L7KaAZUYPVSD40nYT09rWWgIdZKUesiX',
        webAk: 'mokVj0S4sGE9av6NBwy8WHY0xnQsucbE',
        domId: 'box',
        defaultCenterCity: "杭州市", // 非必填
        _baseUrl: "http://158.234.96.76:5001/logisticsWeb-quhua-intranet", // 固定格式，必填
        baseMapId: 'f6ac3fadbe3542adbccc85489935f67d',
        defaultLayerId: '278920cad44e43faafd22da7a656f74a',
        // readOnly:true,
        functionField: {
            peripheral_search: false,
            draw_line: false,
            draw_point: false,
            editlayers_add_aoi: true,
            editlayers_add_administrative: false,
            editlayers_add_attribute: false,
            editlayers_mass_upload: false,
            editlayers_back_home: true,
            baseLog: false,
            administrative: false,
            textToLine: false,
            roadPlanSave: false,
            textToLineLog: false,
            storeroadLog: false,
        },
        eventCallBack: (...arg) => {
            console.log("===", arg)
        },
        whiteList: [
            {
              // 图层内列表
              url: '/logistics_region/v1/region/list',
              method: 'GET'
            },
            {
              // 图形属性
              url: '/logistics_region/v1/region/attributes',
              method: 'GET'
            },
            {
              // 图形属性
              url: '/logistics_region/v1/region/attributes',
              method: 'GET'
            },
            {
              // 创建图形
              url: '/logistics_region/v1/region',
              method: 'POST'
            },
            {
              // 修改图形名称
              url: '/logistics_region/v1/region/name',
              method: 'POST'
            },
            {
              // 修改图形区域
              url: '/logistics_region/v1/region/shape',
              method: 'POST'
            },
            {
              // 批量修改图形区域
              url: '/logistics_region/v1/region/shape/batch',
              method: 'POST'
            },
            {
              // 删除图形
              url: '/logistics_region/v1/region',
              method: 'DELETE'
            },
            {
              // 图形切分
              url: '/logistics_region/v1/region/split',
              method: 'POST'
            },
            {
              // 图形合并
              url: '/logistics_region/v1/region/merge',
              method: 'POST'
            },
            {
              // 图形打散
              url: '/logistics_region/v1/region/scatter',
              method: 'POST'
            },
            {
              // 图形打散
              url: '/logistics_region/v1/region/scatter',
              method: 'POST'
            },
        ],
        whiteListProxy: async(value) => {
            console.log(value)
            const response = await axios({
                ...value.newOptions,
                url: value.url
            });
            console.log(response)
            return response;
        }
      });
    },
    onChange(){
      this.sdk = new QuHuaSdk({
        ak: 'L7KaAZUYPVSD40nYT09rWWgIdZKUesiX',
        webAk: 'mokVj0S4sGE9av6NBwy8WHY0xnQsucbE',
        domId: 'box',
        defaultCenterCity: "杭州市", // 非必填
        _baseUrl: "http://158.234.96.76:5001/logisticsWeb-quhua-intranet", // 固定格式，必填
        baseMapId: 'f6ac3fadbe3542adbccc85489935f67d',
        defaultLayerId: '311c8f144c394adca72b49cc95d3fc95',
        // readOnly:true,
        functionField: {
            peripheral_search: false,
            draw_line: false,
            draw_point: false,
            editlayers_add_aoi: true,
            editlayers_add_administrative: false,
            editlayers_add_attribute: false,
            editlayers_mass_upload: false,
            editlayers_back_home: true,
            baseLog: false,
            administrative: false,
            textToLine: false,
            roadPlanSave: false,
            textToLineLog: false,
            storeroadLog: false,
        },
        eventCallBack: (...arg) => {
            console.log("===", arg)
        },
        whiteList: [
            {
              // 图层内列表
              url: '/logistics_region/v1/region/list',
              method: 'GET'
            },
            {
              // 图形属性
              url: '/logistics_region/v1/region/attributes',
              method: 'GET'
            },
            {
              // 图形属性
              url: '/logistics_region/v1/region/attributes',
              method: 'GET'
            },
            {
              // 创建图形
              url: '/logistics_region/v1/region',
              method: 'POST'
            },
            {
              // 修改图形名称
              url: '/logistics_region/v1/region/name',
              method: 'POST'
            },
            {
              // 修改图形区域
              url: '/logistics_region/v1/region/shape',
              method: 'POST'
            },
            {
              // 批量修改图形区域
              url: '/logistics_region/v1/region/shape/batch',
              method: 'POST'
            },
            {
              // 删除图形
              url: '/logistics_region/v1/region',
              method: 'DELETE'
            },
            {
              // 图形切分
              url: '/logistics_region/v1/region/split',
              method: 'POST'
            },
            {
              // 图形合并
              url: '/logistics_region/v1/region/merge',
              method: 'POST'
            },
            {
              // 图形打散
              url: '/logistics_region/v1/region/scatter',
              method: 'POST'
            },
            {
              // 图形打散
              url: '/logistics_region/v1/region/scatter',
              method: 'POST'
            },
        ],
        whiteListProxy: async(value) => {
            console.log(value)
            const response = await axios({
                ...value.newOptions,
                url: value.url
            });
            console.log(response)
            return response;
        }
      });
      
    }
  }
  

}
</script>