<!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