@minemap3d/minemap/README-demo.md

基于webgl的三维渲染球体地图引擎，支持矢量mvt数据的渲染，支持三维渲染、交互、空间分析以及二三维的标绘

# MineMap ESM 模块地图加载示例

本示例展示了如何使用 ES 模块方式加载和使用 MineMap 地图引擎。

## 文件说明

- `demo.html` - ESM 模块地图加载示例页面
- `esm/index.js` - MineMap ESM 模块主文件
- `esm/minemap.css` - MineMap 样式文件

## 使用方法

### 1. 启动本地服务器

由于 ES 模块需要通过 HTTP 协议加载，需要启动一个本地服务器：

```bash
# 在当前目录下启动Python HTTP服务器
python -m http.server 8080

# 或者使用Node.js的http-server
npx http-server -p 8080

# 或者使用其他Web服务器
```

### 2. 访问示例页面

在浏览器中访问：`http://localhost:8080/demo.html`

## 代码特点

### ES 模块导入

```javascript
// 使用ES模块方式导入MineMap
import minemap from "./esm/index.js";
```

### 地图初始化

```javascript
// 配置MineMap参数
minemap.domainUrl = "https://minemap.minedata.cn";
minemap.key = "0c6ac62182404e5ebc7a789981f6db72";
minemap.solution = 11001;

// 创建地图实例
var map = new minemap.Map({
	container: "map",
	style: style,
	center: [116.24544236500333, 40.07254296210216],
	zoom: 10
});
```

### 功能特性

- ✅ 使用 ES 模块导入方式
- ✅ 基础地图显示
- ✅ 地图标记点
- ✅ 地图交互事件
- ✅ 控制台调试支持
- ✅ 响应式布局

## 与传统引入方式的区别

| 特性     | 传统方式                               | ESM 模块方式                                 |
| -------- | -------------------------------------- | -------------------------------------------- |
| 引入方式 | `<script src="minemap.js"></script>` | `import minemap from './esm/index-dev.js'` |
| 模块化   | 全局变量                               | ES 模块                                      |
| 打包支持 | 需要额外配置                           | 原生支持                                     |
| 树摇优化 | 不支持                                 | 支持                                         |
| 类型检查 | 有限                                   | 更好的支持                                   |

## 注意事项

1. **本地服务器要求**：由于浏览器的 CORS 安全策略，ESM 模块必须通过 HTTP(S)协议访问，不能直接打开 HTML 文件
2. **模块路径**：确保 `esm/index.js`文件存在且路径正确
3. **浏览器兼容性**：需要支持 ES 模块的现代浏览器（Chrome 61+, Firefox 60+, Safari 10.1+）
4. **当前状态**：ESM 模块现在可以在浏览器环境中正常使用
   - 已移除 crypto-js 依赖
   - 使用浏览器原生 API 替代
   - 支持标准 ES 模块导入
5. **API 密钥**：示例中使用的是测试密钥，实际使用时请替换为您的密钥

## 扩展示例

可以基于此示例继续开发更复杂的功能：

- 添加图层控制
- 集成数据可视化
- 添加自定义控件
- 实现空间分析功能

## 技术支持

如有问题，请参考 MineMap 官方文档或联系技术支持。