arcgis for js3.x的导入功能

本文介绍了如何在ArcGIS for JavaScript 3.x中实现Shapefile的导入功能,通过layui弹出层处理上传,并利用SOE服务在前端完成导入操作,无需通过后台处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候项目里需要导入一个shape文件,里面是临时的图斑地块,可能是一个或者是多个地块,页面代码如下:

<div class="layui-upload" id="impFiles">
<input type="file" id="file" style="width:150px;" />
<input type="submit" value="地图显示" id="shangchuan"/>

</div>

页面是这样的,该弹框用的layui的弹出层,代码如下://导入坐标文件的函数
 

function drwj(){
  $(".tool_window").css("display","none");
  layer.closeAll();
var right=$(window).width()*0.72;
layer.open({
   title :'导入文件',
   type: 1,
   shade:0,
   area: ['280px','185px'], //宽高
   content: $('#importZbwj'),
  offset: ['43px', right+'px'],
   cancel:function(){
    $("#importZbwj").css("display","none");
   }
});
 
var upload = layui.upload; 
    upload.render({
      elem: '#chooseZBFiles'
    ,url: ''
    ,auto: false
    ,multiple: true
    ,accept: 'file' //普通文件
      ,exts: 'txt|shape' //只允许txt和shape文件
    ,bindAction: '#stratImportZB'
    ,done: function(res){
    }
    });

  }

点击地图显示,就是在处理上传的功能,代码如下:

//工具栏的上传
$("#shangchuan").click(function(){
var fileName=$('#file').get(0).files[0].name;
var urlFileName="D:\\GISDATA\\"+fileName;//存放临时文件的路径,可自定义
var dataSOE = {'FileName': urlFileName, 'SrcCoordSys': "", 'DesCoordSys': "", 'f': "json"};
var soeUrl=me.mapConfig.SOEserviceUrl;//SOE服务的url
esri.request({
url: soeUrl,
content: dataSOE,
callbackParamName: "callback",
load: function (response) {
var _map = me.getMoreMapSelectMap()['map'];
if(response.Geometries.length>1){
//多面
var num=0;
  $.each(response.Geometries,function(w,e){
var polygonJson  = {"rings":e.rings,"spatialReference":{"wkid":mapSpatialReference.wkid}};
var symbolLS = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID, new dojo.Color([
  246, 83, 39 ]), 2), new dojo.Color([50,205,50, 0.2]));
var polygon = new Polygon(polygonJson);
  var graphic = new Graphic(polygon, symbolLS);
  _map.graphics.add(graphic);
num++;
  });
}else{
//单面
var polygonJson  = {"rings":response.Geometries[0].rings,"spatialReference":{"wkid":mapSpatialReference.wkid}};
var polygon = new Polygon(polygonJson);
var symbolLS = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID, new dojo.Color([
  246, 83, 39 ]), 2), new dojo.Color([50,205,50, 0.2]));
var graphicLS = new Graphic(polygon, symbolLS);
  _map.graphics.add(graphicLS);
  }
},
error: function (error) {
alert( "失败");
}
});

});

其中的SOE服务是需要的,操作如下:

这样就可以不通过后台就可以做导入的功能了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值