|  | 
| 1 |  | -# @supermap/iclient-openlayers | 
|  | 1 | +# @supermap/iclient-ol | 
| 2 | 2 | 
 | 
| 3 |  | -@supermap/iclient-openlayers 是一套基于 OpenLayers 的云 GIS 网络客户端开发平台, 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源,为用户提供了完整专业的 GIS 能力, 同时提供了优秀的可视化功能。 | 
| 4 |  | - | 
| 5 |  | -目前支持的OpenLayers版本为4.6.5,最新的5.x支持版本还在开发中。 | 
|  | 3 | +@supermap/iclient-ol 是一套基于 OpenLayers 的云 GIS 网络客户端开发平台, 支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源,为用户提供了完整专业的 GIS 能力, 同时提供了优秀的可视化功能。 | 
| 6 | 4 | 
 | 
| 7 | 5 | ## 简介 | 
| 8 | 6 | * 官网:[https://iclient.supermap.io](https://iclient.supermap.io) | 
|  | 
| 11 | 9 | ## 安装 | 
| 12 | 10 | 
 | 
| 13 | 11 | ``` | 
| 14 |  | - npm install @supermap/iclient-openlayers | 
|  | 12 | + npm install @supermap/iclient-ol | 
| 15 | 13 | ``` | 
|  | 14 | +如果您使用的是 OpenLayers 4,请参考此[文档](https://www.npmjs.com/package/@supermap/iclient-openlayers/v/10.0.0)安装 SuperMap iClient for OpenLayers。 | 
| 16 | 15 | 
 | 
| 17 | 16 | ## 开发 | 
| 18 | 17 | 
 | 
| 19 | 18 | 在 HTML 文件中引入 CSS 文件 | 
| 20 | 19 | 
 | 
| 21 | 20 | ```html | 
| 22 |  | -<link href='https://openlayers.org/en/v4.6.5/css/ol.css' rel='stylesheet' /> | 
| 23 |  | - | 
| 24 |  | -<link href='https://iclient.supermap.io/dist/openlayers/iclient-openlayers.min.css' rel='stylesheet' /> | 
|  | 21 | +<link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css' rel='stylesheet' /> | 
| 25 | 22 | 
 | 
|  | 23 | +<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' /> | 
| 26 | 24 | ``` | 
| 27 | 25 | 在 JS 文件中加入如下代码 | 
| 28 | 26 | 
 | 
| 29 | 27 | ```js | 
| 30 |  | -import ol from 'openlayers'; | 
| 31 |  | -import {Logo, TileSuperMapRest} from '@supermap/iclient-openlayers'; | 
|  | 28 | +import Map from 'ol/Map'; | 
|  | 29 | +import View from 'ol/View'; | 
|  | 30 | +import TileLayer from 'ol/layer/Tile'; | 
|  | 31 | +import * as control from 'ol/control';  | 
|  | 32 | +import { Logo, TileSuperMapRest } from '@supermap/iclient-ol'; | 
| 32 | 33 | 
 | 
| 33 | 34 | var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"; | 
| 34 |  | -var map = new ol.Map({ | 
|  | 35 | +var map = new Map({ | 
| 35 | 36 |  target: 'map', | 
| 36 |  | - controls: ol.control.defaults({attributionOptions: {collapsed: false}}) | 
|  | 37 | + controls: control.defaults({attributionOptions: {collapsed: false}}) | 
| 37 | 38 |  .extend([new Logo()]), | 
| 38 |  | - view: new ol.View({ | 
|  | 39 | + view: new View({ | 
| 39 | 40 |  center: [0, 0], | 
| 40 | 41 |  zoom: 2, | 
| 41 | 42 |  projection: 'EPSG:4326' | 
| 42 | 43 |  }) | 
| 43 | 44 | }); | 
| 44 |  | -var layer = new ol.layer.Tile({ | 
|  | 45 | +var layer = new TileLayer({ | 
| 45 | 46 |  source: new TileSuperMapRest({ | 
| 46 | 47 |  url: url, | 
| 47 | 48 |  wrapX: true | 
|  | 
0 commit comments