-
Notifications
You must be signed in to change notification settings - Fork 8
/
index-prj.html
101 lines (97 loc) · 4.06 KB
/
index-prj.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js读取shp文件</title>
<script src="shp.js"></script>
<script src="./node_modules/proj4/dist/proj4-src.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('./data/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) {
var fromProj = 'PROJCS["WGS_1984_Albers",GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]],PROJECTION["Albers"],PARAMETER["standard_parallel_1",25],PARAMETER["standard_parallel_2",47],PARAMETER["latitude_of_origin",0],PARAMETER["central_meridian",105],PARAMETER["false_easting",0],PARAMETER["false_northing",0],UNIT["meters",1]]';
var toProj = 'GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]';
//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();
var pointProj0 = proj4(fromProj, toProj, [points[0], points[1]]);
console.log(pointProj0);
context.moveTo(4.0 * pointProj0[0], 2.0 * (180.0 - 2.0 * pointProj0[1]));
for (var j = 1; j < points.length / 2; j++) {
var pointProj = proj4(fromProj, toProj, [points[j * 2], points[j * 2 + 1]]);
//context.lineTo(4.0 * points[j * 2], 2.0 * (180.0 - 2.0 * points[j * 2 + 1]));
context.lineTo(4.0 * pointProj[0], 2.0 * (180.0 - 2.0 * pointProj[1]));
}
//绘制
context.stroke();
}
if (obj != null) {
obj.value = null;
}
},
function () { alert('读取错误！'); }
);
//obj.value = null;
};
reader.readAsArrayBuffer(file);//readAsArrayBuffer readAsBinaryString
}
</script>
</body>
</html>