| 1 | # react-map
|
| 2 |
|
| 3 | react-map 是一个基于 maptalks 封装的地图组件；帮助你轻松的接入地图到 React 项目中。
|
| 4 |
|
| 5 | [](https://www.travis-ci.org/sakitam-gis/react-map)
|
| 6 | 
|
| 7 | [](https://www.npmjs.org/package/@sakitam-gis/react-map)
|
| 8 | [](https://github.com/sakitam-gis/react-map/stargazers)
|
| 9 |
|
| 10 | ## 特性
|
| 11 |
|
| 12 | - 一个基于maptalks的React组件
|
| 13 | - 易用，易扩展，开箱即用。
|
| 14 |
|
| 15 | ## 支持环境
|
| 16 |
|
| 17 | * 现代浏览器和 IE9 及以上, 仅仅IE11 支持3D渲染。
|
| 18 | * 移动浏览器。
|
| 19 | * Electron。
|
| 20 |
|
| 21 | ## 安装
|
| 22 |
|
| 23 | ### 使用 npm 或 yarn 安装
|
| 24 |
|
| 25 | **我们推荐使用 npm 或 yarn 的方式进行开发**，
|
| 26 | 不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，
|
| 27 | 享受整个生态圈和工具链带来的诸多好处。
|
| 28 |
|
| 29 | ```bash
|
| 30 | $ npm install @sakitam-gis/react-map --save
|
| 31 | ```
|
| 32 |
|
| 33 | ```bash
|
| 34 | $ yarn add @sakitam-gis/react-map
|
| 35 | ```
|
| 36 |
|
| 37 | ### 浏览器引入
|
| 38 |
|
| 39 | 在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `ReactMap`。
|
| 40 |
|
| 41 | 我们在 npm 发布包内的 `@sakitam-gis/react-map/dist` 目录下提供了 `react-map.js` `react-map.css`
|
| 42 | 以及 `react-map.min.js` `react-map.min.css`。
|
| 43 | 或 [UNPKG](https://unpkg.com/@sakitam-gis/react-map/dist/) 进行下载。
|
| 44 |
|
| 45 | ## 示例
|
| 46 |
|
| 47 | ```jsx
|
| 48 | import { Map, TileLayer } from '@sakitam-gis/react-map';
|
| 49 | ReactDOM.render(<Map
|
| 50 | className="map-content"
|
| 51 | center={[-0.113049, 51.498568]}
|
| 52 | zoom={zoom}
|
| 53 | events={{
|
| 54 | onload: this.handleMapLoad
|
| 55 | }}
|
| 56 | >
|
| 57 | <TileLayer
|
| 58 | id="layer"
|
| 59 | renderer="gl"
|
| 60 | urlTemplate="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
|
| 61 | subdomains={['a', 'b', 'c', 'd']}
|
| 62 | />
|
| 63 | </Map>, mountNode)
|
| 64 | ```
|
| 65 |
|
| 66 | ### 引入样式：
|
| 67 |
|
| 68 | ```jsx
|
| 69 | import '@sakitam-gis/dist/react-map.css';
|
| 70 | ```
|
| 71 |
|
| 72 |
|
| 73 | ## License
|