01-Version 4.6 of the ArcGIS API for JavaScript简介

ArcGIS API for JavaScript 4.x系列是Esri推出的新一代JavaScript API,使用这套API,我们可以构建2D和3D为一体的Web GIS地图应用。除了传统的2D地图功能,4.x系列在3D方面是重点,需要重点提醒的是:3D应用由Web三维场景实现,在Web三维场景中,可以叠加的图层的类型包括:
1) ElevationLayer
2) FeatureLayer
3) ImageryLayer
4) IntegratedMeshLayer
5) MapImageLayer
6) MapNotesLayer
7) PointCloudLayer
8) SceneLayer
9) StreamLayer
10) TileLayer
11) VectorTileLayer
12) CSVLayer
13) GeoRSSLayer
14) GraphicsLayer
15) GroupLayer
16) KMLLayer
17) OpenStreetMapLayer
18) WebTileLayer
19) WMSLayer
20) WMTSLayer
从图层的名称上看,这套API几乎包含了GIS开发所涉及到的数据类型:包括影像、矢量、DEM、倾斜摄影、点云、实时数据流、矢量切片、开放的GeoRSS和KML、OGC的WMS和WMTS、客户端要素图层等等,所以在数据层面上,API能支持的范围还是比较全面,当然还有部分的数据服务需要在后续的版本中补充进来,譬如WFS服务。但是作为开发来说,关心数据层面的问题现在已经可以放心使用了。说完数据,我们再看看功能方面。看功能从API的包名就可以窥见一斑:
esri:包含整个地图应用的顶层类,包括:Map(二维和三维)、弹出框、Esri提供的在线基础地图、三维视角、颜色对象、要素、几何。
esri/core
esri/core/accessorSupport
esri/core/workers
esri/geometry各种几何对象圆、矩形、几何服务引擎(本地和在线)、点、线、多边形、空间参考。
esri/geometry/support几何的辅助支持接口,包括jsonUtils 、 normalizeUtils和 webMercatorUtils
esri/identity主要提供用于身份管理的接口,譬如需要使用Portal或者Online上的资源时,需要身份认证,可以参考并使用这里的接口。
esri/layers包含各种图层,要查找对应的图层就查阅这个包里的接口。
esri/layers/support
esri/portal对接Portal的功能项,可以查询所在的群组、所拥有的资源项、以及登录用户的权限信息。
esri/renderers包含各种几何对象的渲染器,包括分级渲染、点云分级渲染、唯一值渲染。其中关于点云的渲染器就包括了5个,看得出来Esri的这个研发团队在点云这方面下了很大的功夫。
esri/renderers/smartMapping/creators
esri/renderers/smartMapping/statistics
esri/renderers/smartMapping/symbology上面的这三个包主要是智能制图对应的接口。
esri/renderers/support
esri/support
esri/symbols包括各种几何的符号对象,二维、三维符号都有。
esri/symbols/callouts
esri/symbols/support
esri/tasks这个包非常重要,GIS的重要功能都在这里。包括点选查询、空间和属性查询、打印、最短路径分析、服务区分析、地址定位、临近设施分析、几何分析以及可定制的GP分析。
esri/tasks/support
esri/tasks/workflow
esri/views二维地图和三维地图的容器
esri/views/2d/draw包含在二维地图上的绘图工具
esri/views/3d如果你想通过接口来访问SceneView的WebGL上下文,那么可以通过这个包里的接口实现。
esri/views/layers包括各种图层所对应的显示容器。4.x版本针对每种类型的图层都采用不同的显示容器来可视化图层的信息,猜测可能是出于优化可视化性能的目的。
esri/views/ui
esri/webmap只包含WebMap对象的初始状态信息接口。后期可能会有所扩展。
esri/webscene和上一个包类似。
esri/widgets包含现成的组件,譬如图层列表、底图组、打印、图例等。
esri/widgets/Print地图打印模板的属性设置,譬如:作者、版权、格式、宽度、标题等。
esri/widgets/Sketch
esri/widgets/support
可以看出上述包的命名相比3.x系列已经有了很大的变化,在对象模型的设计上更加细化,很多的接口需要到用的时候才能深入去理解,这里我们只需要大体掌握常用的接口即可。
在大体上了解了API可以支持的空间数据类型以及可以提供的GSI功能之后,下面我们就开始第一个Hello Map程序。
第一步是下载API和SDK部署到本地,虽然我们也可以用在线CDN的API和SDK,但是在国内做GIS项目的更多是在政府部门和企业内部,所以本地化是一个无法回避的问题。下载地址如下:
https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript
在下载之前需要注册一个Esri账号,如果没有那么就注册一个(免费的)。在下载页面我们选择要下载的版本,把API和SDK都下载下来,如下图所示:
这里写图片描述
API就是一个javascript库,SDK就是开发帮助Documentation,目前最新的版本是4.6。下载完成之后,解压并部署到Web服务器上,譬如IIS或者Tomcat之类。这里我把这两个包解压之后,放在IIS下,如下图:
这里写图片描述
为了简化访问地址以及方便自己使用的习惯,API包我直接拷贝解压目录下的4.6目录。开发帮助文档我也更改了目录的名称为4.6sdk,大家根据自己的习惯调整就可以,无非就是一堆静态文件。开发帮助文档部署之后就可以直接访问,譬如我的地址是:http://localhost/4.6sdk/,如下图所示:
这里写图片描述
至于API的部署,在解压包里就有说明,具体目录在:%arcgis_js_v46_api% \arcgis_js_api\library\downloads\,如下图所示:
这里写图片描述
包括Linux和Windows两个版本。Esri默认的建议配置是Web服务器采用HTTPS,这就需要证书,考虑到很多小伙伴一直都在用HTTP协议,所以配置的时候就采用非加密的HTTP。部署的配置需要修改两个文件,这里以IIS为例:
1. 用文本编辑器打开 C:\Inetpub\wwwroot\ 4.6\init.js 文件,搜索 https://[HOSTNAME_AND_PATH_TO_JSAPI],替换成http://192.168.1.144/4.6/
2. 用文本编辑器打开 C:\Inetpub\wwwroot\4.6\dojo\dojo.js 文件,搜索 https://[HOSTNAME_AND_PATH_TO_JSAPI],替换成http://192.168.1.144/4.6/
注意其中的192.168.1.144是我本机的IP,你需要替换成你自己的IP地址或者域名。
要验证是否API是否安装成功,只需要把下面的代码片段拷贝到新建一个HTMl页面中:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>测试API安装成功与否</title>
    <link rel="stylesheet" href="http://192.168.1.144/4.6/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://192.168.1.144/4.6/esri/css/main.css" />
    <style>
      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://192.168.1.144/4.6/dojo/dojo.js"></script>
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
      ], function (Basemap, TileLayer, Map, MapView){
        var layer = new TileLayer({
          url: "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer"
        });
        var customBasemap = new Basemap({
          baseLayers: [layer],
          title: "Custom Basemap",
          id: "myBasemap"
        });
        myMap = new Map({
          basemap: customBasemap
        });
        view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="viewDiv"></div>
  </body>
</html>

然后打开浏览器访问:
这里写图片描述
注意,这份地图用的是Esri提供的在线地图,如果你的网络环境无法访问外网,那么请将地图服务地址修改成你内部的ArcGIS Server发布的地图服务。
至此,开发的环境我们已经部署完毕,后续我们将从最简单的基础地图开始一步步深入地图开发。
PS:之前用Word写好,然后直接发布到CSDN,发布之后也没太在意,昨天随手点了最近写的几篇文章,发现结构那个乱啊,无法直视,所以想着找找看有没有非常方便的写博文的工具,昨天搞估了一个下午,发现过程太复杂,只是想写个文章而已,需要的东西太复杂了,所以不想再折腾了,还是直接用CSDN的Markdown来写。Btw,CSDN的编辑器这么些年也没有个进步,太难用了,如果能直接把Word的文档内容(包括图片)直接一键复制上来就好了,或者上传Word之后直接发布博文。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值