csf-map

基于 Leaflet 地图引擎的 Vue 2 地图组件库，UI 层基于 Element UI。

✨ 特性

• 🗺️ Leaflet 核心：基于 Leaflet 1.9+ 地图引擎
• 🎨 Element UI：使用 Element UI 构建控制面板和交互组件
• 💡 逻辑分离：通过 LeafletAdapter 类实现地图逻辑与 Vue 生命周期解耦
• 📦 多种格式：提供 ES Module 和 CommonJS 两种打包格式
• 💪 Vue 2 专用：专为 Vue 2.x 优化设计
• 🌐 兼容性好：支持主流浏览器

📦 安装

npm install csf-map

依赖要求

确保你的项目中已安装以下依赖：

npm install vue@^2.6.14 element-ui leaflet

🔧 快速开始

基础示例

<template>
  <div id="app">
    <csf-map
      ref="map"
      :options="mapOptions"
      :tile-layer-url="tileLayerUrl"
      :show-toolbar="true"
      @map-ready="handleMapReady"
      @map-move="handleMapMove"
    />
  </div>
</template>

<script>
import { CsfMap } from 'csf-map'
import 'leaflet/dist/leaflet.css'

export default {
  components: {
    CsfMap
  },
  
  data() {
    return {
      mapOptions: {
        center: [39.9042, 116.4074],
        zoom: 12
      },
      tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    }
  },
  
  methods: {
    handleMapReady({ map, adapter }) {
      console.log('地图已就绪', map)
    },
    
    handleMapMove({ latlng, zoom }) {
      console.log('地图移动:', latlng, zoom)
    }
  }
}
</script>

全局注册

import Vue from 'vue'
import CsfMap from 'csf-map'
import 'leaflet/dist/leaflet.css'

Vue.use(CsfMap.install)

new Vue({
  render: h => h(App)
}).$mount('#app')

局部注册

import { CsfMap } from 'csf-map'
import 'leaflet/dist/leaflet.css'

export default {
  components: {
    CsfMap
  }
}

📖 API 文档

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | options | 地图初始化配置 | Object | {} | | tileLayerUrl | 底图图层 URL | String | OpenStreetMap URL | | tileLayerOptions | 底图图层配置 | Object | {} | | showToolbar | 是否显示工具栏 | Boolean | true | | toolbarPosition | 工具栏位置 | String | 'top-right' | | showInfoPanel | 是否显示信息面板 | Boolean | false | | infoPanelTitle | 信息面板标题 | String | '地图信息' | | showDialog | 是否显示对话框 | Boolean | false | | dialogTitle | 对话框标题 | String | '提示' | | dialogContent | 对话框内容 | String | '' |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | map-ready | 地图准备就绪 | { map, adapter } | | map-move | 地图移动 | { latlng, zoom } | | map-zoom | 地图缩放 | { zoom } | | map-click | 地图点击 | { latlng, originalEvent } | | panel-close | 面板关闭 | - | | dialog-confirm | 对话框确认 | - | | dialog-close | 对话框关闭 | - |

Methods

| 方法名 | 说明 | 参数 | 返回值 | |--------|------|------|--------| | addMarker | 添加标记点 | latlng, options | Marker | | clearMarkers | 清除所有标记 | - | - | | addPopup | 添加弹出框 | latlng, content, options | Popup | | setView | 设置地图中心点 | latlng, zoom | - | | getMap | 获取地图实例 | - | Map | | showPanel | 显示信息面板 | - | - | | hidePanel | 隐藏信息面板 | - | - | | showDialog | 显示对话框 | - | - | | hideDialog | 隐藏对话框 | - | - |

Options 配置

options 属性接受一个对象，支持所有 Leaflet Map 的配置选项：

{
  center: [39.9042, 116.4074],  // 地图中心点
  zoom: 12,                      // 缩放级别
  minZoom: 3,                    // 最小缩放
  maxZoom: 18,                   // 最大缩放
  zoomControl: true,             // 是否显示缩放控制
  dragging: true,                // 是否允许拖拽
  scrollWheelZoom: true,         // 是否允许滚轮缩放
  doubleClickZoom: true,         // 是否允许双击缩放
  boxZoom: true,                 // 是否允许框选缩放
  keyboard: true,                // 是否允许键盘控制
  attributionControl: true       // 是否显示版权控制
}

🎨 样式定制

组件使用 Less 编写样式，支持深度选择器进行定制：

// 覆盖默认样式
::v-deep .csf-map-container {
  .csf-map-toolbar {
    background-color: #409EFF;
  }
}

📝 完整示例

添加标记点和弹出框

<template>
  <csf-map ref="map" :options="mapOptions">
    <template slot="info-panel">
      <div>
        <h3>当前位置</h3>
        <p>纬度：{{ currentLat }}</p>
        <p>经度：{{ currentLng }}</p>
      </div>
    </template>
  </csf-map>
</template>

<script>
export default {
  data() {
    return {
      mapOptions: {
        center: [39.9042, 116.4074],
        zoom: 12
      },
      currentLat: 39.9042,
      currentLng: 116.4074
    }
  },
  
  mounted() {
    // 添加标记点
    const marker = this.$refs.map.addMarker([39.9042, 116.4074])
    
    // 绑定弹出框
    if (marker) {
      marker.bindPopup('<b>北京</b><br>中国首都')
    }
  },
  
  methods: {
    addCustomMarker(lat, lng, title) {
      const marker = this.$refs.map.addMarker([lat, lng])
      if (marker) {
        marker.bindPopup(`<b>${title}</b>`)
      }
    },
    
    clearAllMarkers() {
      this.$refs.map.clearMarkers()
    }
  }
}
</script>

结合 Element UI 表单控制

<template>
  <div>
    <csf-map ref="map" :options="mapOptions" />
    
    <el-form label-width="100px">
      <el-form-item label="纬度">
        <el-input-number v-model="lat" :precision="6" :step="0.001" />
      </el-form-item>
      
      <el-form-item label="经度">
        <el-input-number v-model="lng" :precision="6" :step="0.001" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="goToLocation">定位</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapOptions: {
        center: [39.9042, 116.4074],
        zoom: 12
      },
      lat: 39.9042,
      lng: 116.4074
    }
  },
  
  methods: {
    goToLocation() {
      this.$refs.map.setView([this.lat, this.lng], 15)
    }
  }
}
</script>

🔍 常见问题

1. 样式不生效？

确保引入了 Leaflet 的 CSS 文件：

import 'leaflet/dist/leaflet.css'

2. 地图容器高度为 0？

需要为地图容器设置明确的高度：

.csf-map-container {
  height: 600px; /* 或其他固定值 */
}

3. 如何使用自定义底图？

通过 tileLayerUrl 和 tileLayerOptions 属性配置：

<csf-map
  :tile-layer-url="'https://your-custom-tile-server.com/{z}/{x}/{y}.png'"
  :tile-layer-options="{
    attribution: 'Your Attribution',
    maxZoom: 18
  }"
/>

4. Element UI 版本要求？

需要使用 Element UI 2.x 版本，推荐最新稳定版。

📂 目录结构

csf-map/
├── src/
│   ├── index.js              # 入口文件
│   ├── CsfMap.vue            # 主组件
│   └── LeafletAdapter.js     # 地图适配器
├── examples/
│   ├── vue2-demo.vue         # Vue 2 组件示例
│   └── vue2-demo.html        # Vue 2 HTML 示例
├── dist/                     # 构建产物
├── package.json
├── README.md
└── LICENSE

🛠️ 开发

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

构建命令

# 开发模式
npm run dev

# 生产构建
npm run build

# 预览构建结果
npm run preview

🎯 浏览器支持

• Chrome >= 60
• Firefox >= 55
• Safari >= 11
• Edge >= 79
• IE 11（需配合 polyfill）

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

如有问题或建议，请通过 GitHub Issues 联系我们。