1.5.3.2.1 准备

优质

小牛编辑

128浏览

2023-12-01

获取和引入OpenLayers 和 SuperMap iClient for OpenLayers

开发时需要引入 OpenLayers 和 SuperMap iClient for OpenLayers。其中，OpenLayers 具体包括 CSS 文件和 JS 文件。你可以通过以下几种方式获取这些文件：

OpenLayers

通过 OpenLayers 官网下载 OpenLayers.zip
在 OpenLayers 的 GitHub 上下载

SuperMap iClient for OpenLayers

通过 SuperMap iClient JavaScript 官网下载最新版本
在 SuperMap iClient for OpenLayers 的 GitHub 中下载 release 版本

获取文件后，只需要像普通的 JavaScript 库一样用 <script> 标签引入即可。

文件方式引入

以下详细介绍如何通过 CDN 在线引入 OpenLayers 文件，以及如何通过在线站点引入 SuperMap iClient for OpenLayers。

新建一个 HTML 文件，在 <head> 标签中引入 OpenLayers CSS 文件和 JavaScript 文件，写入 BootCDN 的托管地址，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
</head>
</html>

引入 iclient9-openlayers.js 或 iclient9-openlayers.min.js，写入 SuperMap iClient for OpenLayers 在线站点地址：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
    <script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-openlayers.min.js"></script>
</head>
</html>

npm 方式引入

在命令行中输入以下命令安装 SuperMap iClient for OpenLayers：

npm install @supermap/iclient-openlayers

引入 CSS

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

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

引入模块

ES6

部分模块引入

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);

全模块引入

import ol from 'openlayers';
import '@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 ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    });
});
var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);

CommonJS

部分模块引入

var ol = require('openlayers');
var Logo = require('@supermap/iclient-openlayers').Logo;
var TileSuperMapRest = require('@supermap/iclient-openlayers').TileSuperMapRest;

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);

全模块引入

var ol = require('openlayers');
require('@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 ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);

打包配置

由于 SuperMap iClient for OpenLayers 使用了 ES6 语法，为了兼容不支持 ES6 语法的浏览器，需要在打包的过程中进行一些配置，包括语法转换的处理。

这里以 webpack 打包工具为例，您需要在 webpack.config.js 的配置文件的 module 中加入如下配置项：

module: {
    rules: [{
        // 使用babel-loader将ES6语法转换为ES5
        test: /\.js$/,
        include: [
            path.resolve(__dirname, "node_modules/@supermap/iclient-common"),
            path.resolve(__dirname, "node_modules/@supermap/iclient-openlayers"),
            // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
            path.resolve(__dirname, "node_modules/elasticsearch"),
        ],
        loader: 'babel-loader',
        options: {
            presets: ['es2015']
        }
    }]
}