上传shp的压缩包网页显示地图（JavaScript）
分享
-
2018-01-23
Portal中有一个很实用的功能，就是上传一个shapefile的文件压缩包zip，在地图中查看器中展示这个矢量地图。有一些用户只有ArcGIS Server的使用权限没有Portal for ArcGIS产品的使用权限。想要自己实现相同的功能。
为此我进行了探索，并借鉴了github上的三个项目https://github.com/Esri/geojson-layer-js 和https://github.com/gipong/shp2geojson.js 以及https://github.com/wavded/js-shapefile-to-geojson 特此发布两个版本的基于ArcGIS API for JavaScript网页地图加载shapefile矢量图层。
1.免上传版
附件jsshapefiletogeojson1工程。实现直接将Web服务器目录下的shp和dbf文件添加到网页的地图上。核心代码非常简单。
附件shp2geojson2工程。改写的github上的一个程序，原程序使用的是leaflet而不是ArcGIS API。改写后，功能不变，迁移到了ArcGIS平台中，可以在ArcGIS API的程序里使用此功能。主要调用的第三方包是投影功能的包和仅依赖前端解压zip功能的包。程序中可能还存在一些bug，需要改进，敬请指出。感谢@李工的帮助。
为此我进行了探索，并借鉴了github上的三个项目https://github.com/Esri/geojson-layer-js 和https://github.com/gipong/shp2geojson.js 以及https://github.com/wavded/js-shapefile-to-geojson 特此发布两个版本的基于ArcGIS API for JavaScript网页地图加载shapefile矢量图层。
1.免上传版
附件jsshapefiletogeojson1工程。实现直接将Web服务器目录下的shp和dbf文件添加到网页的地图上。核心代码非常简单。
<!doctype html>
<html>
<head>
<title>js-shapefile-to-geojson Demo Page</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esr ... gt%3B
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="stream.js"></script>
<script src="shapefile.js"></script>
<script src="dbf.js"></script>
<script src="https://js.arcgis.com/3.23/%26 ... gt%3B
<!-- Terraformer reference -->
<script src="./vendor/terraformer/terraformer.min.js"></script>
<script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>
<script type="text/javascript">
require([
"esri/map","./src/geojsonlayer.js","dojo/domReady!"
],function(Map,GeoJsonLayer){
var starttime = +new Date
var map = new Map("map",{
basemap:"osm",
center:[120.0244,23.01]
});
var shapefile = new Shapefile({
shp: "testdata/world.shp",
dbf: "testdata/world.dbf"
}, function(data){
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL,
url = URL.createObjectURL(new Blob([JSON.stringify(data.geojson)], {type: "application/json"}));
console.log(url);
var geoJsonLayer = new GeoJsonLayer({
url: url
});
// Zoom to layer
geoJsonLayer.on("update-end", function (e) {
map.setExtent(e.target.extent.expand(1.2));
});
// Add to map
map.addLayer(geoJsonLayer);
console.log("took",new Date - starttime,"milliseconds");
})
})
</script>
</head>
<body></body>
</html>附件shp2geojson2工程。改写的github上的一个程序，原程序使用的是leaflet而不是ArcGIS API。改写后，功能不变，迁移到了ArcGIS平台中，可以在ArcGIS API的程序里使用此功能。主要调用的第三方包是投影功能的包和仅依赖前端解压zip功能的包。程序中可能还存在一些bug，需要改进，敬请指出。感谢@李工的帮助。
4 个评论
如果此demo部署在IIS里不能正常使用。检查IIS响应标头。
在IIS中对于HTTP响应标头添加以下内容
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:origin,x-requested-with,content-type
Access-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Origin：*
在IIS中对于HTTP响应标头添加以下内容
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:origin,x-requested-with,content-type
Access-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Origin：*
Merry GISmas！
