示例：使用 Webpack 构建 SuperMap iClient Classic 项目

最新推荐文章于 2024-04-22 09:31:14 发布

hgy9473

最新推荐文章于 2024-04-22 09:31:14 发布

阅读量1k

点赞数

分类专栏： SuperMap GIS 前端

本文链接：https://blog.csdn.net/hgy9473/article/details/86666433

版权

SuperMap 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

GIS

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

示例：使用 Webpack 构建 SuperMap iClient Classic 项目

本文参考了 SuperMap 技术控和 SuperMap iClient 官网相关的实现方式的介绍。

1. 新建项目目录以及初始化

// 新建目录并进入目录
mkdir demo && cd demo
// 新建 dist 和 src 目录
mkdir dist src

// 初始化项目，生成 package.json 文件
npm init -y

得到的项目结构如下：


demo
├─dist
└─src
└─package.json

2. 安装 webpack

npm install webpack webpack-cli --save-dev

3. 安装 babel

npm install babel-core babel-preset-env babel-preset-stage-3  babel-loader@7 --save-dev

4. 安装 @supermap/iclient-classic

npm install --save @supermap/iclient-classic

到此，依赖基本安装完成。2、3、 4 步骤安装的依赖如下：

+-- @supermap/iclient-classic@9.1.1
+-- babel-core@6.26.3
+-- babel-loader@7.1.5
+-- babel-preset-env@1.7.0
+-- babel-preset-stage-3@6.24.1
+-- webpack@4.29.0
`-- webpack-cli@3.2.1

5. 引入SuperMap iClient for JavaScript 8C的相关库

由于 iclient-classic 是以 SuperMap iClient for JavaScript 8C 为基础的，所以还需要引入 SuperMap iClient for JavaScript 8C 的相关库。

到 Github https://github.com/SuperMap/iClient-JavaScript/releases 下载发布的 zip 包。这里需要 zip 包中的 src/classic/libs 和 src/classic/theme 下的文件。

SuperMap iClient JavaScript 9D(2019) SP1.zip

拷贝 src/classic/libs 到 demo/src/supermap811/
拷贝 src/classic/theme 到 demo/

6. 新建 HTML 文件

在 demo/dist 目录下新建 index.html 文件

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <div id="map" style="height:600px;"></div>
    <script src="./main.js"></script>
</body>

</html>

7. 新建 js 文件

在 demo/src 目录下新建 index.js 文件

// src/index.js
import '~/supermap811/libs/SuperMap-8.1.1-16820'
import classic from '@supermap/iclient-classic';

var map,
    layer,
    url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";

//初始化地图
map = new SuperMap.Map("map", {
    controls: [
        new SuperMap.Control.Navigation(),
        new SuperMap.Control.Zoom()]
    }
);

map.addControl(new SuperMap.Control.MousePosition());

//初始化图层
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, { maxResolution: "auto" });

//监听图层信息加载完成事件
layer.events.on({ "layerInitialized": addLayer });

function addLayer() {
    map.addLayer(layer);
    //显示地图范围
    map.setCenter(new SuperMap.LonLat(0, 0), 0);
}

8. 配置 8C JS 库

注意 js 文件中的第一行 import '~/supermap811/libs/SuperMap-8.1.1-16820'，这一行的正常执行需要在 webpack 的配置文件中给 src 目录配置别名。

在 demo 目录下新建 webpack.config.js 文件

// webpack.config.js
const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {

                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, "node_modules/@supermap/iclient-common"),
                    path.resolve(__dirname, "node_modules/@supermap/iclient-leaflet"),
                    path.resolve(__dirname, "node_modules/elasticsearch"),
                ]
            }
        ]
    },

// 给 src 目录配置别名
    resolve: {
        alias: {
         '~':path.resolve(__dirname,'src')
        }
    }
};

9. 执行构建

在 package.json 配置快捷命令

// package.json
"scripts": {
	"build": "webpack"
},

执行 npm run build
npm run build 输出截图
项目结构截图

执行结束之后将会在 demo/dist 下面生成 main.js 文件，在浏览器中打开 demo/dist/index.html 即可看到地图。

代码运行效果

后记

本文只是记录了调通程序的过程，没有深究技术细节，部分配置或代码可能是冗余的。

参考资料

【1】基于webpack构建SuperMap iClient for JavaScript 9D项目. SuperMap 技术控.
【2】http://iclient.supermap.io/

hgy9473

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录