H5的FileReader读取shp文件

最新推荐文章于 2024-01-16 17:07:39 发布
最新推荐文章于 2024-01-16 17:07:39 发布
阅读量1k 收藏
点赞数
分类专栏： ArcGIS JS 文章标签： FileReader读取shp文件 H5 CSV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WJSnowEagle/article/details/92841356
版权

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

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>ReaderSHP</title>

        <style type="text/css">
            html,
            body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            
            #mapPane,
            #map {
                height: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="./shapefile.js"></script>
        <script type="text/javascript" src="./dbf.js"></script>
        <script type="text/javascript" src="./binaryajax.js"></script>
        <script type="text/javascript" src="./binarywrapper.js"></script>

        <link rel="stylesheet" href="http://59.212.33.46/arcgis_js_v324_api/arcgis_js_api/library/3.24/3.24/esri/css/esri.css">
        <link rel="stylesheet" href="http://59.212.33.46/arcgis_js_v324_api/arcgis_js_api/library/3.24/3.24//dijit/themes/tundra/tundra.css">
        <script type="text/javascript" src="http://59.212.33.46/arcgis_js_v324_api/arcgis_js_api/library/3.24/3.24/init.js"></script>
        <script type="text/javascript">
            var map;
            require([
                "esri/map",
                "esri/graphic",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/ArcGISTiledMapServiceLayer",

                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/Color",
                "esri/geometry/Point",
                "esri/geometry/Polyline",
                "esri/geometry/Polygon",

                "dojo/parser",
                "dojo/domReady!",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane"
            ], function(Map, Graphic, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
                SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
                Color, Point, Polyline, Polygon) {

                map = new Map("map");
                var LayrUrl1 = "http://59.212.33.53:8080/OneMapServer/rest/services/DZ_Map/MapServer";
                var layer1 = new ArcGISTiledMapServiceLayer(LayrUrl1);
                map.addLayer(layer1);

            });

            function fileSelected(obj) {
                if(obj.files.length == 0) {
                    return;
                }
                var files = obj.files;
                if(files.length > 0) {
                    var file = files[0];
                    if((file.name.indexOf('.csv') !== -1) || (file.name.indexOf('.txt') !== -1)) { //txt与csv文本格式相同
                        if(file) {
                            handleCSV(file);
                        } else {

                        }
                    } else if((file.name.indexOf('.shp') !== -1)) {
                        //检验是否为shapefile
                        var isExistsSHP = false;
                        var fileSHP;
                        for(var idx = 0; idx < files.length; idx++) {
                            if(files[idx].name.substr(files[idx].name.lastIndexOf('.')).toLowerCase() == ".shp") {
                                isExistsSHP = true;
                                fileSHP = files[idx];
                            }
                        }
                        if(isExistsSHP == true) { //存在shp及dbf文件
                            var shpFile;
                            var bfSHP;
                            if(window.FileReader) {
                                var frSHP = new FileReader();
                                frSHP.onloadend = function() {
                                    var fileData = this.result; //fileData就是读取到的文件的二进制数据
                                    bfSHP = new BinaryFile(fileData, 0, 0);
                                    shpFile = new ShpFile(bfSHP);
                                    if(shpFile) {
                                        shpRender(shpFile.records);
                                    }
                                };
                                frSHP.readAsBinaryString(fileSHP);
                            }
                        } else {

                        }
                    } else {
                        //error.notCSVFile

                    }
                }
            }

            function shpRender(records) {
                for(var x = 0; x<records.length; x++) {
                    var record = records[x];
                    var myShape = record.shape;
                    //点图层
                    if(record.shapeType == ShpType.SHAPE_POINT) {
                        addGeometryToGraphic("Point", myShape);
                    }
                    //线图层
                    if(record.shapeType == ShpType.SHAPE_POLYLINE) {
                        addGeometryToGraphic("Polyline", myShape);
                    }
                    //面图层
                    if(record.shapeType == ShpType.SHAPE_POLYGON ||
                        record.shapeType == ShpType.SHAPE_POLYGONM ||
                        record.shapeType == ShpType.SHAPE_POLYGONZ) {
                        addGeometryToGraphic("Polygon", myShape);
                    }
                }
            }

            function addGeometryToGraphic(shapeType, myShape) {
                switch(shapeType) {
                    case "Point": //
                        GeometryObj = new esri.geometry.Point({
                            "x": myShape.x,
                            "y": myShape.y,
                            "spatialReference": map.extent.spatialReference
                        });
                        Symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10,
                            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                                new esri.Color([255, 0, 0]), 1),
                            new esri.Color([255, 0, 0, 1]));
                        break;
                    case "Polyline":
                        var myPaths = [];
                        for(var x = 0; x < myShape.rings[0].length; x++) {
                            var xyArr = myShape.rings[0][x];
                            myPaths.push([xyArr.x, xyArr.y]);
                        }
                        GeometryObj = new esri.geometry.Polyline({
                            "paths": [myPaths],
                            "spatialReference": map.extent.spatialReference
                        });;

                        Symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                            new dojo.Color([255, 0, 0, 1]), 2);
                        break;
                    case "Polygon":
                        var myRings = [];
                        for(var x = 0; x < myShape.rings[0].length; x++) {
                            xyArr = myShape.rings[0][x];
                            myRings.push([xyArr.x, xyArr.y]);
                        }
                        GeometryObj = new esri.geometry.Polygon({
                            "rings": [myRings],
                            "spatialReference": map.extent.spatialReference
                        });

                        Symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                                new dojo.Color([255, 0, 0, 1]), 2), new dojo.Color([0, 255, 255, 1]));
                        break;
                }
                var vGraphic = new esri.Graphic(GeometryObj, Symbol);
                map.graphics.add(vGraphic);
            }
            
            //读取CSV
            function handleCSV(file) {
                
                  var reader = new FileReader();
                  reader.onload = function () {
                      var fileData = this.result;
                    PolygonCSVData(fileData)
                  }
                  reader.readAsText(file);
                
//                  window.FileAPI.readAsText(file, function (evt) {                   
//                        var fileData = this.result;
//                        PolygonCSVData(dataStr)
//                     
//                  });
                
              }
            function PolygonCSVData(dataStr) {
                var lines = dataStr.split('\n');
                var result = new Array();

                var myRings = [];
                for(var i = 1, il = lines.length; i < il; i++) {
                    var item = lines[i].split(',');
                    var x = Number(item[0]); //经度
                    var y = Number(item[1]); //纬度 
                    myRings.push([x, y]);
                }
                var GeometryObj = new esri.geometry.Polygon({
                    "rings": [myRings],
                    "spatialReference": map.extent.spatialReference
                });

                var Symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                             new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                             new dojo.Color([255, 0, 0, 1]), 2), 
                             new dojo.Color([0, 255, 255, 1]));
                var vGraphic = new esri.Graphic(GeometryObj, Symbol);
                map.graphics.add(vGraphic);

            }
        </script>
    </head>

    <body class="tundra">
        <input type="file" id="fileInputHTML5" class="fileInputHTML5" οnchange="fileSelected(this)" accept=".csv,.txt,.shp" multiple="">

        <div id="mapPane" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
            <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">
            </div>
        </div>
    </body>

</html>

完整文件下载地址 https://download.csdn.net/download/wjsnoweagle/11249248

wjsnoweagle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5 FileReader读取shp文件
06-19
基于H5的FileReader实现web端读取shp文件，CSV文件，文本文件坐标，并加载到地图上
shapefile文件（shp）读取
sgcc_zhs的专栏
07-15 2万+
shapefile是GIS中一种数据类型，在ArcGIS中被称为要素类(Feature Classes)，主要包括点(point)、线(polyline)和多边形(polygon)。 解析geopandas文件的方式很多，本文介绍两个 pyshp和geopandas。 1.pyshp(Python Shapefile Library) 是一个Python库，用于在Python脚本中对
JS解析shapefile（.shp）
Alice
08-23 1万+
  &lt;!DOCTYPE html&gt; &lt;script src="https://unpkg.com/[email protected]"&gt;&lt;/script&gt; &lt;script&gt; shapefile.open("../../data/天津.shp") .then(source =&gt; source.read() .then(function
前端 解析压缩包，并且读取Shp生成GeoJson在MapBox上渲染
最新发布
Mozifei73的博客
01-16 609
【代码】前端 解析压缩包，并且读取Shp生成GeoJson在MapBox上渲染。
上传并在地图中显示Shp文件
焦向宁的专栏
03-15 5642
前段时间参与了一个项目，客户有一个功能需求是上传SHP文件并在地图上显示，然后在此基础上做缓冲区处理。经过对比测试，最终选择了shapefile.js工具，在此做个记录。 shapfe.js能够将Esri的Shapefile文件转换为GeoJSON，它能够以Shapefile文件zip的压缩文件和单独的.shp文件作为输入参数。 shapefile.js安装 项目是基于Vue开发的，因此选择了np...
Js解析上传的shp文件和txt文件
qqjuanqq的博客
01-04 815
js解析上传的shp文件和txt文件成json格式的数据在地图上进行叠加
arcgis基本操作5
m0_46588116的博客
04-28 1021
等值线的绘制 DEM数据文件的下载 数据途径有很多，包括地理数据云网站、91卫图助手、biggermap、earthdata等等，但是由于没有钱，选择使用地理空间数据，网址链接:（ link）http://www.gscloud.cn/search 1.检索所需范围的数据 推荐使用高级检索功能 2.在数据集下选择下载数据类型（在此pick DEM） 3.得到4个文件，全部下载（需要后续拼接+剪裁） 4.下载后记得解压压缩包哦~~ DEM数据文件的打开 将解压好的文件，拖拽入arcgis中，格式如下：
JS解析shapefile并在地图加载演示
jjxliu306的博客
06-13 1万+
  JS解析shapefile并在地图加载演示   为了解决SHP文件上传过程中用户需要预览，或者shp小文件需要进行实时加载，后端解析太频繁的问题。现在可以通过HTML5的方式直接读取本地文件，将解析的二进制流按照shp 和dbf的格式读取后按照ol的规范拼装features并加载图层。 程序主要的几个点有： 本地文件读取： 借助H5的FileReader，可以轻松读取本地...
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
fileReader_csv_文件读取_
10-03
对CSV文件的读写，泛用性比较适合
HTML5 文件域+FileReader 分段读取文件并上传到服务器
09-27
主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下
武汉市shp图
12-27
武汉市的旅游地图，shp文件格式，包含各个旅游景点，交通路线
html 显示shp,运用shapefile.js解析Shp文件
weixin_39941620的博客
06-18 815
shapefile.open("http://localhost:8181/shp/zd.shp").then(source => source.read().then(function log(result) {if (result.done) return;console.log(result.value);return source.read().then(log);})).catch...
shp文件的读取
热门推荐
02-04 3万+
<!-- alimama_pid="mm_10249644_1605763_4929893"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="0080
上传shp.zip并加载至arcgis地图中（web端）
往事随风的博客
07-22 3446
老规矩：先看效果图，是不是你想要的，别浪费时间，耍流氓嘛。老铁们说是不是？ 看完了效果图，到了这里应该都是真正需要的人吧，咱们慢慢来， 这个是用 vue + element ui +arcgis js +jzzip+shapefile 完成的 再说下思路： 1、zip包解压 2、shp 文件读取 3、转化格式用 arcgis js 加载 具体详细说明下： 1、zip包解压，这里我们用到的是jzzip 这个js库 2、shp文件读取：引入shapefile.js 这个类库 这.
Vue项目在线读取ShapeFile文件，并解析为GeoJson
做GIS梦的人
10-08 2245
一直以来，在Web前端读取文件，都比较麻烦。是一种常用的GIS文件格式，它至少由三个文件组成。前端读取选择多个文件比较麻烦，做成压缩包前端解析难度大。将文件传输到后端解析，传输耗时比较大，效率低。最近发现了一个npm组件——，利用它在前端项目中，可以和input组件配合解析ShapeFile文件。这个组件的很多Demo是基于node.js项目写的，一度导致我很怀疑在Vue项目中，它是否可以使用。最终，证明它是可以使用。它可以读取很多信息，这里我只展示一下如何读取.shp文件里的图形信息为GeoJson。
shp文件解析
m0_60694785的博客
04-22 840
npm i shpjs 下载 const shapefile = require("shapefile"); 引入 fileLoad(event) { const that = this; const selectedFile = event.file; const name = selectedFile.name; const size = selectedFile.size; console.log("文件名:" + name + "大小:
java filereader读取txt文件
03-16
要使用Java FileReader读取txt文件，可以按照以下步骤： 1. 创建一个FileReader对象，并传入要读取的txt文件的路径。 ``` FileReader fileReader = new FileReader("文件路径"); ``` 2. 创建一个BufferedReader...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值