由于后端请求需要上传，解析，回传，影响数据的读取的效率，前端可以直接读取解析shp文件
需要借助开源js库 shapefile.js，https://github.com/calvinmetcalf/shapefile-js
在线示例：http://leaflet.calvinmetcalf.com/#3/32.69/10.55
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div class="leaflet-top leaflet-left">
<form class="bgroup leaflet-control" id="dropzone">
<input class="upStuff" type="file" id="input">
<button id="btnspan3" type="button">Upload File</button>
</form>
</div>
</body>
<script src="jquery-1.7.1.js"></script>
<script src="shp.js"></script>
<script src="JScript1.js"></script>
</html>JS:
$(document).ready(function () {
$("#btnspan3").click(function () {
var file = document.getElementById("input").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsArrayBuffer(file);
reader.onload = function () {
var fileData = this.result; //fileData就是读取到的文件的二进制数据
shp(fileData).then(function (geojson) {
var sd = 1;
});
}
});
});需要注意的是，shapefile.js默认对输入的数据进行了坐标转换，第23154行（解析shp坐标）和268行（坐标转换），根据prj坐标文件进行坐标转换，转换为wgs84，当我们需要其他椭球坐标系（非WGS84椭球）时，比如2000经纬度或者平面坐标系，转换就会报错，读取失败。
只需要把268行的trans.inverse去掉，改为
function makeParseCoord(trans) {
return function(data, offset) {
return [data.readDoubleLE(offset), data.readDoubleLE(offset + 8)];
};
}
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
