开发时需要引入 MapLibreGL 和 SuperMap iClient for MapLibreGL。其中,MapLibreGL 具体包括 CSS 文件和 JS
文件。你可以通过以下方式获取这些文件:
引入
文件方式引入
以下详细介绍如何在线引入 MapLibreGL 文件,以及如何通过在线站点引入 SuperMap iClient for MapLibreGL。
新建一个 HTML 文件,在 <head> 标签中引入 MapLibreGL CSS 文件和 JS 文件,填入 UNPKG 的托管地址,如下:
引入 iclient-maplibregl CSS 文件和 JS 文件,填入 SuperMap iClient for MapLibreGL
在线站点地址:
npm 方式引入
使用此方式前请先检查电脑中是否已安装应用程序 Node.js,若未安装,可通过下载 安装程序 来安装。然后在命令行中输入以下命令安装 SuperMap iClient
for MapLibreGL:
引入 CSS
新建一个 HTML 文件,在 <head> 标签中引入 MapLibreGL CSS 文件 和 iclient-maplibregl CSS 文件,如下:
模块化开发
ES6
开发前需使用 npm 安装依赖,然后通过 ES6 的 import 模块加载语法引入相应的模块。
按需引入
首先,安装 @supermap/babel-plugin-import:
然后,在.babelrc 中添加如下配置:
接下来,如果你只希望引入部分组件,比如 QueryByBoundsParameters,
QueryService,那么需要写入以下内容:
全模块引入
CommonJS
CommonJS 是基于 Node.js 环境的 JavaScript 模块化规范。开发前需使用 npm 安装依赖,然后通过 require
方法引入相应的模块。
部分模块引入
全模块引入
AMD
以下例子利用 RequireJS 库实现,将 maplibre-gl.js 和 iclient-maplibregl.js 通过 “
获取 MapLibreGL 和 SuperMap iClient for MapLibreGL ” 下载后放在与
RequireJS
指定的入口主文件所在目录下。
全模块引入
CMD
以下例子利用 SeaJS 库实现,将 maplibre-gl.js 和 iclient-maplibregl.js 通过 “
获取 MapLibreGL 和 SuperMap iClient for MapLibreGL ” 下载后放在与
SeaJS
指定的入口主文件所在目录下。
全模块引入
打包配置
SuperMap iClient for MapLibreGL 使用了 ES6 语法,为了兼容不支持 ES6
语法的浏览器,需要在打包的过程中进行一些配置,包括语法转换的处理。
这里的打包配置是针对于 ES6 和 CommonJS 模块开发,对于 AMD 和 CMD 模块开发的项目,
不需要利用打包工具。
这里以 webpack4 为例,由于使用不同的包管理器会导致安装包的结构有所不同,所以下面分别介绍了 npm 和 cnpm 两种配置方式:
若您用 npm install
或者 cnpm install --by=npm
安装的依赖,那么您需要在
webpack.config.js 的配置文件的 module 中加入如下配置项:
若您用 cnpm install
安装的依赖,那么您需要在 webpack.config.js 的配置文件的 module 中加入如下配置项: