通过 js 进行 shapefile 文件解析渲染方法

通过HTML5的方式直接读取本地文件，将解析的二进制流按照shp 和dbf的格式读取后按照ol的规范拼装features并加载图层。

# 本地文件读取

借助H5的FileReader，可以轻松读取本地的文件（前提是在input type=file中已经加载）。

# html

<input type="file" id="shpFile">

# JS

var file=document.getElementById("shpFile");
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload=function(){
     var fileData = this.result ; //fileData就是读取到的文件的二进制数据
}

1
2
3
4
5
6
7

FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

# shp解析

借助开源 shapefile 的js解析库，我们可以轻松的解析shp，dbf这些数据格式。

shapefile库：https://github.com/mbostock/shapefile
Demo仓库地址：https://gitee.com/zlluGitHub/shapefile-shp-map-demo

# 其他资料

shapefile-js：https://gitee.com/zlluGitHub/shapefile-js

# WebGL绘制

使用的方法是每个Geometry绑定一个VAO和VBO，然后进行绘制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/shpjs@latest/dist/shp.js'> </script>
    <!-- openlayers cdn -->
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css">

    <style>
        html,
        body,
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log('WebGL not supported, falling back to experimental-webgl');
        }
        gl.clearColor(0.2, 0.3, 0.3, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);


        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, `
        attribute vec3 aPos;

            void main()
            {
                gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
            }
        `);
        gl.compileShader(vertexShader);
        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(vertexShader));
            gl.deleteShader(vertexShader);

        }

        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, `
            #version 100
            void main()
            {
                gl_FragColor  = vec4(1.0, 0.5, 0.2, 1.0);
            }
        `);
        gl.compileShader(fragmentShader);
        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(fragmentShader));
            gl.deleteShader(fragmentShader);

        }
        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
        }

        gl.useProgram(shaderProgram);


        shp('http://127.0.0.1:5500/province/province.zip').then(function (data) {
            console.log(data)
            var features = new ol.format.GeoJSON().readFeatures(data, {
                featureProjection: 'EPSG:3857'
            })
            var source = new ol.source.Vector({
                features: features
            })
            console.log(source)
            var minx, miny, maxx, maxy;
            [minx, miny, maxx, maxy] = source.getExtent();
            console.log(minx, miny, maxx, maxy)
            for (let i = 0; i < features.length; i++) {
                const feature = features[i];
                const geometry = feature.getGeometry();
                const coordinate = geometry.getCoordinates()[0];
                let lineString = []
                for (let j = 0; j < coordinate.length; j++) {
                    const point = coordinate[j];
                    let x = (point[0] - minx) / (maxx - minx) * 2 - 1;
                    let y = (point[1] - miny) / (maxy - miny) * 2 - 1;
                    lineString.push(x, y, 0.0);
                }
                const lineStringBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, lineStringBuffer);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(lineString), gl.STATIC_DRAW);

                gl.vertexAttribPointer(gl.getAttribLocation(shaderProgram, 'aPos'), 3, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(0)

                gl.drawArrays(gl.LINE_STRIP, 0, lineString.length / 3);
            }
        })
    </script>
</body>

</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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

效果图：

#ShapeFile

上次更新: 2024/01/30, 00:35:17

← 解决在使用 stable-diffusion-webui 时，安装 gfpgan 失败的方案（windows下的操作）部署脚本 deploy.sh→