@chengxuxiaowang/utils-npm

A Clean and Powerful Leaflet Toolkit for Fast Map Creation

安装

# 使用前先下载leaflet 并在项目中引入leaflet和样式 全局引入leaflet.css
npm install leaflet 

# 安装本工具
npm install @chengxuxiaowang/utils-npm

基本使用

const { loadMap } = require('@chengxuxiaowang/utils-npm');

// 创建地图
const map = loadMap('mapContainer', 'GaoDe', {
  center: [39.9042, 116.4074], // 地图中心点 [纬度, 经度]
  zoom: 15, // 初始缩放级别
  mapMode: 'normal' // 地图模式：'normal' 平面图, 'satellite' 卫星图
});

支持的地图类型

| 地图类型 | 支持模式 | 坐标系 | 说明 | |---------|---------|--------|------| | TianDiTu | 平面图、卫星图、地形图 | wgs84 | 天地图 | | GaoDe | 平面图、卫星图 | gcj02 | 高德地图 | | Google | 平面图、卫星图 | 智能判断 | 谷歌地图（根据位置自动纠偏） | | Geoq | 平面图（多种风格） | gcj02 | Geoq 地图 | | Yandex | 平面图、卫星图 | wgs84 | Yandex 地图 | | Baidu | 平面图、卫星图 | bd09 | 百度地图 | | Tencent/QQ | 平面图、卫星图、地形图 | gcj02 | 腾讯地图 | | OSM | 平面图 | wgs84 | OpenStreetMap | | Offline | 自定义 | 自定义 | 离线地图 |

每种地图的使用示例

1. 天地图

// 天地图 - 平面图
const map = loadMap('mapContainer', 'TianDiTu', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'normal'
});

// 天地图 - 卫星图
const map = loadMap('mapContainer', 'TianDiTu', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'satellite'
});

2. 高德地图

// 高德地图 - 平面图
const map = loadMap('mapContainer', 'GaoDe', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'normal'
});

// 高德地图 - 卫星图
const map = loadMap('mapContainer', 'GaoDe', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'satellite'
});

3. 谷歌地图

// 谷歌地图 - 平面图（自动判断是否需要纠偏）
const map = loadMap('mapContainer', 'Google', {
  center: [39.9042, 116.4074], // 中国境内，自动使用 gcj02 坐标系
  zoom: 15,
  mapMode: 'normal'
});

// 谷歌地图 - 卫星图（自动判断是否需要纠偏）
const map = loadMap('mapContainer', 'Google', {
  center: [40.7128, -74.0060], // 国外，自动使用 wgs84 坐标系
  zoom: 15,
  mapMode: 'satellite'
});

4. Geoq 地图

// Geoq 地图 - 平面图
const map = loadMap('mapContainer', 'Geoq', {
  center: [39.9042, 116.4074],
  zoom: 15
});

5. Yandex 地图

// Yandex 地图 - 平面图
const map = loadMap('mapContainer', 'Yandex', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'normal'
});

// Yandex 地图 - 卫星图
const map = loadMap('mapContainer', 'Yandex', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'satellite'
});

6. 百度地图

// 百度地图 - 平面图
const map = loadMap('mapContainer', 'Baidu', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'normal'
});

// 百度地图 - 卫星图
const map = loadMap('mapContainer', 'Baidu', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'satellite'
});

7. 腾讯地图

// 腾讯地图 - 平面图
const map = loadMap('mapContainer', 'Tencent', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'normal'
});

// 腾讯地图 - 卫星图
const map = loadMap('mapContainer', 'Tencent', {
  center: [39.9042, 116.4074],
  zoom: 15,
  mapMode: 'satellite'
});

// QQ 地图（腾讯地图的别名）
const map = loadMap('mapContainer', 'QQ', {
  center: [39.9042, 116.4074],
  zoom: 15
});

8. OpenStreetMap

// OpenStreetMap
const map = loadMap('mapContainer', 'OSM', {
  center: [39.9042, 116.4074],
  zoom: 15
});

9. 离线地图

// 离线地图 - WGS84 坐标系
const map = loadMap('mapContainer', 'Offline', {
  center: [39.9042, 116.4074],
  zoom: 15,
  offlineTileUrl: 'http://localhost:8080/tiles/{z}/{x}/{y}.png',
  offlineCoordType: 'wgs84'
});

// 离线地图 - GCJ02 坐标系
const map = loadMap('mapContainer', 'Offline', {
  center: [39.9042, 116.4074],
  zoom: 15,
  offlineTileUrl: 'http://localhost:8080/tiles/{z}/{x}/{y}.png',
  offlineCoordType: 'gcj02'
});

// 离线地图 - BD09 坐标系
const map = loadMap('mapContainer', 'Offline', {
  center: [39.9042, 116.4074],
  zoom: 15,
  offlineTileUrl: 'http://localhost:8080/tiles/{z}/{x}/{y}.png',
  offlineCoordType: 'bd09'
});

参数说明

必需参数

• containerId - DOM 容器 ID（字符串）
• mapType - 地图类型（字符串）

可选参数

• options.center - 地图中心点，默认 [39.9042, 116.4074]
• options.zoom - 初始缩放级别，默认 13
• options.mapMode - 地图模式，默认 'normal'（'normal' 平面图, 'satellite' 卫星图）
• options.offlineTileUrl - 离线地图瓦片 URL（仅 mapType='Offline' 时使用）
• options.offlineCoordType - 离线地图坐标类型，默认 'wgs84'（'gcj02', 'bd09', 'wgs84'）

特殊功能

1. 智能纠偏

• 谷歌地图：根据中心位置自动判断是否在中国境内，中国境内使用 gcj02 坐标系，国外使用 wgs84 坐标系
• 其他地图：根据地图类型固定使用对应坐标系

2. 自动清理

• 当多次调用 loadMap 使用同一个容器时，会自动清理已存在的地图实例，避免重复初始化错误

3. 离线地图支持

• 支持自定义瓦片 URL 和坐标系类型
• 可根据离线地图的实际坐标系选择合适的 offlineCoordType

坐标系说明

| 坐标系 | 适用地图 | 说明 | |---------|---------|------| | wgs84 | TianDiTu, Yandex, OSM, 国外 Google | 标准 WGS84 坐标系 | | gcj02 | GaoDe, Geoq, Tencent, 国内 Google | 火星坐标系（中国标准） | | bd09 | Baidu | 百度坐标系 |

版本管理

如果修改了代码，需要更新版本并发布：

# 升版本
npm version patch

# 上传命令
npm publish --access public