Javascript Shapefile/kml/geojson 转换

三个需求

  • geojson -> shapefile 并下载
  • geojson -> kml 并下载
  • Shapefile (zipped) -> geojson

geojson构建工具

这里选择常用的Javascript的几何计算类库[turfjs/turf]

使用cdn引入:

1<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
2<script>
3    var bbox = turf.bbox(features);
4</script>

或者:

1npm install @turf/turf
1import * as turf from '@turf/turf'

以折线为例:

1let line_string = turf.lineString([[-24, 63, 1], [-23, 60, 2], [-25, 65, 3], [-20, 69, 4]], { name: 'line 1' });
2let geojson_object = turf.featureCollection([
3      line_string
4]);

打印对象如下:

 1{
 2  "type": "FeatureCollection",
 3  "features": [
 4    {
 5      "type": "Feature",
 6      "properties": {
 7        "name": "line 1"
 8      },
 9      "geometry": {
10        "type": "LineString",
11        "coordinates": [
12          [
13            -24,
14            63,
15            1
16          ],
17          [
18            -23,
19            60,
20            2
21          ],
22          [
23            -25,
24            65,
25            3
26          ],
27          [
28            -20,
29            69,
30            4
31          ]
32        ]
33      }
34    }
35  ]
36}

geojson 转 shapefile

使用[mapbox/shp-write]

使用npm安装:

1npm install --save shp-write

或者直接引入,之后直接使用shpwrite变量:

1<script src='https://unpkg.com/shp-write@latest/shpwrite.js'>
2

API很直观:

 1import shpwrite  from "shp-write";
 2
 3// (optional) set names for feature types and zipped folder
 4var options = {
 5    folder: 'myshapes',
 6    types: {
 7        point: 'mypoints',
 8        polygon: 'mypolygons',
 9        line: 'mylines'
10    }
11}
12// a GeoJSON bridge for features
13shpwrite.download(geojson_object, options);

这里需注意一个问题,因为该包长时间没人维护,目前使用会出现以下问题:

1Error: This method has been removed in JSZip 3.0, please check the upgrade guide.

参考[issue 48],将原shpwrite.js文件修改如下:

 1// ##### replace this:
 2var generateOptions = { compression:'STORE' };
 3
 4if (!process.browser) {
 5  generateOptions.type = 'nodebuffer';
 6}
 7
 8return zip.generate(generateOptions);
 9
10// ##### with this:
11var generateOptions = { compression:'STORE', type:'base64' };
12
13if (!process.browser) {
14  generateOptions.type = 'nodebuffer';
15}
16
17return zip.generateAsync(generateOptions);
18
19// ##### and this:
20module.exports = function(gj, options) {
21  var content = zip(gj, options);
22  location.href = 'data:application/zip;base64,' + content;
23};
24
25// ##### with this:
26module.exports = function(gj, options) {
27  zip(gj, options).then(function(content) {
28    location.href = 'data:application/zip;base64,' + content;
29  });
30};

geojson转kml

使用[mapbox/tokml]包和[eligray/FileSaver]文件下载包

npm安装:

1npm install --save tokml file-saver

使用cdn引入:

1<script src='https://unpkg.com/tokml@0.4.0/tokml.js'>
2<script src='https://unpkg.com/file-saver@2.0.0-rc.2/dist/FileSaver.js'>
3  

使用如下:

1var kml_doc = tokml(geojson_object, {
2            documentName: 'doc name',
3            documentDescription: "doc description"
4        });
5var file_name = "polyline"
6var kml_file = new File([kml_doc], `${file_name}.kml`, { type: "text/xml;charset=utf-8" });
7        // FileSaver.saveAs()
8saveAs(kml_file);

Shapefile(zipped) 转 geojson

使用[calvinmetcalf/shapefile-js]包,以cdn引入为例

1<script src="https://unpkg.com/shpjs@latest/dist/shp.js">
 1<!DOCTYPE html>
 2<html lang="en">
 3
 4<head>
 5    <meta charset="UTF-8">
 6    <title>shapefile to geojson</title>
 7</head>
 8
 9<input type="file" id="upload">
10<script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
11
12<body>
13    <script>
14        var Upload = document.getElementById("upload");
15        Upload.onchange = function () {  
16            var fileList = Upload.files; 
17            if (fileList.length < 1) {
18                return;
19            }
20            var zip_file = fileList[0];
21            zip_file.arrayBuffer().then((file) => {
22                shp(file).then((geojson) => {
23                    console.log(geojson);
24                });
25            })
26        }
27    </script>
28</body>
29
30</html>
Last edited : 2022-04-26 19:01