准备
获取与引入 Leaflet 和 SuperMap iClient for Leaflet
在开发前，需要在您的项目中引入 Leaflet 和 SuperMap iClient for Leaflet。其中，Leaflet 具体包括 CSS 文件和 JavaScript 文件。你可以通过以下几种方式获取这些文件：
Leaflet
- 通过 Leaflet 官网 下载 Leaflet.zip
- 在 Leaflet 的 GitHub 中下载
SuperMap iClient for Leaflet
- 通过 SuperMap iClient JavaScript 官网下载最新版本
- 在 SuperMap iClient for Leaflet 的 GitHub 中下载 Release 版本
下载文件后，只需要像普通的 JavaScript 库一样用 <script> 标签引入即可。
文件方式引入
也可以无需下载文件，通过 CDN 直接引入 Leaflet 文件，通过在线站点引入 SuperMap iClient for Leaflet。
新建一个 HTML 文件，在 <head> 标签中引入 Leaflet CSS 文件和 JavaScript 文件，写入 BootCDN 的托管地址，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
</head>
</html>
引入 iclient9-leaflet.js 或 iclient9-leaflet.min.js，写入 SuperMap iClient for Leaflet 在线站点地址：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.2.0/leaflet.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
</head>
</html>
npm 方式引入
首先安装SuperMap iClient for Leaflet，在命令行中输入以下命令开始安装：
npm install @supermap/iclient-leaflet
安装完成后，在 npm 项目中使用 SuperMap iClient for Leaflet。
引入 CSS
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
<link rel="stylesheet" href="http://iclient.supermap.io/dist/leaflet/iclient9-leaflet.min.css"/>
引入模块
ES6
部分模块引入
import L from 'leaflet';
import {tiledMapLayer} from '@supermap/iclient-leaflet';
var url = "http://support.supermap.com.cn:8090/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);
全模块引入
import L from 'leaflet';
import '@supermap/iclient-leaflet';
var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);
CommonJS
部分模块引入
var L = require('leaflet');
var tiledMapLayer = require('@supermap/iclient-leaflet').tiledMapLayer;
var url = "http://support.supermap.com.cn:8090/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);
全模块引入
require('@supermap/iclient-leaflet');
var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);
打包配置
SuperMap iClient for Leaflet 使用了 ES6 语法，为了兼容不支持 ES6 语法的浏览器，需要在打包的过程中进行一些配置，包括语法转换的处理。
这里以 webpack 打包工具为例，您需要在 webpack.config.js 的配置文件的 module 中加入如下配置项：
module: {
rules: [{
// 加载图片，图片小于80k采用base64编码
test: /\.(png|jpg|jpeg|gif|woff|woff2|svg|eot|ttf)$/,
use: [{
loader: 'url-loader',
options: {
limit: 80000
}
}]
}, {
// 加载CSS文件
test: /\.css$/,
use: ['css-loader']
}, {
// 使用babel-loader将ES6语法转换为ES5
test: /\.js$/,
include: [
path.resolve(__dirname, "node_modules/@supermap/iclient-common"),
path.resolve(__dirname, "node_modules/@supermap/iclient-leaflet"),
// 由于iClient对Elasticsearch的API进行了封装，并且Elasticsearch也使用了ES6的语法，因此此处要对Elasticsearch的API进行标准转换
path.resolve(__dirname, "node_modules/elasticsearch"),
],
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}]
}