准备

获取与引入 Leaflet 和 SuperMap iClient for Leaflet

在开发前,需要在您的项目中引入 Leaflet 和 SuperMap iClient for Leaflet。其中,Leaflet 具体包括 CSS 文件和 JavaScript 文件。你可以通过以下几种方式获取这些文件:

Leaflet

SuperMap iClient for Leaflet

下载文件后,只需要像普通的 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.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.bootcss.com/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.bootcss.com/leaflet/1.2.0/leaflet.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.bootcss.com/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/[email protected]/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']
        }
    }]
}

results matching ""

    No results matching ""