# simple-map

基于 OpenLayers 的轻量 GIS 地图库，提供地图初始化、图层、绘制、测量、轨迹等常用能力，可在 Vue、React 或原生 JS 项目中使用。

## 环境要求

- Node.js `>=14.18.0`（推荐 18 / 20）
- 现代浏览器或支持 ESM 的构建工具（Vite、Webpack 5 等）

## 安装

```bash
npm install @its-cool/simple-map
```

运行时依赖（OpenLayers、proj4、turf 等）已打包进发布产物，并编译为 ES2015，兼容 Vue CLI 4 / Webpack 4，一般无需单独安装或转译 `ol`。

## 快速上手

### 1. 引入样式

```js
import '@its-cool/simple-map/style.css';
```

### 2. 创建地图

```js
import { Map } from '@its-cool/simple-map';

const map = new Map('map', {
  centerX: 116.4,
  centerY: 39.9,
  zoom: 12,
  wkid: 3857,
  callback: {}
});
```

HTML 中准备一个容器：

```html
<div id="map" style="width: 100%; height: 500px;"></div>
```

### 3. 使用工具类（可选）

```js
import { Draw, Measure, Track, transformCoord } from '@its-cool/simple-map';

// 坐标转换、绘制、测量、轨迹等能力见 API 与示例
```

## 静态资源

默认图标路径为 `/image/...`。请将包内 `dist/image/` 复制到应用的静态目录（如 `public/image/`），或通过 CSS 变量自定义路径：

```css
:root {
  --simple-map-icon-marker: url('/your-path/icon-marker.png');
}
```

## 本地示例

仓库内附带 Vue 3 联调应用，可快速查看各功能效果：

```bash
cd playground
npm install
npm run dev
```

浏览器访问 `http://localhost:5173/pipe`（History 模式，勿使用 `/#/pipe`）。详见 [playground/README.md](./playground/README.md)。

## 参与开发

克隆仓库后，在根目录安装依赖并构建：

```bash
npm install
npm run build
```

本地联调库源码：

```bash
npm run playground
```

更完整的构建说明、Webpack 集成、发布流程与目录结构，见 [devREADME.md](./devREADME.md)。

## 许可证

[MIT](./LICENSE)