Javascript Shapefile/kml/geojson 转换
<h2 id="三个需求">三个需求</h2><ul>
<li>geojson -> shapefile 并下载</li>
<li>geojson -> kml 并下载</li>
<li>Shapefile (zipped) -> geojson</li>
</ul>
<h2 id="geojson构建工具">geojson构建工具</h2>
<p>这里选择常用的Javascript的几何计算类库</p>
<p>使用cdn引入：</p>
<pre><code><script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
<script>
var bbox = turf.bbox(features);
</script>
</code></pre>
<p>或者：</p>
<pre><code class="language-shell">npm install @turf/turf
</code></pre>
<pre><code>import * as turf from '@turf/turf'
</code></pre>
<p>以折线为例：</p>
<pre><code class="language-javascript">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
]);
</code></pre>
<p>打印对象如下：</p>
<pre><code class="language-json">{
"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
]
]
}
}
]
}
</code></pre>
<h2 id="geojson-转-shapefile">geojson 转 shapefile</h2>
<p>使用包</p>
<p>使用npm安装：</p>
<pre><code class="language-shell">npm install --save shp-write
</code></pre>
<p>或者直接引入，之后直接使用shpwrite变量：</p>
<pre><code class="language-html"><script src='https://unpkg.com/shp-write@latest/shpwrite.js'>
</code></pre>
<p>API很直观：</p>
<pre><code class="language-javascript">import shpwritefrom "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);
</code></pre>
<p>这里需注意一个问题，因为该包长时间没人维护，目前使用会出现以下问题：</p>
<pre><code class="language-shell">Error: This method has been removed in JSZip 3.0, please check the upgrade guide.
</code></pre>
<p>参考，将原shpwrite.js文件修改如下:</p>
<pre><code class="language-javascript">// ##### 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;
});
};
</code></pre>
<h2 id="geojson转kml">geojson转kml</h2>
<p>使用包和文件下载包</p>
<p>npm安装：</p>
<pre><code class="language-shell">npm install --save tokml file-saver
</code></pre>
<p>使用cdn引入：</p>
<pre><code class="language-html"><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'>
</code></pre>
<p>使用如下：</p>
<pre><code class="language-javascript">var kml_doc = tokml(geojson_object, {
documentName: 'doc name',
documentDescription: "doc description"
});
var file_name = "polyline"
var kml_file = new File(, `${file_name}.kml`, { type: "text/xml;charset=utf-8" });
// FileSaver.saveAs()
saveAs(kml_file);
</code></pre>
<h2 id="shapefilezipped-转-geojson">Shapefile(zipped) 转 geojson</h2>
<p>使用包，以cdn引入为例</p>
<pre><code class="language-html"><script src="https://unpkg.com/shpjs@latest/dist/shp.js">
</code></pre>
<pre><code class="language-html"><!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;
zip_file.arrayBuffer().then((file) => {
shp(file).then((geojson) => {
console.log(geojson);
});
})
}
</script>
</body>
</html>
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
<div>站外博客地址：https://blog.yuhang.ch</div><br><br>
来源：https://www.cnblogs.com/yuhangch/p/json-shp-kml.html
頁:
[1]