当前位置: 首页 > news >正文

初学ArcGIS API for JavaScript

初学ArcGIS API for JavaScript

  对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在《WebGIS开发从基础到实践》讲解的特别详细,在这里以笔记的形式来帮助自己加以理解和记忆。

1.样式

      esri.css样式主要用于ESRI提供的小部件与组件,比如地图、信息框等。此外,还可以引用Dojo提供的样式表,Dojo提供了4组样式,分别是claro\tundra\soria以及nihilo,每种是一组定义用户界面的字体、颜色与大小等设置。在ArcGIS API for JavaScript中最常用的是tundra与claro。它们的URL如下:

      http://js.arcgis.com/3.17/js/dojo/dijit/themes/claro/claro.css

      http://js.arcgis.com/3.17/js/dojo/dijit/themes/tundra/tundra.css

      http://js.arcgis.com/3.17/js/dojo/dijit/themes/nihilo/nihilo.css

      http://js.arcgis.com/3.17/js/dojo/dijit/themes/soria/soria.css

     我们可以通过http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html来了解每组样式中不同Dojo小部件的显示情况。页面如下:

2.添加<script>标签

    除了引用提供的样式表外,还需要添加<script>标签来引用ArcGIS API for JavaScript,代码如下:<script src="http://js.arcgis.com/3.17/"></script>

3.添加<div>元素

    在<body>区域增加一个<div>元素,用于显示地图;

  <div id="mapDiv"></div>

4.编写加载地图模块的脚本

    返回到<head>部分编写脚本,加载地图模块。例如加载瓦片地图:

  <script>

    require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],function(Map,ArcGISTiledMapServiceLayer){

    //这里是创建地图与加入底图的代码

      });

  </script>

      注:ArcGIS API for JavaScript包含了许多“资源”,这些资源是按用途组织的,比如说esri/map用于地图、几何对象、图形与符号;esri/tasks/locater用于地理编码;

     如果要在应用程序中使用这些资源,需要先调用Dojo提供的全局require函数加载。require函数需要两个参数,第一个参数是依赖项,第二个参数是一个回调函数。require函数的第一个参数又包括两类,一类是真正的依赖类,另一类是插件,例如“dojo/dom”、“dojo/fx”、“dojo/domReady!”等。对于依赖类,如果不存在,Dojo就会根据目录结构去加载,当加载完成后,将执行回调函数。插件是用来扩展加载器功能的,插件的加载方式和常规模块没什么区别,只是在模块标识符的结尾使用了特殊符号“!”来表明它的请求是插件请求。Dojo默认带有一些插件,4个最重要的插件是:dojo/text、dojo/i18n、dojo/has、dojo/domReady,其中dojo/domReady插件是在DOM解析完毕以后再执行回调函数,这样就可以确保在执行任何代码前DOM可用。在回调函数中的参数依次是require函数的第一个参数指定的依赖类别名,当然可以指定为不重复的变量名即可,但是为了代码的可读性、可维护性,最好是对于同一个模块使用同一个别名。

    初始化地图以及在地图中加入内容,在require函数指定的回调函数中,加入如下代码加载地图:

  var map = new Map("mapDiv");//使用Map类(加载自esri/map模块)来创建一个新的地图,参数mapDiv是在HTML页面中包含地图的DIV名称

  var agoServiceURL = "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";//指定你要加载的地图服务的URL

  var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL ,{displayLevels:[0,1,2,3,4,5,6,7]});//根据地图服务的URL创建一个地图切片图层

  map.addLayer(agoLayer );//将创建好的地图切片图层加入到地图中

     注:ArcGIS API for JavaScript提供了两类图层:一类是事先做成地图切片的图层,又称为缓存地图(静态图层),即esri//layers/ArcGISTiledMapServiceLayer;另一类是需要根据参数动态生成地图的图层,即esri/layers/ArcGISDynamicMapServiceLayer;如果使用的是ArcGIS Online的切片地图作为地图,还可以用以下这种更快捷的方式来编码:

  var map = new Map("mapDiv",{center:[-56.049,38.485],zoom:3,basemao:"streets"});

  上述代码通过Map的构造函数的第二个参数制定了地图的其他属性,例如底图、初始中心点与层级。除了“streets”外,ArcGIS Online还 分布的切片地图服务,只需要将提供了“satellite”、"hybrid"、“topo”、“gray”、“ocean”、“osm”与“national_geographic”等基础地图。如果使用的是自己利用ArcGIS Server发布出来的切片地图服务,只需要将URL换成自己的服务地址即可。

5.设置样式

    返回到<head>部分设置样式<style></style>,让地图重返整个浏览器窗口。

  <style>

    html,body,#mapDiv{padding:0;margin:0;height:100%;}

  </style>

到这里,我们就完成了一个具有简单GIS功能的Web应用了。

转载于:https://www.cnblogs.com/khfang/p/6591701.html

相关文章:

  • 倒排列表求交集算法汇总
  • BZOJ 4195: [Noi2015]程序自动分析 [并查集 离散化 | 种类并查集WA]
  • UIButton的titleLabel不同状态字体判断
  • STM32 Flash Download failed
  • H5+css从入门到精通
  • xpath与css的区别
  • PHP类与对象
  • malloc函数及用法
  • SQL基础操作指令
  • IP首部格式[转载]
  • Cisco配置VLAN+DHCP中继代理+NAT转发上网
  • 让angular-cli工程基于ExpressJS服务,为对接后台API做准备
  • 面空间数据中网格索引和四叉树索引的结合及优化的一种方案
  • Python学习(20):Python函数(4):关于函数式编程的内建函数
  • socket.io中文文档
  • 《微软的软件测试之道》成书始末、出版宣告、补充致谢名单及相关信息
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • C++11: atomic 头文件
  • create-react-app做的留言板
  • Docker容器管理
  • HomeBrew常规使用教程
  • Java知识点总结(JavaIO-打印流)
  • LintCode 31. partitionArray 数组划分
  • php ci框架整合银盛支付
  • REST架构的思考
  • Spring Boot快速入门(一):Hello Spring Boot
  • SpriteKit 技巧之添加背景图片
  • 从PHP迁移至Golang - 基础篇
  • 高度不固定时垂直居中
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 简单数学运算程序(不定期更新)
  • 如何编写一个可升级的智能合约
  • 如何将自己的网站分享到QQ空间,微信,微博等等
  • 三分钟教你同步 Visual Studio Code 设置
  • 系统认识JavaScript正则表达式
  • 用Canvas画一棵二叉树
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 带你开发类似Pokemon Go的AR游戏
  • ​你们这样子,耽误我的工作进度怎么办?
  • #13 yum、编译安装与sed命令的使用
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (附源码)ssm高校实验室 毕业设计 800008
  • (九)c52学习之旅-定时器
  • *++p:p先自+,然后*p,最终为3 ++*p:先*p,即arr[0]=1,然后再++,最终为2 *p++:值为arr[0],即1,该语句执行完毕后,p指向arr[1]
  • 、写入Shellcode到注册表上线
  • .【机器学习】隐马尔可夫模型(Hidden Markov Model,HMM)
  • .bat批处理(二):%0 %1——给批处理脚本传递参数
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .NET建议使用的大小写命名原则
  • .sh
  • @RequestMapping处理请求异常
  • @取消转义
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [100天算法】-每个元音包含偶数次的最长子字符串(day 53)