初学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
初学ArcGIS API for JavaScript相关推荐
- arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
- 基于ArcGIS API for JavaScript加载天地图
文章目录 前言 效果图 详细代码 总结 参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
- 基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能(六)
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
- ArcGIS API for JavaScript Bookmarks(书签)
说明:本篇博文介绍的是ArcGIS API for JavaScript中的 Bookmarks(书签) ,书签的作用是,把地图放大到一个地方 添加书签,书签名称可以和地图名称一直,单击标签 地图会定 ...
- ArcGIS API for JavaScript 4.0(一)
原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...
- arcgis api for javascript从地图如何读取要素
arcgis api for javascript如何读取要素,通过ajax请求得到的. 比如: https://gis118.arcgisonline.cn/arcgis/sharing/rest/ ...
- arcgis api for javascript创建webscene
arcgis api for javascript创建webscene,核心代码如下: esriConfig.portalUrl = this.config.portal; var scene = n ...
- 图解ArcGIS API for JavaScript开发环境搭建
ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能. 本篇经验向大家介绍其本地部署及简单的第一个地图应用程 ...
最新文章
- 《 硬件创业:从产品创意到成熟企业的成功路线图》——导读
- apache 日志切割
- 在Laravel外使用Eloquent(一)
- hbase源码系列(一)Balancer 负载均衡
- 【转载】移动端布局概念总结
- python垃圾回收机制为什么标记能解决循环引用问题_python 关于循环引用以及标记清除的问题...
- 一道面试题:三个线程循环有序输出10次ABCABC...
- mrtg监控硬盘容量,内存占用,CPU占用 二
- python可视化计算器_Python tkinter实现简单加法计算器代码实例
- 揭秘网易视频云在数据传输方面的优化实战
- ArcGIS土壤稳定性评估(附练习数据下载)
- word内容被锁定无法进行修改的解决办法
- 连续分配、链接分配和索引分配详解
- SpringBoot如何自定义starter启动器?看这里
- 一个遮罩层怎么遮罩两个图层_遮罩动画只能有两个图层,上面为“遮罩层”,下面为“被遮罩”层。...
- java-IOC(控制反转) 理论推导
- android+扁平+png,[3.28更新]更好看的扁平化主题 —Flat+ 超全图标
- Filter过滤器基本内容
- 哪些服务器支持 9200系列CPU,核心暴增、修复漏洞:intel 英特尔 发布 Xeon Platinum 9200和8200系列 处理器...
- 小米笔记本Pro15.6蓝屏(0x00000124)——重装系统,拆机清灰加固态
热门文章
- c++ 如何获取网络时间_云台山茶旅集团如何四年时间获取十万老人的万千目光...
- python的groupby中函数详解_python groupby函数用法
- mysqlclient==1.3.7对应mysql版本_Python通过MySQLdb访问操作MySQL数据库
- tensorflow.GraphDef was modified concurrently during serialization
- 记录运行gpu错误及解决方案
- 家里wifi网速越来越慢_wifi太慢怎么办?简单的操作几步就能让网速飞快
- 循环神经网络matlab程序设计,神经网络及深度学习(包含matlab代码).pdf
- 软件测试矩阵,什么是过程/数据矩阵(U/C矩阵)?
- 【存储知识学习】第十章- NAS和SAN《大话存储》阅读笔记
- gitlab修改ip为url