|
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