@songcf/fy-map 1.0.0 → 1.0.1-beta.0

package/README.md

@@ -1,5 +1,200 @@
-# Vue 3 + Vite
+# @songcf/fy-map
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+基于 Vue 2.7 + Vite 7.3.6 开发的 maptalks 地图组件库，提供了一套完整的地图相关组件，方便在 Vue 项目中快速集成和使用 maptalks 地图功能。
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 特性
+
+- 🚀 基于 Vue 2.7 和 Vite 构建，开发体验优秀
+- 🗺️ 封装 17 个常用地图组件，覆盖大部分地图使用场景
+- 📦 支持完整引入和按需引入两种使用方式
+- 🎨 提供多种地图底图支持（OSM、CartoDB、Google 等）
+- ✏️ 内置绘制工具，支持点、线、面、圆等几何图形绘制
+- 🔀 支持标记聚合、标签、弹窗等交互功能
+- 📝 完整的 TypeScript 类型支持
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @songcf/fy-map
+
+# 使用 pnpm
+pnpm add @songcf/fy-map
+
+# 使用 yarn
+yarn add @songcf/fy-map
+```
+
+### 依赖要求
+
+- vue: >= 2.7.16
+- maptalks: >= 1.12.1
+
+## 使用方法
+
+### 完整引入
+
+在你的项目中完整引入所有组件：
+
+```javascript
+import Vue from 'vue';
+import FyMap from '@songcf/fy-map';
+
+// 安装所有组件
+Vue.use(FyMap);
+
+// 现在可以在任何地方使用组件了
+```
+
+### 按需引入
+
+如果你只使用部分组件，可以按需引入：
+
+```javascript
+import Vue from 'vue';
+import { FyMap, FyTileLayer, FyMarker } from '@songcf/fy-map';
+
+// 单独注册组件
+Vue.component('FyMap', FyMap);
+Vue.component('FyTileLayer', FyTileLayer);
+Vue.component('FyMarker', FyMarker);
+```
+
+## 组件列表
+
+### 基础组件
+
+- **MyButton** - 基础按钮组件
+- **FyMap** - 地图容器组件，提供地图初始化和管理功能
+
+### 图层组件
+
+- **FyTileLayer** - 瓦片图层组件
+- **FyVectorLayer** - 矢量图层组件
+
+### 地图覆盖物组件
+
+- **FyMarker** - 标记点组件
+- **FyLabel** - 标签组件
+- **FyPopup** - 弹窗组件
+- **FyClusterMarker** - 聚合标记组件
+
+### 绘制工具组件
+
+- **FyDrawTool** - 绘制工具组件
+- **FyDrawPoint** - 点绘制组件
+- **FyDrawLine** - 线绘制组件
+- **FyDrawPolygon** - 面绘制组件
+- **FyDrawCircle** - 圆绘制组件
+
+### 几何图形组件
+
+- **FyPoint** - 点图形组件
+- **FyLineString** - 线图形组件
+- **FyPolygon** - 面图形组件
+- **FyCircle** - 圆图形组件
+
+## 基础示例
+
+下面是一个简单的地图示例：
+
+```vue
+<template>
+  <div class="map-container">
+    <FyMap
+      :center="[116.4074, 39.9042]"
+      :zoom="13"
+      baseLayer="osm"
+      @ready="handleMapReady"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleMapReady(map) {
+      console.log('地图已就绪', map);
+      // 可以在这里进行地图初始化后的操作
+    }
+  }
+}
+</script>
+
+<style>
+.map-container {
+  width: 100%;
+  height: 600px;
+}
+</style>
+```
+
+### FyMap 组件主要属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| center | Array | [116.4074, 39.9042] | 地图中心点 [经度, 纬度] |
+| zoom | Number | 13 | 缩放级别 |
+| minZoom | Number | 1 | 最小缩放级别 |
+| maxZoom | Number | 22 | 最大缩放级别 |
+| baseLayer | String | "osm" | 底图类型（osm、cartoDB、google、custom） |
+| baseLayerUrl | String | "" | 自定义底图URL模板 |
+| subdomains | Array | ["a", "b", "c"] | 底图子域名 |
+| options | Object | {} | 其他地图配置选项 |
+
+### FyMap 组件主要事件
+
+| 事件名 | 回调参数 | 说明 |
+|--------|----------|------|
+| ready | (map: Map) | 地图初始化完成后触发 |
+
+### FyMap 组件主要方法
+
+| 方法名 | 参数 | 说明 |
+|--------|------|------|
+| setCenter | (center: Array) | 设置地图中心点 |
+| setZoom | (zoom: Number) | 设置缩放级别 |
+| flyTo | (center, zoom, options) | 飞到指定位置 |
+| getMap | () | 获取地图实例 |
+| switchBaseLayer | (layerType, urlTemplate) | 切换底图 |
+
+## 开发
+
+```bash
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 监听文件变化自动构建
+npm run watch
+
+# 生成类型声明文件
+npm run type:build
+
+# 格式化代码
+npm run format
+
+# 检查代码格式
+npm run format:check
+
+# 发布版本
+npm run release
+```
+
+## 技术栈
+
+- Vue 2.7.16
+- Vite 7.3.6
+- TypeScript
+- maptalks 1.12.1
+- Prettier
+
+## 许可证
+
+ISC
+
+## 作者
+
+songcf

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@songcf/fy-map",
-  "version": "1.0.0",
-  "description": "this is components",
+  "version": "1.0.1-beta.0",
+  "description": "基于vue2.7 + vite7.3.6 的maptalks组件库",
   "main": "dist/fy-map.umd.js",
   "module": "dist/fy-map.es.js",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,8 @@
     "build": "vite build",
     "type:build": "vue-tsc",
     "format": "prettier --write \"src/**/*.{js,ts,vue}\"",
-    "format:check": "prettier --check \"src/**/*.{js,ts,vue}\""
+    "format:check": "prettier --check \"src/**/*.{js,ts,vue}\"",
+    "release": "npm version prerelease --preid beta && npm publish"
   },
   "peerDependencies": {
     "maptalks": "1.12.1",