WEBGIS开发教程

Appearance

章节导航

使用技术

  • roolup
  • jsdoc

1. 初始化工程 ​

1.1 创建初始化工程 ​

通过命令npm init -y完成工程的初始化，初始化完成后会在工程根目录下创建一个package.json。

1.2 安装依赖 ​

修改package.json文件，添加devDependencies，修改部分如下：

json
{
  ...,
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "@rollup/plugin-commonjs": "^19.0.2",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "rollup": "^2.55.0",
    "rollup-obfuscator": "^3.0.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-import-css": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-uglify": "^6.0.4"
  }
}

完了可通过yarn或者npm i或者cnpm i安装依赖。

1.3 安装jsdoc ​

通过命令npm install jsdoc –g全局安装jsdoc.

2.创建配置文件 ​

在根目录下创建文件夹config，下面有三个文件。

2.1 开发时配置文件 ​

开发时配置文件为rollup.config.dev.js，文件内容如下：

js
import babel from 'rollup-plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
import css from "rollup-plugin-import-css";

export default {
  input: "./src/index.js",
  output: [
    {
      file: './dist/lzugis-map.js',
      name: 'LzugisMap',
      format: 'umd',
      sourcemap: false
    }
  ],
  plugins: [
    serve({
      contentBase: 'dist', // 服务器启动的文件夹，默认是项目根目录
      port: 18080 // 端口号
    }),
    livereload('dist'), // 监听dist目录
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    css()      
  ]
}

2.2 打包时配置文件 ​

打包时配置文件为rollup.config.js，文件内容如下：

js
import babel from 'rollup-plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import { obfuscator } from 'rollup-obfuscator';
import { uglify } from 'rollup-plugin-uglify'
import css from "rollup-plugin-import-css";

export default {
  input: "./src/index.js",
  output: [
    {
      file: './dist/lzugis-map.min.js',
      name: 'LzugisMap',
      format: 'umd',
      sourcemap: false
    }
  ],
  plugins: [
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    css(),
    obfuscator(),
    // js 压缩插件，需要在最后引入
    uglify()
  ]
}

2.3 jsdoc配置文件 ​

jsdoc配置文件jsdoc.config.js，文件内容如下：

js
'use strict'
module.exports = {
  'tags': {
    'allowUnknownTags': true
  },
  'source': {
    'include': ['./src'],
    'includePattern': '.+\\lzugis-map.js',
    'excludePattern': '(^|\\/|\\\\)_'
  },
  'plugins': ['plugins/markdown'],
  'recurseDepth': 10,
  'templates': {
    'cleverLinks': false,
    'monospaceLinks': false,
    'default': {
      'outputSourceFiles': false
    }
  },
  opts: {
    // 文档输出路径
    destination: './dist/docs',
    encoding: 'utf8',
    private: true,
    recurse: true,
    readme: './README.MD'
  }
}

3. 创建jsdoc首页与入口文件 ​

3.1 jsdoc首页 ​

如上2.3的jsdoc配置文件，jsdoc首页文件为readme配置中的md文件，文件位于主目录下。

3.2 入口文件 ​

如上2.1或2.2中的配置，入口文件为input配置，一般位于src/index.js

3.3 添加脚本 ​

修改package.json文件，添加script运行执行脚本。

json
{
  ...,
  "scripts": {
    "lib:dev": "rollup -wc ./config/rollup.config.dev.js",
    "lib": "rollup -c ./config/rollup.config.js",
    "doc": "jsdoc -c ./config/jsdoc.config.js"
  }
}

4. 开发与发布SDK ​

4.1 开发SDK ​

运行命令npm run lib:dev，会在工程根目录下创建dist目录，并生成2.1配置中lzugis-map.js文件， 在目录中创建index.html、js/index.js、css/index.css三个文件。

  • index.html文件内容如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lzugis map</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<script src="lzugis-map.js"></script>
<script src="js/index.js"></script>
</body>
</html>
  • js/index.js文件内容如下：
js
const lzugisMap = new LzugisMap()
  • css/index.css文件内容如下：
css
* {
    font-size: 14px;
    margin: 0;
    padding: 0;
}

4.2 添加ol ​

运行命令npm i ol -S安装依赖，安装完修改/src/index.js的内容如下：

js
import "../node_modules/ol/ol.css";
import Map from 'ol/Map.js';
import XYZ from 'ol/source/XYZ.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import * as olProj from 'ol/proj';

/**
 * @class LzugisMap
 * @classdesc lzugismap
 * @param {String | HTMLElement} [dom = 'map'] - map容器
 */
class LzugisMap {
    constructor(dom = 'map') {
        this.dom = typeof dom === 'string' ? document.getElementById(dom) : dom
        this._initMap()
    }

    _initMap() {
        this._view = new View({
            center: [0, 0],
            zoom: 2,
        })
        this.map = new Map({
            target: this.dom,
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url: 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=m&x={x}&y={y}&z={z}'
                    }),
                }),
            ],
            view: this._view,
        });
    }

    /**
     * 设置地图中心
     * @param {Coords} coords - 中心点坐标
     * @param {String} [srcProj='EPSG:4326'] - 源投影
     * @param {String} [destProj='EPSG:3857'] - 目标投影
     */
    setCenter(coords, srcProj = 'EPSG:4326', destProj= 'EPSG:3857') {
        coords = olProj.fromLonLat(coords, srcProj, destProj)
        this._view.setCenter(coords)
    }
}

export default LzugisMap;

修改css/index.css文件，添加如下内容：

css
html, body, .map {
    height: 100%;
    overflow: hidden;
}

修改index.html文件，内容如下：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lzugis map</title>
    <link type="text/css" rel="stylesheet" href="lzugis-map.css">
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="map" id="map"></div>
<script src="lzugis-map.js"></script>
<script src="js/index.js"></script>
</body>
</html>

运行后效果如下： sdk-map

4.3 打包SDK ​

运行命令npm run lib，会在dist目录下生成2.2配置中lzugis-map.min.js文件.

4.4 生成API文档 ​

运行命令npm run doc,会在dist目录下生成2.3配置中docs文件夹，并生成API文档。 生成后的API文档如下： sdk-doc

Copyright © 2023 LZUGIS