open-index/open-npm huggingface dataset:
npm package: @supermap/iclient-common
Description: @supermap/iclient-common 是 @supermap/iclient-leaflet、@supermap/iclient-openlayers、@supermap/iclient-mapboxgl、@supermap/iclient-classic 的共用依赖。
Author: SuperMap
Latest version: 11.1.1

# @supermap/iclient-common

@supermap/iclient-common 是 @supermap/iclient-leaflet、@supermap/iclient-openlayers、@supermap/iclient-mapboxgl、@supermap/iclient-classic 的共用依赖。

## 简介
* 官网：[https://iclient.supermap.io](https://iclient.supermap.io)
* 源码：[https://github.com/SuperMap/iClient-JavaScript/tree/master/src/common](https://github.com/SuperMap/iClient-JavaScript/tree/master/src/common)

## 安装

```
 npm install @supermap/iclient-common
```
npm package: @supermap/iclient-leaflet
Description: @supermap/iclient-leaflet 是一套基于 Leaflet 的云 GIS 网络客户端开发平台， 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力， 同时提供了优秀的可视化功能。
Author: SuperMap
Latest version: 11.1.1

# @supermap/iclient-leaflet

@supermap/iclient-leaflet 是一套基于 Leaflet 的云 GIS 网络客户端开发平台， 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力， 同时提供了优秀的可视化功能。

## 简介
* 官网：[https://iclient.supermap.io](https://iclient.supermap.io)
* 源码：[https://github.com/SuperMap/iClient-JavaScript/tree/master/src/leaflet](https://github.com/SuperMap/iClient-JavaScript/tree/master/src/leaflet)

## 安装

```
 npm install @supermap/iclient-leaflet
```

## 开发

在 HTML 文件中引入 CSS  文件

```
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>

<link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css"/>
```

在 JS 文件中加入如下代码

```
import L from 'leaflet';
import {tiledMapLayer} from '@supermap/iclient-leaflet';

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
tiledMapLayer(url).addTo(map);
```

## 示例
 [https://github.com/SuperMap/iClient-JavaScript/tree/master/examples/leaflet](https://github.com/SuperMap/iClient-JavaScript/tree/master/examples/leaflet)
npm package: @supermap/iclient-ol
Description: @supermap/iclient-ol 是一套基于 OpenLayers 的云 GIS 网络客户端开发平台， 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力， 同时提供了优秀的可视化功能。
Author: SuperMap
Latest version: 11.1.1

# @supermap/iclient-ol

@supermap/iclient-ol 是一套基于 OpenLayers 的云 GIS 网络客户端开发平台， 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力， 同时提供了优秀的可视化功能。

## 简介
* 官网：[https://iclient.supermap.io](https://iclient.supermap.io)
* 源码：[https://github.com/SuperMap/iClient-JavaScript/tree/master/src/openlayers](https://github.com/SuperMap/iClient-JavaScript/tree/master/src/openlayers)

## 安装

```
 npm install @supermap/iclient-ol
```
如果您使用的是 OpenLayers 4，请参考此[文档](https://www.npmjs.com/package/@supermap/iclient-openlayers/v/10.0.0)安装 SuperMap iClient for OpenLayers。

## 开发

在 HTML 文件中引入 CSS  文件

```html
<link href='https://iclient.supermap.io/web/libs/openlayers/6.1.1/ol.css' rel='stylesheet' />

<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
```
在 JS 文件中加入如下代码

```js
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import * as control from 'ol/control';    
import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new Map({
    target: 'map',
    controls: control.defaults({attributionOptions: {collapsed: false}})
        .extend([new Logo()]),
    view: new View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new TileLayer({
    source: new TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
```

## 示例
 [https://github.com/SuperMap/iClient-JavaScript/tree/master/examples/openlayers](https://github.com/SuperMap/iClient-JavaScript/tree/master/examples/openlayers)
npm package: @supermap/iclient-openlayers
Description: @supermap/iclient-openlayers 是一套基于 OpenLayers 的云 GIS 网络客户端开发平台， 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力， 同时提供了优秀的可视化功能。
Author: SuperMap
Latest version: 10.0.0

# @supermap/iclient-openlayers

@supermap/iclient-openlayers 是一套基于 OpenLayers 的云 GIS 网络客户端开发平台， 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力， 同时提供了优秀的可视化功能。

目前支持的OpenLayers版本为4.6.5，最新的5.x支持版本还在开发中。

## 简介
* 官网：[http://iclient.supermap.io](http://iclient.supermap.io)
* 源码：[https://github.com/SuperMap/iClient-JavaScript/tree/master/src/openlayers](https://github.com/SuperMap/iClient-JavaScript/tree/master/src/openlayers)

## 安装

```
 npm install @supermap/iclient-openlayers
```

## 开发

在 HTML 文件中引入 CSS  文件

```html
<link href='https://openlayers.org/en/v4.6.5/css/ol.css' rel='stylesheet' />

<link href='http://iclient.supermap.io/dist/openlayers/iclient-openlayers.min.css' rel='stylesheet' />

```
在 JS 文件中加入如下代码

```js
import ol from 'openlayers';
import {Logo, TileSuperMapRest} from '@supermap/iclient-openlayers';

var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new ol.layer.Tile({
    source: new TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
```

## 示例
 [https://github.com/SuperMap/iClient-JavaScript/tree/master/examples/openlayers](https://github.com/SuperMap/iClient-JavaScript/tree/master/examples/openlayers)
npm package: @supermap/react-iclient-mapboxgl
Description: SuperMap iClient for React.js
Author: SuperMap_FE
Latest version: 11.1.1

# react-iclient-mapboxgl

## 简介

- 官网：[https://iclient.supermap.io](https://iclient.supermap.io)
- 源码：[https://github.com/SuperMap/react-iclient](https://github.com/SuperMap/react-iclient)

## 安装

```
npm install @supermap/react-iclient-mapboxgl
```

## 开发

```js
import React from 'react';
import { SmWebMap } from '@supermap/react-iclient-mapboxgl';

const App = () => (
  <>
    <SmWebMap mapId={mapId} serverUrl={serverUrl}></SmWebMap>
  </>
);
```

## 示例

[https://iclient.supermap.io/examples/component/examples.html#reactcomponents_mbgl](https://iclient.supermap.io/examples/component/examples.html#reactcomponents_mbgl)
npm package: @supermap/vue-iclient-leaflet
Description: SuperMap iClient for Vue.js
Author: SuperMap_FE
Latest version: 11.1.1

# vue-iclient-leaflet

## 简介
* 官网：[https://iclient.supermap.io](https://iclient.supermap.io)
* 源码：[https://github.com/SuperMap/vue-iclient](https://github.com/SuperMap/vue-iclient)

## 安装

```
npm install @supermap/vue-iclient-leaflet
```

## 开发

在 main.js 中写入以下内容：

```js
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-leaflet';
import App from './App.vue';

Vue.use(VueiClient);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

## 示例
 [https://iclient.supermap.io/examples/component/examples.html#vuecomponents_leaflet](https://iclient.supermap.io/examples/component/examples.html#vuecomponents_leaflet)
npm package: @supermap/vue-iclient-mapboxgl
Description: SuperMap iClient for Vue.js
Author: SuperMap_FE
Latest version: 11.1.1

# vue-iclient-mapboxgl

## 简介
* 官网：[https://iclient.supermap.io](https://iclient.supermap.io)
* 源码：[https://github.com/SuperMap/vue-iclient](https://github.com/SuperMap/vue-iclient)
* 文档：[https://iclient.supermap.io/web/apis/vue/zh/api/guide/installation.html](https://iclient.supermap.io/web/apis/vue/zh/api/guide/installation.html)

## 安装

```
npm install @supermap/vue-iclient-mapboxgl
```

## 开发

在 main.js 中写入以下内容：

```js
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
import App from './App.vue';

Vue.use(VueiClient);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

## 示例
 [https://iclient.supermap.io/examples/component/examples.html#vuecomponents_mbgl](https://iclient.supermap.io/examples/component/examples.html#vuecomponents_mbgl)