三个需求
- geojson -> shapefile 并下载
- geojson -> kml 并下载
- Shapefile (zipped) -> geojson
geojson 构建工具
这里选择常用的 Javascript 的几何计算类库[turfjs/turf]
使用 cdn 引入:
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script><script> var bbox = turf.bbox(features)</script>
或者:
npm install @turf/turf
import * as turf from '@turf/turf'
以折线为例:
let line_string = turf.lineString( [ [-24, 63, 1], [-23, 60, 2], [-25, 65, 3], [-20, 69, 4] ], { name: 'line 1' })let geojson_object = turf.featureCollection([line_string])
打印对象如下:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "line 1" }, "geometry": { "type": "LineString", "coordinates": [ [-24, 63, 1], [-23, 60, 2], [-25, 65, 3], [-20, 69, 4] ] } } ]}
geojson 转 shapefile
使用 npm 安装:
npm install --save shp-write
或者直接引入,之后直接使用 shpwrite 变量:
<script src='https://unpkg.com/shp-write@latest/shpwrite.js'>
API 很直观:
import shpwrite from 'shp-write'
// (optional) set names for feature types and zipped foldervar options = { folder: 'myshapes', types: { point: 'mypoints', polygon: 'mypolygons', line: 'mylines' }}// a GeoJSON bridge for featuresshpwrite.download(geojson_object, options)
这里需注意一个问题,因为该包长时间没人维护,目前使用会出现以下问题:
Error: This method has been removed in JSZip 3.0, please check the upgrade guide.
参考[issue 48],将原 shpwrite.js 文件修改如下:
// ##### replace this:var generateOptions = { compression: 'STORE' }
if (!process.browser) { generateOptions.type = 'nodebuffer'}
return zip.generate(generateOptions)
// ##### with this:var generateOptions = { compression: 'STORE', type: 'base64' }
if (!process.browser) { generateOptions.type = 'nodebuffer'}
return zip.generateAsync(generateOptions)
// ##### and this:module.exports = function (gj, options) { var content = zip(gj, options) location.href = 'data:application/zip;base64,' + content}
// ##### with this:module.exports = function (gj, options) { zip(gj, options).then(function (content) { location.href = 'data:application/zip;base64,' + content })}
geojson 转 kml
使用[mapbox/tokml]包和[eligray/FileSaver]文件下载包
npm 安装:
npm install --save tokml file-saver
使用 cdn 引入:
使用如下:
var kml_doc = tokml(geojson_object, { documentName: 'doc name', documentDescription: 'doc description'})var file_name = 'polyline'var kml_file = new File([kml_doc], `${file_name}.kml`, { type: 'text/xml;charset=utf-8'})// FileSaver.saveAs()saveAs(kml_file)
Shapefile (zipped) 转 geojson
使用[calvinmetcalf/shapefile-js]包,以 cdn 引入为例
<script src="https://unpkg.com/shpjs@latest/dist/shp.js">
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>shapefile to geojson</title> </head>
<input type="file" id="upload" /> <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
<body> <script> var Upload = document.getElementById('upload') Upload.onchange = function () { var fileList = Upload.files if (fileList.length < 1) { return } var zip_file = fileList[0] zip_file.arrayBuffer().then((file) => { shp(file).then((geojson) => { console.log(geojson) }) }) } </script> </body></html>