使用vue3 composition-api 实现mineData地图图层隐藏与展示

        最近在学习公司的一个地图平台，正好结合vue3 composition-api将一些基础效果实现。

        写过vue2的人都知道，在一个vue文件中可能有许多功能点，比如一个列表页有搜索功能、分页功能、导出功能等等。在一些人员充足的团队中，各个功能点可能有不同的人来负责开发，vue2中，只能等待一个人将一个功能点完成后另一个人才能继续开发另一个功能点，否则就会冲突（当然愿意花时间去解决冲突也可以同时开发）；而使用vue3 composition-api，就可以将各个功能点拆分成单独的文件，相关人员独立开发，互不影响，只需要在开发完成后在主页面中调用即可。

网上有很多拿mixin来说明composition-api好处的例子，但个人感觉那并不是主要的作用，实际项目中很少有在各个vue文件中使用大量mixin的做法，毕竟耦合度太高，容易出问题。composition-api官网中的介绍中拿了vue2在大型应用中的不利之处，并提出composition-api就是为了解决这种不利(具体有啥不利之处可参照官网)，其实通俗点将就是vue2只能把所有功能的data、methods、watch等等写到vue文件的指定位置，这种写法会导致一个复杂的vue文件尤为混乱；而composition-api就显得更为灵活，可以将各个功能点的代码写在同一区域，说了这么多，个人认为其实composition-api就是实现了各个功能点分离，从而利于项目的维护，提高了代码的可读性。接下来本人就使用composition-api结合mineDate的二维地图实现图层展示与隐藏。

最终效果

 

        上图中的隐藏与展示、marker点加载、地图底图的展示都是放在不同的文件中，最终在一个主页面中调用各个部分的功能代码。 

 地图底图文件:baseMap2D.vue

 

<template>
  <div class="base-map2D" :id="mapId"></div>
</template>
<script>
import { nextTick, reactive } from 'vue'
export default {
  props: {
    mapId: {
      type: [String, Number]
    }
  },
  setup (props, context) {
    /**
     * 全局参数设置
     */
    minemap.domainUrl = 'https://minedata.cn'
    minemap.dataDomainUrl = 'https://minedata.cn'
    minemap