open-index/open-npm huggingface dataset:
npm package: @sakitam-gis/react-map
Description: a react map base on maptalks
Author: sakitam-fdd
Latest version: 0.0.2

# react-map

react-map 是一个基于 maptalks 封装的地图组件；帮助你轻松的接入地图到 React 项目中。

[![Build Status](https://travis-ci.org/sakitam-gis/react-map.svg?branch=master)](https://www.travis-ci.org/sakitam-gis/react-map)
![JS gzip size](http://img.badgesize.io/https://unpkg.com/@sakitam-gis/react-map/dist/react-map.js?compression=gzip&label=gzip%20size:%20JS)
[![Npm package](https://img.shields.io/npm/v/@sakitam-gis/react-map.svg)](https://www.npmjs.org/package/@sakitam-gis/react-map)
[![GitHub stars](https://img.shields.io/github/stars/sakitam-gis/react-map.svg)](https://github.com/sakitam-gis/react-map/stargazers)

## 特性

- 一个基于maptalks的React组件
- 易用，易扩展，开箱即用。

## 支持环境

* 现代浏览器和 IE9 及以上, 仅仅IE11 支持3D渲染。
* 移动浏览器。
* Electron。

## 安装

### 使用 npm 或 yarn 安装

**我们推荐使用 npm 或 yarn 的方式进行开发**，
不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，
享受整个生态圈和工具链带来的诸多好处。

```bash
$ npm install @sakitam-gis/react-map --save
```

```bash
$ yarn add @sakitam-gis/react-map
```

### 浏览器引入

在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `ReactMap`。

我们在 npm 发布包内的 `@sakitam-gis/react-map/dist` 目录下提供了 `react-map.js` `react-map.css`
 以及 `react-map.min.js` `react-map.min.css`。
 或 [UNPKG](https://unpkg.com/@sakitam-gis/react-map/dist/) 进行下载。

## 示例

```jsx
import { Map, TileLayer } from '@sakitam-gis/react-map';
ReactDOM.render(<Map
  className="map-content"
  center={[-0.113049, 51.498568]}
  zoom={zoom}
  events={{
    onload: this.handleMapLoad
  }}
>
  <TileLayer
    id="layer"
    renderer="gl"
    urlTemplate="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
    subdomains={['a', 'b', 'c', 'd']}
  />
</Map>, mountNode)
```

### 引入样式：

```jsx
import '@sakitam-gis/dist/react-map.css';
```


## License
npm package: @sakitam-gis/sakitam-map
Description: a light and powerfull map enginer
Author: FDD
Latest version: 0.0.1

# sakitam-map

> a lite javascript map lib

[![Build Status](https://travis-ci.org/sakitam-gis/sakitam-map.svg?branch=master)](https://www.travis-ci.org/sakitam-gis/sakitam-map)
[![NPM downloads](https://img.shields.io/npm/dm/sakitam-gis/sakitam-map.svg)](https://npmjs.org/package/sakitam-gis/sakitam-map)
![JS gzip size](http://img.badgesize.io/https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.js?compression=gzip&label=gzip%20size:%20JS)
[![Npm package](https://img.shields.io/npm/v/sakitam-gis/sakitam-map.svg)](https://www.npmjs.org/package/sakitam-gis/sakitam-map)
[![GitHub stars](https://img.shields.io/github/stars/sakitam-gis/sakitam-map.svg)](https://github.com/sakitam-gis/sakitam-map/stargazers)

## 下载


```bash
git clone https://github.com/sakitam-gis/sakitam-map.git
npm install
npm run dev
npm run build
```

### 安装

#### npm安装

```bash
npm install @sakitam-gis/sakitam-map --save
import smap from '@sakitam-gis/sakitam-map'
```

#### cdn

目前可通过 [unpkg.com](https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.js) / [jsdelivr](https://cdn.jsdelivr.net/npm/sakitam-gis/sakitam-map/dist/sakitam-map.js) 获取最新版本的资源。

```bash
// jsdelivr (jsdelivr由于缓存原因最好锁定版本号，否则可能会出现意料之外的问题)
https://cdn.jsdelivr.net/npm/sakitam-gis/sakitam-map/dist/sakitam-map.js
https://cdn.jsdelivr.net/npm/sakitam-gis/sakitam-map/dist/sakitam-map.min.js
// npm
https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.js
https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.min.js
```

### use

```html
<div id="map"></div>
<script src="https://unpkg.com/sakitam-gis/sakitam-map/dist/sakitam-map.js"></script>
<script type="text/javascript">
  var map = new smap.Map('map', {
    projection: 'EPSG:3857',
    zoom: 5,
    center: [12673975, 4079823]
  });

  map.on('load', function (event, data) {
    console.log(event, data)
  });

  var layer = new smap.layer.TileLayer({
    url: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
  });
  map.addLayer(layer);

  document.onkeydown = function (event) {
    console.log(event)
    if (event.keyCode === 107) { // +
      map.setZoom(map.getZoom() + 1)
    } else if (event.keyCode === 109) { // -
      map.setZoom(map.getZoom() - 1)
    }
  };

  var drag = new smap.interactions.DragPan();
  var zoom = new smap.interactions.WheelZoom();
  var dbclick = new smap.interactions.DoubleClickZoom();
  map.addInteraction(dbclick);
  map.addInteraction(zoom);
  map.addInteraction(drag);
</script>
```