Demo概述
- 在Web端选择要素
- 下载要素的shp文件
打开zip验证shp文件：
下载页面：https://download.csdn.net/download/summer_dew/10482961
免费下载：评论、并留邮箱
涉及内容
- ArcGIS Javascript
- ArcGIS Server
- Arcpy
- GP模型
- Java文件读取
- Servlet服务器
流程
- 将底图（即选择的要素图层）发布至ArcGIS Server
涉及技术：ArcGIS api for javascript、ArcGIS Server发布要素图层 - 使用ArcGIS Javascript将底图显示在Web上
涉及技术：ArcGIS api for javascript - 用户圈定要素，将范围内要素绘制出
涉及技术：ArcGIS api for javascript - 将范围内要素的OBJECTID打包–>调用ArcGIS Server的GP模型，生成shp文件–>将shp文件打包–>返回zip的路径
涉及技术：ArcGIS api for javascript、GP模型创建、ArcGIS_Server GP模型发布 - 用户点击下载–>进行http请求–>Java读取本地文件，将文件传输至客户端
涉及技术：ArcGIS api for javascript、服务器Servlet挂一个HTTP接口在网络中、Java读取文件并传回
技术
前期准备
- 使用Arcpy制作模型
https://blog.csdn.net/summer_dew/article/details/80712643 - ArcGIS Server将模型发布
https://blog.csdn.net/summer_dew/article/details/80713836 - ArcGIS Server发布底图
https://blog.csdn.net/summer_dew/article/details/80713836
服务端
https://blog.csdn.net/summer_dew/article/details/80713921
- 服务器Servlet开启HTTP接口
- 读取文件进行传输
前端
- 加载要素图层
- 调用GP服务
- 下载文件
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择要素并下载到本地</title>
<!-- 本地 -->
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.23/3.23/dijit/themes/tundra/tundra.css" />
<!-- cdn -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.MapClass {
width: 100%;
height: 600px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
var map;
var GP_SUCCESS = false;
var DRAW = 0;
var layer;
var zippath = "";
require([
"esri/map",
"dojo/dom", "dojo/on",
"esri/tasks/query", "esri/tasks/QueryTask",
"esri/InfoTemplate",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/toolbars/draw",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/Geoprocessor",
"esri/tasks/FeatureSet",
"dojo/domReady!"
], function(Map, dom, on, Query, QueryTask, InfoTemplate, Color, SimpleFillSymbol, SimpleLineSymbol, Draw, ArcGISDynamicMapServiceLayer, Geoprocessor, FeatureSet) {
map = new Map("map");
$("#download").click(download);
// 添加底图数据polygon
layer = new ArcGISDynamicMapServiceLayer("https://localhost:6443/arcgis/rest/services/test/arcpy_gp_basedata/MapServer");
map.addLayer(layer);
///////////////////// 绘制
//绑定绘图工具
var toolBar = new Draw(map);
on(dom.byId("select"), "click", function() {
// 打开要素图层
layer.setVisibility(true);
DRAW = 0; // 还未绘图
// 打开绘图
toolBar.activate(Draw.POLYGON);
});
//绘图完成查询
on(toolBar, "draw-complete", function(result) {
toolBar.deactivate();
var geometry = result.geometry;
DRAW = 1; // 绘图选择完成
queryGraphic(geometry);
});
function queryGraphic(geometry) {
var queryTask = new QueryTask("https://localhost:6443/arcgis/rest/services/test/arcpy_gp_basedata/MapServer/0");
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.geometry = geometry;
query.outSpatialReference = map.spatialReference;
queryTask.execute(query, addToMap);
}
function addToMap(results) {
console.log(results);
// 清除要素图层
layer.setVisibility(false);
map.graphics.clear();
// 画结果
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([111, 0, 255]), 2), new Color([255, 255, 0, 0.25]));
infoTemplate = new InfoTemplate();
infoTemplate.setTitle("要素属性");
infoTemplate.setContent("State Name: ${STATE_NAME}");
ids = [] //存储范围内的id
if(results.features.length == 0) {
console.log("未查询到");
return;
}
if(results.features.length >= 1) {
for(var i = 0; i < results.features.length; i++) {
var graphic = results.features[i];
ids.push(graphic.attributes.OBJECTID); //获得到这个的OBJECTID
map.graphics.add(graphic.setSymbol(symbol).setInfoTemplate(infoTemplate));
}
}
DRAW = 2; // 显示完成
create_gp(ids);
}
// ////////////////// 请求服务
// 根据被选择的id
function create_gp(ids) {
GP_SUCCESS = false;
dom.byId('status').innerHTML = "正在开始创建服务，请稍等";
//GP模型的URL
var gpServiceUrl = "https://localhost:6443/arcgis/rest/services/test/SeletedByAttributeToShp/GPServer/arcpy_gp";
var gp = new Geoprocessor(gpServiceUrl);
// 拼接查询字符串
var expression = "OBJECTID =" + ids[0];
for(var i = 1; i < ids.length; i++) {
expression += " or OBJECTID=" + ids[i];
}
console.log(expression);
var params = {
"sql": expression
};
gp.submitJob(params, completeCallback, statusCallback);
function statusCallback(jobInfo) {
dom.byId('status').innerHTML = jobInfo.jobStatus;
console.log(jobInfo.jobStatus);
}
function completeCallback(jobInfo) {
dom.byId('status').innerHTML = "服务成功，可点击下载";
console.log(jobInfo);
gp.getResultData(jobInfo.jobId, "out_path",showGpResult); //取出结果
function showGpResult(result) {
console.log(result);
zippath = result["value"];
// zippath.replace("\\","/");
GP_SUCCESS = true;
}
}
}
//////////////////// 下载
function download() {
console.log(GP_SUCCESS);
console.log(zippath);
if(GP_SUCCESS && zippath != "") {
var url = "http://localhost:8080/DonwloadFileServlet/DownloadFileServlet";
var form = $("<form></form>").attr("action", url).attr("method", "post");
form.append($("<input></input>").attr("type", "hidden").attr("name", "zippath").attr("value", zippath));
form.appendTo('body').submit().remove();
} else if(DRAW == 0) {
alert("还未选择要素");
} else if(GP_SUCCESS == false) {
alert("服务出错");
}
}
});
</script>
</head>
<body class="tundra">
<div id="map" class="MapClass"></div>
<button id="select">选择要素</button>
<button id="download">下载</button>
<div id="status"></div>
</body>
</html>