ArcGIS JS 实现前端添加shape并保存到服务器

步骤：

1.在服务器上准备一个工作空间进行存放上传的shape文件
2.设置arcgis server ,将地图服务设置为允许动态加载shape文件
3.注册工作文件夹
4.代码加载，并显示保存

详细步骤：

1.准备一个工作空间存放上传的shape文件

我这里就采用了d盘中的test文件夹作为存储空间，实际目录：D:\图层\test

2.设置服务器中的目标服务为动态服务

找到服务下功能页面，在默认地图下，勾选动态工作空间，此处我已经勾选了，然后点击添加，会弹出如下界面：

工作空间id自己随便取，不过建议就采用存储空间的名字，便于记忆

位置为存储空间在本地的目录位置，上面已经提到过了，填写完毕后点击添加，回退到上一界面，点击右上角的保存并重新启动

3.注册工作文件夹

注意上图中我圈起来的四个地方，界面切换到站点，数据存储界面下，会出现界面显示已注册数据库和注册的文件夹

关于如何注册arcgis server 与注册数据库托管服务，请参考这边博客：http://blog.csdn.net/kangkang_style/article/details/73181051

此处我就不再赘述了

点击注册文件夹，弹出界面如下：

名称为存储空间注册文件夹名称，和刚才添加的名称一致

发布文件夹路径最开是的时候已经写过了，即存储空间的地址

发布者主机本机的话直接localhost

服务器文件夹直接勾选与发布者文件夹相同即可

4.找到目标url即可拿来使用了

在显示页面的最下方

4.下面是代码的实现部分：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ShapeFile</title><link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">  <script src="http://js.arcgis.com/3.9/"></script>  <script type="text/javascript">//服务地图var serviceUrl="http://localhost:6080/arcgis/rest/services/MyMapService/MapServer";//动态图var dynamicUrl="http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/dynamicLayer";//线要素var featureUrl="http://localhost:6080/arcgis/rest/services/%E8%A7%86%E9%A2%91%E6%95%99%E5%AD%A66/FeatureServer/1";//几何图形数组var graValues=[];//符号var lineSymbol;require(["esri/map","dojo/dom","dojo/on","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer","esri/layers/TableDataSource","esri/layers/LayerDataSource","esri/renderers/SimpleRenderer","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/toolbars/draw","esri/graphic","dojo/domReady!"],function(Map,dom,on, ArcGISDynamicMapServiceLayer,FeatureLayer, TableDataSource,LayerDataSource, SimpleRenderer, SimpleMarkerSymbol,SimpleLineSymbol,Draw,Graphic){var map=new Map("map");var layer=new ArcGISDynamicMapServiceLayer(serviceUrl);layer.setDisableClientCaching(true); map.addLayer(layer);//添加shape--featureLayeron(dom.byId("btn"),"click",function(e){//定义一个数据源var dataSource = new TableDataSource();//此处为我们设置的命名空间dataSource.workspaceId = "test";//命名空间下面的shpdataSource.dataSourceName = "经纬网.shp";//定义一个图层数据源var layerSource = new LayerDataSource();//给图层数据源赋值layerSource.dataSource = dataSource;//定义一个要素图层:注意链接为动态图层的地址var layer2 = new FeatureLayer(dynamicUrl, {mode: FeatureLayer.MODE_ONDEMAND,outFields: ["*"],source: layerSource});//定义线符号lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);//定义渲染器var renderer = new esri.renderer.SimpleRenderer(lineSymbol);//定义渲染器layer2.setRenderer(renderer);layer2.refresh();layer2.id="layer2";//将添加shape显示在地图上，此时还未保存于服务器map.addLayer(layer2);//获取添加shape中的所有图形graValues=map.getLayer("layer2").graphics;});//提交到服务器保存on(dom.byId("add"),"click",function(evt){var layer3=new FeatureLayer(featureUrl,{outFields:["*"],});layer3.applyEdits(graValues,null,null);});});</script></head><body><input id="btn" type="button" value="AddDynamicLayer" /><input id="add" type="button" value="AddConfirm" /><div id="map"></div></body>
</html>

各位小伙伴觉得还行的话留个言点个攒吧

ArcGIS JS 实现前端添加shape并保存到服务器相关推荐

arcgis js api前端完成面积测算
想找一个不依赖GeometryService量算面积的方法,经过别人的帮助,终于在js帮助页上找到了.就是esri/geometry/geodesicUtils中的geodesicAreas方法,该方 ...
c#mvc上传文件保存到后台_C# MVC实现前端上传文件保存到服务器
后台代码 public string UploadECCInvoice_Intranet() { //返回前端结果状态对象 StateClass sc = new StateClass(); int ...
JS纯前端实现文件保存
JS纯前端实现文件保存 <body><a href="" id="a">click here to download your file ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
arcgis js 完整悬停效果实现
arcgis 中的悬停效果并不如想象中那么容易实现,本文会介绍如何完整的实现如下悬停效果,并对相关的技术细节进行解释,讲解如何避免一些小坑.让你不仅知其然,更知其所以然. 文章正文主要涉及对细节和原理 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
使用ArcGIS JS API加载WMTS图层的两种方式
文章目录前言方式一方式二前言某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
基于ArcGIS JS API封装dojo微件(以工具条为例)
1.应用场景: 我们知道ArcGIS JS API自带了一些微件(或者说是控件),比如缩放按钮.定位按钮等等.但是有的时候这些微件的样式不太符合项目实际要求,或者是项目上想要把这些组合起来,这时候我们 ...
使用fuse.js_如何使用Fuse.js将搜索添加到React应用
使用fuse.js Search is a powerful way help people visiting your site find the content that's most impor ...

ArcGIS JS 实现前端添加shape并保存到服务器

ArcGIS JS 实现前端添加shape并保存到服务器相关推荐

最新文章

热门文章