js读取渲染shp文件
2019-03-28 17:36:11 来源：admin 点击：1955
首先 js简析shp文件 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js读取shp文件</title>
<script src="shp.js"></script>
<style type="text/css">
#canvas{
border: 1px solid #ADACB0;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<div onclick="draw()" style="background-color:#a5c161">直接绘制</div>
<input type="file" accept="*.shp" onchange="openfile(this)"/>
<canvas id="canvas" width="720" height="360">
你的浏览器还不支持canvas
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//设置样式
context.lineWidth = 1;
context.strokeStyle = "#F5270B";
/*
直接获取服务端shp文件绘制
*/
function draw() {
SHPParser.load('china.shp',
function(res) {
console.log('ok', res);
context.clearRect(0, 0, canvas.width, canvas.height);
for(var i=0;i<res.records.length;i++){
var points=res.records[i].shape.content.points;
//绘制每一个折线
context.beginPath();
context.moveTo(4.0*points[0],2.0*(180.0-2.0*points[1]));
for(var j=1;j<points.length/2;j++){
context.lineTo(4.0*points[j*2],2.0*(180.0-2.0*points[j*2+1]));
}
//绘制
context.stroke();
}
},
function(res){ console.log('error', res); }
);
}
/*
打开本地shp文件绘制
*/
function openfile(obj) {
if (obj.files) { } else {
alert('未选中文件！');
return;
}
var file = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
//e.target.result;
//var buffer = new ArrayBuffer(e.target.result);
SHPParser.loadArrayBuffer(e.target.result,
function (res) {
console.log('ok', res);
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < res.records.length; i++) {
var points = res.records[i].shape.content.points;
//绘制每一个折线
context.beginPath();
context.moveTo(4.0 * points[0], 2.0 * (180.0 - 2.0 * points[1]));
for (var j = 1; j < points.length / 2; j++) {
context.lineTo(4.0 * points[j * 2], 2.0 * (180.0 - 2.0 * points[j * 2 + 1]));
}
//绘制
context.stroke();
}
if (obj != null) {
obj.value = null;
}
},
function () { alert('读取错误！'); }
);
//obj.value = null;
};
reader.readAsArrayBuffer(file);//readAsArrayBuffer readAsBinaryString
}
</script>
</body>
</html>