Javascript Shapefile/kml/geojson 转换
三个需求
- 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 folder var options = { folder: 'myshapes', types: { point: 'mypoints', polygon: 'mypolygons', line: 'mylines' } } // a GeoJSON bridge for features shpwrite.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引入:
<script src='https://unpkg.com/tokml@0.4.0/tokml.js'> <script src='https://unpkg.com/file-saver@2.0.0-rc.2/dist/FileSaver.js'>
使用如下:
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>
站外博客地址:https://blog.yuhang.ch
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战