GDAL3.js 开源项目教程

GDAL3.js 开源项目教程

gdal3.jsConvert raster and vector geospatial data to various formats and coordinate systems entirely in the browser.项目地址:https://gitcode.com/gh_mirrors/gd/gdal3.js

1. 项目的目录结构及介绍

GDAL3.js 项目的目录结构如下：

gdal3.js/
├── apps/
│   ├── app-gui/
│   ├── example-module-browser/
│   ├── example-node/
│   └── example-browser/
├── dist/
│   └── package/
├── src/
│   ├── gdal/
│   ├── proj/
│   ├── geos/
│   ├── spatialite/
│   ├── sqlite/
│   ├── geotiff/
│   ├── tiff/
│   ├── webp/
│   ├── expat/
│   ├── zlib/
│   └── iconv/
├── static/
├── tests/
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• apps/: 包含多个示例应用程序，如 app-gui、example-module-browser、example-node 和 example-browser。
• dist/: 包含编译后的包文件。
• src/: 包含 GDAL 及其依赖库的源代码。
• static/: 静态资源文件。
• tests/: 测试文件。
• .gitignore: Git 忽略文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 apps/ 目录下的各个示例应用程序中。以下是一些关键的启动文件：

app-gui/src/App.vue

<template>
  <div>Number of drivers: [[ count ]]</div>
</template>

<script setup>
import { ref } from 'vue';
import workerUrl from 'gdal3.js/dist/package/gdal3.js.url';
import dataUrl from 'gdal3.js/dist/package/gdal3WebAssembly.data.url';
import wasmUrl from 'gdal3.js/dist/package/gdal3WebAssembly.wasm.url';
import initGdalJs from 'gdal3.js';

const paths = {
  wasm: wasmUrl,
  data: dataUrl,
  js: workerUrl
};
const count = ref(0);

initGdalJs([paths]).then((Gdal) => {
  count.value = Object.keys(Gdal.drivers.raster).length + Object.keys(Gdal.drivers.vector).length;
});
</script>

example-node/index.js

const initGdalJs = require('gdal3.js/node');

initGdalJs().then((Gdal) => {
  // 使用 Gdal 进行操作
});

example-browser/index.js

import initGdalJs from 'gdal3.js';

initGdalJs().then((Gdal) => {
  // 使用 Gdal 进行操作
});

3. 项目的配置文件介绍

package.json

{
  "name": "gdal3.js",
  "version": "1.0.0",
  "description": "GDAL compiled to JavaScript",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "gdal3.js": "^2.8.1"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "jest": "^27.0.0"
  }
}

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'node_modules/gdal3.js/dist/package/gdal3WebAssembly.wasm', to: 'static' },
        { from: 'node_modules/gdal3.js/dist/package/gdal3WebAssembly.data', to: 'static' }
      ]
    })

gdal3.jsConvert raster and vector geospatial data to various formats and coordinate systems entirely in the browser.项目地址:https://gitcode.com/gh_mirrors/gd/gdal3.js