上传shp的压缩包网页显示地图(JavaScript)

2
分享 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文件添加到网页的地图上。核心代码非常简单。
<!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>
2.上传版
附件shp2geojson2工程。改写的github上的一个程序,原程序使用的是leaflet而不是ArcGIS API。改写后,功能不变,迁移到了ArcGIS平台中,可以在ArcGIS API的程序里使用此功能。主要调用的第三方包是投影功能的包和仅依赖前端解压zip功能的包。程序中可能还存在一些bug,需要改进,敬请指出。感谢@李工的帮助。

GIF.gif

 

1 个评论

如果此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:*

要回复文章请先登录注册