{"_id":"@gis_victory/gismap","_rev":"157-44f5969a18ff84b3eec3b8ff98a6bfba","name":"@gis_victory/gismap","dist-tags":{"latest":"2.0.107"},"versions":{"1.0.0":{"name":"@gis_victory/gismap","version":"1.0.0","_id":"@gis_victory/gismap@1.0.0","maintainers":[{"name":"gis_victory","email":"gis_victory@163.com"}],"dist":{"shasum":"ab51112b5fc5a26bb1ad4103ae7708523204aaba","tarball":"https://registry.npmjs.org/@gis_victory/gismap/-/gismap-1.0.0.tgz","fileCount":48,"integrity":"sha512-xlJRQgEdl3N4GyjK8qQMcW6NYwbCuvW9My5KSofU6OWXVZ7pZksaACoXtYsa5t+ZWCggJyLVQ0ZCXouVlybr4Q==","signatures":[{"sig":"MEUCIGN+4ta7dwrlqYyqGK+oZxRC1R7uLagQVOXDUHsbZSY9AiEAmuNaK6N2V3hVuM8DWu8/VUIS7Rp8RG+gokViQn8eCD8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3922625},"main":"dist/gismap.umd.js","type":"module","style":"dist/gismap.css","types":"dist/index.d.ts","module":"dist/gismap.es.js","private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"gis_victory","email":"gis_victory@163.com"},"_npmVersion":"10.9.3","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n```\n\n### 2. 使用组合式函数\n\n```vue\n\n\n\n```\n\n### 3. 使用 MapSwitch 组件\n\n```vue\n\n\n\n```\n\n## 核心功能\n\n### 1. 图层管理\n\n```typescript\nimport { useLayers } from 'gismap';\n\nconst { addLayer, removeLayer, layers } = useLayers();\n\n// 添加 GeoJSON 图层\nconst layer = addLayer({\n id: 'points',\n type: 'circle',\n source: {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [120, 30]\n }\n }\n ]\n }\n },\n paint: {\n 'circle-radius': 10,\n 'circle-color': '#ff0000'\n }\n});\n\n// 移除图层\nremoveLayer(layer.id);\n```\n\n### 2. 标记管理\n\n```typescript\nimport { useMarkers } from 'gismap';\n\nconst { add, remove, getAll } = useMarkers();\n\n// 添加标记\nconst marker = add({\n id: 'marker-1',\n position: [120, 30],\n options: {\n draggable: true,\n anchor: 'bottom'\n }\n});\n\n// 移除标记\nremove('marker-1');\n\n// 获取所有标记\nconst allMarkers = getAll();\n```\n\n### 3. 绘制功能\n\n```typescript\nimport { useDraw } from 'gismap';\n\nconst { startDraw, stopDraw, isDrawing, selected } = useDraw();\n\n// 开始绘制多边形\nstartDraw('polygon', (type, geoJson, wkt, feature) => {\n console.log('绘制完成:', type, geoJson, wkt);\n});\n\n// 停止绘制\nstopDraw();\n```\n\n### 4. 测量功能\n\n```typescript\nimport { useMeasure } from 'gismap';\n\nconst { startMeasure, stopMeasure, isMeasuring, results } = useMeasure();\n\n// 开始测量距离\nstartMeasure('line', (result) => {\n console.log('测量结果:', result.value, result.unit);\n});\n\n// 停止测量\nstopMeasure();\n```\n\n### 5. 雷达图层\n\n```typescript\nimport { useMap } from 'gismap';\n\nconst { radarManager } = useMap();\n\n// 添加雷达\nradarManager.value?.add({\n center: [120, 30],\n radius: 500,\n sectorVisible: true,\n sectorAngle: 45\n});\n\n// 开始扫描\nradarManager.value?.startScan();\n\n// 停止扫描\nradarManager.value?.stopScan();\n\n// 移除雷达\nradarManager.value?.remove();\n```\n\n### 6. 地形管理\n\n```typescript\nimport { useMap } from 'gismap';\n\nconst { terrainManager } = useMap();\n\n// 添加地形\nterrainManager.value?.add({\n source: {\n tiles: ['https://example.com/terrain/{z}/{x}/{y}.png'],\n minzoom: 0,\n maxzoom: 14\n },\n layer: {\n exaggeration: 1.5\n }\n});\n\n// 添加山体阴影\nterrainManager.value?.addHillshade();\n\n// 移除地形\nterrainManager.value?.remove();\n```\n\n### 7. 图标管理\n\n#### 最佳实践：在地图初始化完成后立即加载图标\n\n为了确保地图能够正确读取图标，应该在地图初始化完成后立即加载图标。推荐使用 `useMapReady` 组合式函数来监听地图就绪事件：\n\n```typescript\nimport { useMapReady } from 'gismap';\n\n// 在地图就绪后立即加载图标\nuseMapReady(async (context) => {\n try {\n // 批量加载图标\n await context.iconManager?.load([\n {\n name: 'marker-icon',\n url: 'https://example.com/marker.png'\n },\n {\n name: 'icon-2',\n url: 'https://example.com/icon2.png'\n }\n ], {\n batchSize: 5, // 每批加载5个图标\n batchInterval: 100, // 每批间隔100毫秒\n onProgress: (loaded, total) => {\n console.log(`加载进度: ${loaded}/${total}`);\n }\n });\n \n console.log('图标加载完成');\n \n // 图标加载完成后，再添加使用图标的图层\n addIconLayer(context);\n } catch (error) {\n console.error('图标加载失败:', error);\n }\n});\n\n// 添加使用图标的图层\nfunction addIconLayer(context) {\n if (context?.layerManager) {\n context.layerManager.addLayer({\n id: 'icon-layer',\n type: 'symbol',\n source: {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [120, 30]\n }\n }\n ]\n }\n },\n layout: {\n 'icon-image': 'marker-icon', // 使用已加载的图标\n 'icon-size': 1.5\n }\n });\n }\n}\n```\n\n#### 其他用法\n\n```typescript\nimport { useMap } from 'gismap';\n\nconst { iconManager } = useMap();\n\n// 批量加载图标（基本用法）\niconManager.value?.load([\n {\n name: 'marker-icon',\n url: 'https://example.com/marker.png'\n },\n {\n name: 'icon-2',\n url: 'https://example.com/icon2.png'\n }\n]).then(() => {\n console.log('图标加载完成');\n});\n\n// 加载单个图标\niconManager.value?.loadOne({\n name: 'single-icon',\n url: 'https://example.com/single.png'\n}).then(() => {\n console.log('单个图标加载完成');\n});\n\n// 检查图标是否已加载\nif (iconManager.value?.hasIcon('marker-icon')) {\n console.log('图标已加载');\n}\n\n// 移除图标\niconManager.value?.removeIcon('marker-icon');\n\n// 清除所有图标记录\niconManager.value?.clear();\n```\n\n## 高级功能\n\n### 1. 自定义适配器\n\n您可以通过实现 `MapAdapter` 或 `VectorTileAdapter` 接口来创建自定义适配器，支持其他地图引擎。\n\n```typescript\nimport type { MapAdapter, MapInitOptions, MapViewState } from 'gismap';\n\nexport class MyCustomAdapter implements MapAdapter {\n private map: any = null;\n\n async initialize(container: HTMLElement, options: MapInitOptions): Promise {\n // 初始化您的地图引擎\n // this.map = new MyMapEngine(container, options);\n }\n\n dispose(): void {\n // 清理资源\n }\n\n getMap(): any {\n return this.map;\n }\n\n // 实现其他必要的方法...\n}\n\n// 使用自定义适配器\n\n```\n\n### 2. 扩展管理器\n\n您可以通过继承现有管理器或创建新的管理器来扩展功能。\n\n```typescript\nimport { VectorTileAdapter } from 'gismap';\n\nexport class CustomManager {\n private adapter: VectorTileAdapter;\n\n constructor(adapter: VectorTileAdapter) {\n this.adapter = adapter;\n }\n\n // 实现您的自定义功能\n doSomething() {\n // 使用 this.adapter 操作地图\n }\n}\n```\n\n### 3. 事件系统\n\nGISMap 提供了完善的事件系统，您可以监听各种地图事件。\n\n```typescript\nimport { useMapEvent } from 'gismap';\n\n// 监听地图点击事件\nuseMapEvent('click', (event) => {\n console.log('地图点击:', event.coordinates);\n});\n\n// 监听视图变化事件\nuseMapEvent('viewChange', (view) => {\n console.log('视图变化:', view);\n});\n```\n\n## 项目结构\n\n```\nsrc/\n├── adapters/ # 地图适配器\n│ ├── mapbox/ # Mapbox GL 适配器\n│ ├── types.ts # 适配器类型定义\n│ └── index.ts # 适配器统一导出\n├── components/ # Vue 组件\n│ ├── MapContainer/ # 地图容器组件\n│ └── ...\n├── composables/ # 组合式函数\n│ ├── useMap.ts # 地图核心组合式函数\n│ ├── useLayer.ts # 图层组合式函数\n│ └── ...\n├── core/ # 核心功能\n│ ├── event.ts # 事件系统\n│ ├── StateStore.ts # 状态管理\n│ └── ...\n├── domain/ # 领域服务\n│ ├── LayerService.ts # 图层服务\n│ ├── MarkerService.ts # 标记服务\n│ └── ...\n├── manager/ # 管理器\n│ ├── mapbox/ # Mapbox 专用管理器\n│ ├── layer/ # 图层相关\n│ ├── LayerManager.ts # 图层管理器\n│ ├── RadarManager.ts # 雷达管理器\n│ └── ...\n├── services/ # 服务\n│ ├── MapContext.ts # 地图上下文\n│ └── ...\n└── index.ts # 主入口\n```\n\n## 浏览器兼容性\n\n- Chrome/Edge >= 88\n- Firefox >= 85\n- Safari >= 14\n\n## 许可证\n\nMIT\n\n## 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n## 联系方式\n\n- 项目地址：https://github.com/your-username/gismap\n- 问题反馈：https://github.com/your-username/gismap/issues\n","readmeFilename":"README.md"}