将文件中lineGroupClearAndInit方法及之后的代码部分用vue3实现

要将文件中的 `lineGroupClearAndInit` 方法及其后的代码部分用 Vue 3 实现，可以按照以下步骤进行改造：

### 1. 使用 Composition API 替换 Options API
Vue 3 提供了 Composition API，这是一种更灵活的方式来组织逻辑。以下是使用 Composition API 重构的部分代码示例：

### 2. 依赖导入
首先，确保引入所需的 Vue 3 相关包和其他必要的库：

import { ref, computed, onMounted, reactive, toRefs, watch } from 'vue';
import { useStore } from 'vuex';
import L from 'leaflet';
import axios from 'axios';
import { gcoordTransform } from '@/utils/gcoordTransform';

### 3. 定义响应式数据和方法
使用 `reactive` 和 `ref` 来定义响应式数据和方法：

export default {
  setup() {
    const store = useStore();
    const leafletMap = ref(null);
    const linesGroup = ref([]);
    const linesDirectionGroup = ref([]);
    const lineList = ref([]);

    const currentPipelinetId = ref('');
    const currentDeviceId = ref('');

    // 其他状态变量...
    
    const getCurrentDevice = async (posLen, parentId, childrenId) => {
      // 获取当前设备信息的方法实现
      let currentDevice = {};
      if (posLen === 2) {
        currentDevice = deviceTreeData.value.filter(item => item.id === childrenId)[0];
      }
      if (posLen === 3) {
        const parentDeviceArr = deviceTreeData.value.filter(item => item.id === parentId);
        const parentDevice = parentDeviceArr[0]?.children || [];
        currentDevice = parentDevice.filter(item => item.id === childrenId)[0];
      }
      currentDeviceId.value = currentDevice?.id;
    };

    const getCurrentPipeline = async (posLen, parentId, childrenId) => {
      // 获取当前管线信息的方法实现
      let currentPipeline = {};
      const tree = pipelineTreeData.value[0]?.children || [];
      if (posLen === 3) {
        currentPipeline = tree.filter(item => item.id === childrenId)[0];
      }
      if (posLen === 4) {
        const parentDeviceArr = tree.filter(item => item.id === parentId);
        const parentDevice = parentDeviceArr[0]?.children || [];
        currentPipeline = parentDevice.filter(item => item.id === childrenId)[0];
      }
      currentPipelinetId.value = currentPipeline?.id;
    };

    const clearPipeline = () => {
      currentPipelinetId.value = '';
      // 清除管线信息的其他操作
    };

    const clearDevice = () => {
      currentDeviceId.value = '';
      // 清除设备信息的其他操作
    };

    const clearLayer = () => {
      if (showPolylines.value.length) {
        showPolylines.value = [];
        leafletMap.value.removeLayer(showGroupPolyline.value);
        drawGroupPolyline.value.clearLayers();
      }
      if (showPolygons.value.length) {
        showPolygons.value = [];
        leafletMap.value.removeLayer(showGroupPolygon.value);
        drawGroupPolygon.value.clearLayers();
      }
    };

    const lineGroupClearAndInit = () => {
      // 移除 linesGroup 中的所有层
      linesGroup.value.forEach(layer => {
        leafletMap.value.removeLayer(layer);
      });

      // 清空 linesGroup 数组
      linesGroup.value = [];

      // 移除 linesDirectionGroup 中的所有层
      linesDirectionGroup.value.forEach(layer => {
        leafletMap.value.removeLayer(layer);
      });

      // 遍历 lineList 数组，并重置 'operation' 属性和更新 'weight'
      lineList.value.forEach(item => {
        if (item.operation === 'edit') {
          item.operation = '';
          item.weight = 2;
        }
      });

      // 修改数据
      if (currentPipelinetId.value) {
        // 点击的管段
        if (pipelinePosLen.value === 4) {
          const index = pipelineIdList.value.indexOf(currentPipelinetId.value);
          if (index !== -1) {
            lineList.value[index].operation = 'edit';
            lineList.value[index].weight = 6;
          } else {
            allLineList.value.forEach(item => {
              if (item.id === currentPipelinetId.value) {
                item.operation = 'add';
                lineList.value.push(item);
              }
            });
          }
        }

        // 点击的管线
        if (pipelinePosLen.value === 3) {
          lineList.value.forEach(item => {
            if (item.superiorPipelineId === currentPipelinetId.value) {
              item.operation = 'edit';
              item.weight = 6;
            }
          });
        }
      }
    };

    // 初始化地图和其他组件
    const initMap = async () => {
      leafletMap.value = new L.Map('mapid', {
        zoom: 14,
        center: store.getters.gisMapCenter,
        boxZoom: true,
        zoomControl: false,
        doubleClickZoom: false,
        attributionControl: false,
        preferCanvas: true
      });

      const tileLayer = L.tileLayer(
        '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        {
          maxZoom: 20,
          maxNativeZoom: 18,
          minZoom: 3,
          attribution: "高德地图 AutoNavi.com",
          subdomains: "1234"
        }
      ).addTo(leafletMap.value);

      const zoomControl = L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小',
        position: 'bottomright'
      }).addTo(leafletMap.value);
    };

    // 生命周期钩子
    onMounted(async () => {
      await initMap();
      // 其他初始化操作
    });

    // 监听
    watch(() => addrInput.value, (val) => {
      if (!val) {
        leafletMap.value.removeLayer(addrMarkerGroup.value);
      }
    });

    // 返回模板需要的数据和方法
    return {
      ...toRefs(state),
      leafletMap,
      getCurrentDevice,
      getCurrentPipeline,
      clearPipeline,
      clearDevice,
      clearLayer,
      lineGroupClearAndInit
    };
  }
};

### 4. 解释
- **Composition API**: 使用 `setup` 函数来替换 Vue 2 中的 `methods`, `data`, `computed` 等选项。
- **Ref and Reactive**: 使用 `ref` 和 `reactive` 来管理响应式数据。
- **Watchers**: 使用 `watch` 来监听响应式数据的变化。
- **生命周期钩子**: 使用 `onMounted` 等新的生命周期钩子来替代 Vue 2 中的 `mounted`。

通过这种方式，您可以更好地组织代码逻辑，并且利用 Vue 3 的新特性提高开发效率和代码可维护性。