{"_id":"@chengxuxiaowang/mapload-utils","name":"@chengxuxiaowang/mapload-utils","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@chengxuxiaowang/mapload-utils","version":"1.0.1","description":"A map loading component","main":"index.js","scripts":{"test":"jest"},"keywords":["leaflet","map"],"author":{"name":"@ctrs"},"license":"MIT","engines":{"node":">=16"},"peerDependencies":{"leaflet":"^1.9.4"},"devDependencies":{"jest":"^30.3.0","leaflet":"^1.9.4"},"_id":"@chengxuxiaowang/mapload-utils@1.0.1","_nodeVersion":"20.12.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-IvhWoLPafVuobUgAQRTAPt9bytHrh88auk9IyjbTDp/OF1qvKBLGq1zYT3AWGXSSvcYOPNoq+0LcEfyL2eJj1w==","shasum":"e3e7e00294558ccbfbaed2183a07b2004821b1e9","tarball":"https://registry.npmjs.org/@chengxuxiaowang/mapload-utils/-/mapload-utils-1.0.1.tgz","fileCount":4,"unpackedSize":25714,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCgq5p2/Bj6NAvZM37dpkDlBZHdXkWGxUXCkFx1F8RCWQIgLj7lRuJe2D7N/d4US0W8BxaiH+HbuAgUf11POWgGvoc="}]},"_npmUser":{"name":"chengxuxiaowang","email":"3059644579@qq.com"},"directories":{},"maintainers":[{"name":"chengxuxiaowang","email":"3059644579@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mapload-utils_1.0.1_1773380291646_0.8460198225616775"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-13T05:38:11.593Z","1.0.1":"2026-03-13T05:38:11.786Z","modified":"2026-03-13T05:38:11.935Z"},"maintainers":[{"name":"chengxuxiaowang","email":"3059644579@qq.com"}],"description":"A map loading component","keywords":["leaflet","map"],"author":{"name":"@ctrs"},"license":"MIT","readme":"# @chengxuxiaowang/utils-npm\r\n## A Clean and Powerful Leaflet Toolkit for Fast Map Creation\r\n\r\n## 安装\r\n\r\n```bash\r\n# 使用前先下载leaflet 并在项目中引入leaflet和样式 全局引入leaflet.css\r\nnpm install leaflet \r\n\r\n# 安装本工具\r\nnpm install @chengxuxiaowang/utils-npm\r\n```\r\n\r\n## 基本使用\r\n\r\n```javascript\r\nconst { loadMap } = require('@chengxuxiaowang/utils-npm');\r\n\r\n// 创建地图\r\nconst map = loadMap('mapContainer', 'GaoDe', {\r\n  center: [39.9042, 116.4074], // 地图中心点 [纬度, 经度]\r\n  zoom: 15, // 初始缩放级别\r\n  mapMode: 'normal' // 地图模式：'normal' 平面图, 'satellite' 卫星图\r\n});\r\n```\r\n\r\n## 支持的地图类型\r\n\r\n| 地图类型 | 支持模式 | 坐标系 | 说明 |\r\n|---------|---------|--------|------|\r\n| TianDiTu | 平面图、卫星图、地形图 | wgs84 | 天地图 |\r\n| GaoDe | 平面图、卫星图 | gcj02 | 高德地图 |\r\n| Google | 平面图、卫星图 | 智能判断 | 谷歌地图（根据位置自动纠偏） |\r\n| Geoq | 平面图（多种风格） | gcj02 | Geoq 地图 |\r\n| Yandex | 平面图、卫星图 | wgs84 | Yandex 地图 |\r\n| Baidu | 平面图、卫星图 | bd09 | 百度地图 |\r\n| Tencent/QQ | 平面图、卫星图、地形图 | gcj02 | 腾讯地图 |\r\n| OSM | 平面图 | wgs84 | OpenStreetMap |\r\n| Offline | 自定义 | 自定义 | 离线地图 |\r\n\r\n## 每种地图的使用示例\r\n\r\n### 1. 天地图\r\n\r\n```javascript\r\n// 天地图 - 平面图\r\nconst map = loadMap('mapContainer', 'TianDiTu', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'normal'\r\n});\r\n\r\n// 天地图 - 卫星图\r\nconst map = loadMap('mapContainer', 'TianDiTu', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'satellite'\r\n});\r\n```\r\n\r\n### 2. 高德地图\r\n\r\n```javascript\r\n// 高德地图 - 平面图\r\nconst map = loadMap('mapContainer', 'GaoDe', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'normal'\r\n});\r\n\r\n// 高德地图 - 卫星图\r\nconst map = loadMap('mapContainer', 'GaoDe', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'satellite'\r\n});\r\n```\r\n\r\n### 3. 谷歌地图\r\n\r\n```javascript\r\n// 谷歌地图 - 平面图（自动判断是否需要纠偏）\r\nconst map = loadMap('mapContainer', 'Google', {\r\n  center: [39.9042, 116.4074], // 中国境内，自动使用 gcj02 坐标系\r\n  zoom: 15,\r\n  mapMode: 'normal'\r\n});\r\n\r\n// 谷歌地图 - 卫星图（自动判断是否需要纠偏）\r\nconst map = loadMap('mapContainer', 'Google', {\r\n  center: [40.7128, -74.0060], // 国外，自动使用 wgs84 坐标系\r\n  zoom: 15,\r\n  mapMode: 'satellite'\r\n});\r\n```\r\n\r\n### 4. Geoq 地图\r\n\r\n```javascript\r\n// Geoq 地图 - 平面图\r\nconst map = loadMap('mapContainer', 'Geoq', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15\r\n});\r\n```\r\n\r\n### 5. Yandex 地图\r\n\r\n```javascript\r\n// Yandex 地图 - 平面图\r\nconst map = loadMap('mapContainer', 'Yandex', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'normal'\r\n});\r\n\r\n// Yandex 地图 - 卫星图\r\nconst map = loadMap('mapContainer', 'Yandex', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'satellite'\r\n});\r\n```\r\n\r\n### 6. 百度地图\r\n\r\n```javascript\r\n// 百度地图 - 平面图\r\nconst map = loadMap('mapContainer', 'Baidu', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'normal'\r\n});\r\n\r\n// 百度地图 - 卫星图\r\nconst map = loadMap('mapContainer', 'Baidu', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'satellite'\r\n});\r\n```\r\n\r\n### 7. 腾讯地图\r\n\r\n```javascript\r\n// 腾讯地图 - 平面图\r\nconst map = loadMap('mapContainer', 'Tencent', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'normal'\r\n});\r\n\r\n// 腾讯地图 - 卫星图\r\nconst map = loadMap('mapContainer', 'Tencent', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  mapMode: 'satellite'\r\n});\r\n\r\n// QQ 地图（腾讯地图的别名）\r\nconst map = loadMap('mapContainer', 'QQ', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15\r\n});\r\n```\r\n\r\n### 8. OpenStreetMap\r\n\r\n```javascript\r\n// OpenStreetMap\r\nconst map = loadMap('mapContainer', 'OSM', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15\r\n});\r\n```\r\n\r\n### 9. 离线地图\r\n\r\n```javascript\r\n// 离线地图 - WGS84 坐标系\r\nconst map = loadMap('mapContainer', 'Offline', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  offlineTileUrl: 'http://localhost:8080/tiles/{z}/{x}/{y}.png',\r\n  offlineCoordType: 'wgs84'\r\n});\r\n\r\n// 离线地图 - GCJ02 坐标系\r\nconst map = loadMap('mapContainer', 'Offline', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  offlineTileUrl: 'http://localhost:8080/tiles/{z}/{x}/{y}.png',\r\n  offlineCoordType: 'gcj02'\r\n});\r\n\r\n// 离线地图 - BD09 坐标系\r\nconst map = loadMap('mapContainer', 'Offline', {\r\n  center: [39.9042, 116.4074],\r\n  zoom: 15,\r\n  offlineTileUrl: 'http://localhost:8080/tiles/{z}/{x}/{y}.png',\r\n  offlineCoordType: 'bd09'\r\n});\r\n```\r\n\r\n## 参数说明\r\n\r\n### 必需参数\r\n- `containerId` - DOM 容器 ID（字符串）\r\n- `mapType` - 地图类型（字符串）\r\n\r\n### 可选参数\r\n- `options.center` - 地图中心点，默认 `[39.9042, 116.4074]`\r\n- `options.zoom` - 初始缩放级别，默认 `13`\r\n- `options.mapMode` - 地图模式，默认 `'normal'`（'normal' 平面图, 'satellite' 卫星图）\r\n- `options.offlineTileUrl` - 离线地图瓦片 URL（仅 mapType='Offline' 时使用）\r\n- `options.offlineCoordType` - 离线地图坐标类型，默认 `'wgs84'`（'gcj02', 'bd09', 'wgs84'）\r\n\r\n## 特殊功能\r\n\r\n### 1. 智能纠偏\r\n- **谷歌地图**：根据中心位置自动判断是否在中国境内，中国境内使用 `gcj02` 坐标系，国外使用 `wgs84` 坐标系\r\n- **其他地图**：根据地图类型固定使用对应坐标系\r\n\r\n### 2. 自动清理\r\n- 当多次调用 `loadMap` 使用同一个容器时，会自动清理已存在的地图实例，避免重复初始化错误\r\n\r\n### 3. 离线地图支持\r\n- 支持自定义瓦片 URL 和坐标系类型\r\n- 可根据离线地图的实际坐标系选择合适的 `offlineCoordType`\r\n\r\n## 坐标系说明\r\n\r\n| 坐标系 | 适用地图 | 说明 |\r\n|---------|---------|------|\r\n| wgs84 | TianDiTu, Yandex, OSM, 国外 Google | 标准 WGS84 坐标系 |\r\n| gcj02 | GaoDe, Geoq, Tencent, 国内 Google | 火星坐标系（中国标准） |\r\n| bd09 | Baidu | 百度坐标系 |\r\n\r\n## 版本管理\r\n\r\n如果修改了代码，需要更新版本并发布：\r\n\r\n```bash\r\n# 升版本\r\nnpm version patch\r\n\r\n# 上传命令\r\nnpm publish --access public\r\n```\r\n","readmeFilename":"README.md","_rev":"1-16b5454780370f79696a7af46ab035f1"}