vue3+ts中使用 leaflet 和 underscore 具体使用方式

在Vue 3 + TypeScript项目中，结合Leaflet地图库和Underscore.js库，你可以按照以下步骤进行整合：

1. **安装依赖**:
- 首先，你需要通过npm或yarn安装这两个库：

     npm install @vue/leaflet --save
     npm install underscore --save

2. **引入并配置**: 在`main.ts`或`setup.ts`中引入它们，并在Vue实例创建时将Underscore作为插件添加：

   import { createApp } from 'vue'
   import VueLeaflet from '@vue/leaflet'
   import _ from 'underscore'

   // 如果需要提供全局访问，可以这样做
   import * as Underscore from 'underscore';
   Vue.prototype.$_ = Underscore;

   const app = createApp(App)
   app.use(VueLeaflet)

3. **在组件中使用**:
- 在Vue组件中，你可以直接使用`import { L } from 'vue-leaflet'`导入Leaflet，它是Leaflet的一个轻量级包装。

- 对于Underscore，假设你有一个地标的列表需要操作，你可以这样处理：

     export default {
       data() {
         return {
           markers: [] as L.Marker[]
         }
       },
       methods: {
         addMarker(lat: number, lng: number) {
           let marker = L.marker([lat, lng]).addTo(this.$refs.map);
           this.markers.push(this.$_);
            // 使用Underscore对markers数组进行操作，如过滤、排序等
            // _.filter(this.markers, ...), _.sortBy(this.markers, ...)
         }
       }
     }

4. **注意类型安全**:
TypeScript会为你提供的函数和数据类型提供检查。例如，在使用Underscore时，确保传入的是预期的数据结构类型。