ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放、平移、定位、实时显示坐标、展示地图要素(指北针、比例尺、图例)、切换地图等。本文将详细介绍地图展示的代码构成以及常用的部件等。
一、创建一个地图 "Hello World"
- 由于JavaScript是镶嵌在HTML内的脚本语言,因此要调用JS API就先得创建一个HTML网页。下面就是一个最简单的HTML框架:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>hello world</title><style>html, body, #view {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="view"></div></body>
</html>
注:通常html由head,body和foot三部分组成,JavaScript存放在head中。
2.有了基本的HTML框架之后,接下来就是引用CSS和调用API了。
//引用CSS,themes分light和Dark两类。<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
//调用API <script src="https://js.arcgis.com/4.13/"></script>
3.最后可以通过调用API中的类库来实现地图展示。
<script>require(["esri/Map", //引用地图类"esri/views/MapView"], function(Map, MapView) { //参数位置要和引用类的顺序一致//新建一个地图var map = new Map({basemap: "topo" //地图底图});
//新建一个地图视图var view = new MapView({container: "view",map: map,center: [116.31357, 39.97104], // 地图中心的经纬度坐标zoom: 13 //地图缩放级别});});
</script>
至此,一个最简单的Web地图就完成了。可以操作的功能有地图缩放和平移。
4.JS API遵循AMD模块要求,AMD(异步模块加载定义)规范是Dojo1.7版本开始采用的一种模块规范,相较于Dojo以前采用的模块风格,它在许多方面做了很大的改进和优化,比如完整的异步操作,真正的包可移植性,更好的依赖管理以及改进的debug支持。AMD模块要求:
require ([ ],function ( ){ / * code goes here * / });
二、地图要素展示
指北针、比例尺和图例是地图基本的三要素。ArcGIS API for JavaScript通过调用widgets类实现部件的添加。widgets是一个功能丰富的类库,集成了多种常用的部件,且调用起来十分方便,极大减轻了开发者的负担。通过调用widgets中的指北针、比例尺和图例部件可以轻松实现地图要素的展示。
示例代码:
requrie(["esri/widgets/Compass","esri/widgets/ScaleBar","esri/widgets/Legend"],function(Compass,ScaleBar,Legend){//添加指北针var compass = new Compass({view:view});view.ui.add(compass,"top-right");//添加比例尺var scalebar = new ScaleBar({view:view});view.ui.add(scalebar,"bottom-right");//添加图例var legend = new Legend({view:view});view.ui.add(legend,"bottom-left");});
结果展示:
三、地图底图切换
ArcGIS API for JavaScript中的地图底图库部件提供了多种地图,如地形图、街道图、影像图等,每种地图展示的主题也不尽相同。通过调用widgets库中的BasemapToggle类和BasemapGallery类可以实现底图之间的切换。
示例代码:
requrie(["esri/widgets/BasemapToggle","esri/widgets/BasemapGallery",],function(BasemapToggle,BasemapGallery){//切换底图var toggle = new BasemapToggle({view:view,nextBasemap:"osm"});view.ui.add(compass,"bottom-right");//添加底图库var gallery = new BasemapGallery({view:view,source:{portal:{url: "https://www.arcgis.com",useVectorBasemaps: true //加载切片底图}}});view.ui.add(gallery,"top-right");});
结果展示:
四、Web Map展示
ArcGIS online 是ESRI公司开发的一个面向全球用户的公有云GIS平台,包含了全球范围内的底图、要素图层和地图应用程序。用户可以直接使用平台已有的的数据,同时也可以将本地数据上传至云平台从而实现数据共享。ArcGIS API for JavaScript通过调用web map的id来展示该地图。
示例代码:
require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) {//新建WebMapvar webmap = new WebMap({portalItem: {id: "82d4d0ba61734f608fce4e62a100d12d" //地图的id}});var view = new MapView({map: webmap,container: "viewDiv"});});
结果展示:
五、结语
地图展示是WebGIS最基础也是最重要的功能。通过ArcGIS API for JavaScript用户可以快速构建一个简单的Web地图应用,既省去了在桌面端作图的繁琐步骤,还可以实现地图的共享,极大提高了地图展示的效率。当然,除了地图展示之外,调用ArcGIS API for JavaScript还可以对地图图层进行查询、编辑甚至是空间分析,用户可以制作各种炫酷的webmap,而这正是WebGIS的魅力所在。
ArcGIS API for JavaScript——地图展示相关推荐
- 在移动设备中创建ArcGIS API for JavaScript地图应用程序
本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp 1.支持的设备 这个模板支持安卓和IOS横向和纵向姿态,它使用Dojo Mobile框架并包含Dojo标题窗口等小部件. 2 ...
- 地图小部件—ArcGIS API for JavaScript
电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...
- ArcGIS API For JavaScript学习笔记
之前学习ArcGIS API For JavaScript的一些记录,有些是转载的,不过转载的自己有重新做过一遍,这里做个总结,方便后面来学习回顾. 1.ArcGIS API For JavaScri ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- 基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
- ArcGIS API for javascript创建二维度地图
1.引用arcgis api for javascript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
- ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线 比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new ...
- ArcGIS API for JavaScript创建 3D 地图
1.引用ArcGIS API for JavaScript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记--加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
最新文章
- 过去一周AI领域有哪些新鲜事?看这一篇就够了
- toFixed()方法
- Swift 3.1新改动
- iOS 判断纯汉字,还是是否含有汉字
- javascript 正则表达式提取数字使用
- Python 文件读写操作-Python零基础入门教程
- 脉位调制解调 matlab,基于matlab的am调制解调
- 测试用什么编译java代码_java – 测试编译器
- 拔染印花的主要特点和工艺技术
- Python3 encode中的unicode-escape和raw_unicode_escape
- ORB-SLAM3 一张图梳理rgbd_tum.cc主流程
- 初窥QuickTest脚本录制
- itest听力答案2020_itest答案.doc
- 深入浅出、通俗易懂的讲解CAN bus
- 大学英语综合教程三 Unit 2 课文内容英译中 中英翻译
- Idea2018激活
- 实验室预约管理系统(Java+SSH+Web+MySQL+ofbiz系统)
- scala学习笔记(十三):implicit 详解
- mysql入库出库触发器_oracle 触发器 实现出入库
- CAD梦想画图的“测量曲线长度”
热门文章
- 华为无线设备配置静态负载均衡
- 计算机新建文件夹的步骤打开,电脑怎样为自己新建的文件夹加密,只能自己打开. 爱问知识人...
- 人生第一次面试还是霸面----cvte
- go-ethereum相关
- SSR 配置postcss 自动将px转化为rem
- android ICS 系统启动之Logo相关学习总结
- java计算机毕业设计水库洪水预报调度系统源代码+数据库+系统+lw文档
- 三年时间做到年薪百万,推荐明哥的职场心得
- 适合大学生、职场人士提高效率的实用性网站。
- linux 链接数据库mysql数据库文件_linux 命令行 链接mysql数据库