基于ArcGIS API for Javascript的地图编辑工具 - 乘化 - 推酷
基于ArcGIS API for Javascript的地图编辑工具 - 乘化
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具，分享一下一些相关的开发经验。
我开发的地图编辑工具是根据ESRI提供的例子修改而来的，参考的例子是
我们下面只说一些需要注意的问题：
1、代理的问题
Java Script API是基于REST访问的，通过GET的方式请求数据，这种方式有一个缺点，那就是URL的大少不能超过2048字符。为了解决这个问题ArcGIS Server引入一个代理。关代理的官方说明请参考Java Script API的 Using the Proxy Page一节（
2、属性编辑的问题
当你去添加一个点或者一条线的时候，你肯定要去为这个点或者这条线输入一些我们数据库中定义好的属性，官方提供的例子是英文的，后台数据库也是英文的，这个问题就不明显，但是在我们这种中文环境下使用就会遇到我数据库里是英文的，客户端显示要是中文的这样的问题，想了很多办法效果都不理想，最后发现下面这段代码是可以的
var featureLayerInfos = dojo.map(results, function(result) {
featureLayer: result.layer,
showAttachments: false,
isEditable: true,
fieldInfos: [
{fieldName: 'name', visible: true,isEditable:true, label:'点名:'},
{fieldName: 'type', visible: true,'isEditable':true, label:'类型:'},
{fieldName: 'direction', visible: true,isEditable:true,label:'方向:'},
{fieldName: 'floors', visible: true,isEditable:true, label:'经停楼层:'},
{fieldName: 'floor', visible: true,isEditable:true, label:'所在楼层:'}
其实就是通过一些属性，把请求返回的图层信息根据需要格式化了一下，具体看帮助文档
3、编辑时的捕捉功能
我们在ArcGIS Desktop里面编辑的时候，会有捕捉功能，可以让我们准确的从某个点开始画新的图形，在ArcGIS API for Javascript里面也提供这个功能，具体的代码如下：
map.enableSnapping({snapKey:dojo.keys.copyKey});
好了，不说废话，这次就到这儿了，如果是用于浏览器上的数据编辑，ArcGIS API for Javascript确实比Openlayers强大一些，不过如果是手机端显示就必须是Openlayers了，请看我之前的博文
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致&>&&>&&>&&>&ArcGIS API for JavaScript从基础到开发实践(程序例子)
ArcGIS API for JavaScript从基础到开发实践(程序例子)
上传大小：18.76MB
ArcGIS API for JavaScript从基础到开发实践(程序例子)
综合评分：4.2（17位用户评分）
所需积分：1
下载次数：308
审核通过送C币
创建者：guo8ke
创建者：qq
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
ArcGIS API for JavaScript从基础到开发实践(程序例子)
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：随笔 - 1502.3　使用ArcGIS API for JavaScript创建应用程序的基本步骤 - 异步社区
2.3　使用ArcGIS API for JavaScript创建应用程序的基本步骤
2.3　使用ArcGIS API for JavaScript创建应用程序的基本步骤
使用ArcGIS API for JavaScript创建任何GIS地图应用程序，都需要遵循一些步骤。假如想让地图成为应用程序的一部分，那么就需要你按照这些步骤来执行。在阅读本书时，我很难想象你不按照这些步骤来做会遇到怎样糟糕的情况。简而言之，你需要遵循以下步骤。
1．创建页面HTML代码。
2．引用ArcGIS API for JavaScript和样式表。
3．加载模块。
4．确保DOM可用。
5．创建地图。
6．定义页面内容。
7．页面样式。
这里仅仅是一个必需步骤的简短描述，我们将在接下来的介绍中对每个步骤进行详细说明。
2.3.1　创建Web页面HTML代码
在前面章节中，你已经掌握了HTML、CSS和JavaScript的基础概念。现在我们就来将这些技术应用到实际开发示例中去。首先你需要创建一个简单的HTML文档作为最终的地图容器。当我们开始使用ArcGIS API for JavaScript沙盒时，这些步骤就已经为你准备好了。但是，我想让你花点时间去看这些代码，从而能更好地掌握这些概念。在沙盒的左侧面板中，你看到下列示例中加粗显示的代码是引用自Web页面中基本的HTML代码，当然这里也有一些其他的HTML和JavaScript代码，但是下列代码构成一个Web页面的基本组成部分。这段代码包括几个基本的标签，包括&html&、&head&、&title&、 &body&等。
&!DOCTYPE html&
　&title&Create a Map&/title&
　&meta http-equiv="Content-Type" content="text/charset=utf-8"&
　&meta name="viewport" content="initial-scale=1,maximum-scale=1,user- scalable=no"&
　&link rel="stylesheet" href=""&
　&link rel="stylesheet" href=" "&
　　html,body,#mapDiv{
　　　padding:0;
　　　margin:0;
　　　height:100%;
　&/style&
&script src=""&&/script&
　&script&
　　dojo.require("esri.map");
　　function init(){
　　　var map = new esri.Map("#mapDiv",{
　　　　 center:[-56.049,38.485],
　　　　 zoom:3,
　　　　　basemap:"streets"
　　dojo.ready(init);
　　&/script&
　&body class="claro"&
　　&div id="mapDiv"&&/div&
2.3.2　引用ArcGIS API for JavaScript
使用ArcGIS API for JavaScript进行开发时，必须要添加样式和API引用。在沙盒中，下列几行代码已经添加到了&head&标签内部。
&link rel="stylesheet" href=""&
&script src=""&&/script&　
&script&标签加载的是ArcGIS API for JavaScript。在编写本章时，它的当前版本是3.7。当一个新版本的API发布的时候，你需要相应地修改这个数字。&link&标签加载的是esri.css这个ESRI工具和组件的特定样式。
你可以选择性地添加一种DojoDijit主题样式。ArcGIS API for JavaScript是直接建立在DojoJavaScript框架上的。Dojo包括Claro、Tundra、Soria和Nihilo这四个预先定义的主题，它们用于控制添加到应用程序中的用户界面工具的外观样式。下列代码示例引用了Claro主题样式。
&link rel="stylesheet" href=""&
其他样式可以参考下列示例代码进行引用，当然你也可以不引用任何一种样式。但是假如你添加Dojo用户界面组件（Dijits），你就需要通过加载其中的一种样式来控制组件的外观。
&link rel="stylesheet" href=""&
&link rel="stylesheet" href=""&
&link rel="stylesheet" href=""&
你可以使用网站中提供的主题测试器来感受一下每一个主题是如何影响用户界面组件的。样式测试器的地址为htpp://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html，图2-2所示的是Dijit主题测试器的界面。
图2-2　Dijit主题测试器界面
2.3.3　加载模块
在创建地图对象之前，必须首先通过使用一个名为require()的函数来完成对地图资源的引用。
过时或者AMD Dojo
无论是使用过时的Dojo还是使用新的AMD，对于大多数开发者来说都是一件沮丧的事情。异步模型定义（AMD）是在1.7版本的Dojo中产生的。ArcGIS API for JavaScript3.4是使用新的AMD方式进行所有模块重写后的第一个版本。过时的遗产和AMD方式都可以使用，但是建议在编写任何一个新的应用程序时都使用新的AMD方式。在本书中，我们要遵守这个规定，但是我们还要意识到在3.4版本的API发布之前编写的应用程序和一些ESRI示例仍然是以老版的代码风格呈现的。
在Web页面中使用require()函数来导入资源时，ArcGIS API for JavaScript提供了很多种资源，其中包括esri/map这个在创建地图或者使用Geometry、Graphic和Symbols之前必须用到的资源。一旦提供了资源的引用，你就可以使用Map()构造函数来创建地图。下面是如何在沙盒中运行代码的要点。
在向沙盒中添加代码之前，最好先移除下列加粗显示的代码，删除的代码是使用ArcGIS API for JavaScript过时的方式编写的。以后我们打算使用新的AMD方式，在未来的沙盒版本中，可能就不需要删除这些代码了，希望ESRI会最终将这个基本代码块迁移到更新的AMD方式上去。
　　&script&
　　　　dojo.require("esri.map");
　　　　function init(){
　　　　　var map = new esri.Map("mapDiv",{
　　　　　　center:[-56.049,38.485],
　　　　　　zoom:3,
　　　　　　basemap:"streets"
　　　　　});
　　　　dojo.ready(init);
　　&/script&
导入的资源需要包括在一个新的&script&标签内。添加下列加粗显示行的代码到沙盒中的&script&标签内，require()函数中的参数名称可以按照你的习惯命名，但是无论是Esri还是Dojo都提供了一系列首选参数。我建议大家在向require回调函数中命名参数的时候使用Esri的首选参数。类似地，Dojo也有一系列首选参数别名。例如，在下列添加的代码中，我们提供了esri/map资源的引用，然后在内部的匿名函数中，又提供了一个Map的首选参数。在require()函数中引用的每一个资源都有一个相应的参数用于提供访问到该资源对象。
　　&script&
　　　require(["esri/map","dojo/domReady!"],function(Map){
　　　　　});
　　&/script&
2.3.4　确保DOM可用
当一个网页加载时，所有组成页面的HTML元素都被加载并且解析。这就是大家熟知的文档对象模型（DOM），它能保证JavaScript不能访问到网页上的任何元素直至所有的网页元素都被加载完毕。假如你的JavaScript代码试图去访问一个还没有加载的网页元素，就很明显会报错。为了避免这种情况的发生，Dojo中有一个ready()函数，可以将其包括在require()函数中，它仅会在HTML元素和任何模块加载之后才会执行。
另一种方法是你可以使用dojo/domReady!插件去保证所有的HTML元素都被加载。在这个练习中我们将使用第二种方法。
在先前的代码当中，我们已经使用dojo/domReady!插件并且将其添加到了require()函数中。
虽然可以直接添加JavaScript代码到基本的HTML文件中，但是更好的办法是创建一个单独的JavaScript文件（后缀名为.js）。本书为了简单起见，大部分代码都是直接写在了HTML文件内，但是当应用程序变得庞大且复杂的时候，希望你遵循将JavaScript代码写在一个单独的文件中的原则。
2.3.5　创建地图
创建一个新的Map地图是通过esri/map这个先前步骤中所引入模块中的Map类来实现的。在require()函数内部，使用构造函数来创建一个新的Map对象。Map对象的构造函数中接收两个参数，第一个是在Web页面上用于承载地图的&div&标签的引用，还有一个是可选参数，其作用是定义各种地图加载选项。这个可选项被定义成一个包括一系列键/值对的JSON对象。
可能最常见的选项是basemap，通过它你可以从中选择一个预先定义的basemap，包括：streets、satellite、hybrid、topo、gray、oceans、national- geographic或osm。zoom选项用来定义地图初始缩放级别，它是一个整数对应一个预先定义的缩放范围等级。minZoom和maxZoom选项分别定义地图最小和最大范围缩放等级。center选项定义初始显示地图时显示的中心点，这个点是一个Point对象，包括一个经度/纬度坐标值对。当向Map对象的构造函数中传递参数时，还有一些其他的额外选项。
首先，我们创建一个全局的变量map以及require()函数，添加下列加粗显示的代码行。
　　　require(["esri/map", "dojo/domReady!"], function(Map) {
添加下列加粗代码到require()函数中，这些代码是新的Map对象的构造函数。传递到该构造函数中的第一个参数是承载地图的&div&标签的ID引用，我们到现在还没有定义这个&div&标签，但是在下面步骤中很快就会定义。第二个传递到构造函数中的参数是一个JSON对象，包括地理坐标的可选项，如地图中心、缩放级别和topo基础地图。
basemap.require(["esri/map", "dojo/domReady!"], function(Map) {
　map = new Map("mapDiv", {
　　basemap: "topo",
　　center: [-122.45,37.75], // long, lat
　　zoom: 13,
　　sliderStyle: "small"
2.3.6　创建页面内容
最后的一个步骤是创建用来承载地图容器的HTML&div&标签，你需要为这个&div&标签分配一个唯一的ID编号，这样JavaScript代码就能引用到它。在沙盒中这个&div&标签已经创建好了，唯一标识符为mapDiv，如下列加粗代码行所示。另外，还需要为&body&标签定义一个类属性，它应该引用你引入的dojo样式表。在下列代码中，你可以看到&body&标签已经在沙盒中创建了并且完成了先前的两个步骤。
&body class="claro"&
　 &div id="mapDiv"&&/div&
2.3.7　页面样式
你可以向&head&标签中添加样式信息来为Web网页定义各种样式。在这个例子中，样式已经在沙盒中为你创建好了，如下列代码所示。本例中的样式包括设置地图，以适应整个浏览器窗口。
　　html, body, #mapDiv {
　　　padding:0;
　　　margin:0;
　　　height:100%;
2.3.8　完整代码
这个简单例子的完整代码应该是这样的。
&!DOCTYPE html&
　　&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
　　&meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"&
　　&meta name="viewport" content="initial-scale=1, maximum-scale=1,user- scalable=no"&
　　&title&Simple Map&/title&
　　&link rel="stylesheet"
　　href=""&
　　&link rel="stylesheet" href=""&
　　&style&
　　　html, body, #map {
　　　　height: 100%;
　　　　width: 100%;
　　　　margin: 0;
　　　　padding: 0;
　　&/style&
　　&script src=""&&/script&
　　&script&
　　　require(["esri/map", "dojo/domReady!"], function(Map) {
　　　　map = new Map("map", {
　　　　　basemap: "topo",
　　　　　center: [-122.45,37.75], // long, lat
　　　　　zoom: 13,
　　　　　sliderStyle: "small"
　　　　});
　　&/script&
　&body class="claro"&
　　&div id="map"&&/div&
通过单击Run按钮来运行代码，假如代码一切正常的话，你可以看到如图 2-3 所示的输出结果。
图2-3　使用ArcGIS API for JavaScript创建应用程序的运行结果
第3章　添加图形到地图
第4章　特征图层
第5章　使用控件和工具栏
第6章　空间和属性查询
第7章　定位和查找特征
第8章　地址转换点和点转换地址
第9章　网络分析任务
第10章　地理处理任务
第11章　整合ArcGIS Online
第12章　创建移动应用程序
附录　利用ArcGIS模板和Dojo设计应用程序
欢迎来到异步社区！