在移动设备中创建ArcGIS API for JavaScript地图应用程序

本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp

1、支持的设备

这个模板支持安卓和IOS横向和纵向姿态，它使用Dojo Mobile框架并包含Dojo标题窗口等小部件。

2、使用移动Web应用程序元素标记

3、使用Compact版ArcGIS API for JavaScript

Compact版ArcGIS API for JavaScript仅包含API的基本部分，不包括面向桌面的窗口小部件和布局。它是更好的选择来作为移动开发的起点。

要开始使用Compact版本的API，请在HTML页面的<head>元素中添加以下脚本和样式表标签：

4、初始化APP

首先，我们需要将Map、mobile和所需要的类应用到我们的应用程序中。然后我们使用移动解析器从标记中创建小部件。直接调用解析器比使用parseOnLoad：true dojoConfig配置更适合使用移动特定的dijits。它比默认解析器小，并且调整为比默认解析器更快地加载移动dijits。最后，我们确保地址栏真的被隐藏。单独上面设置的meta标记不足以在纵向模式下隐藏Android手机和iPhone上的地址栏。 dojox.mobile函数专门处理各种设备差异以及类似window.scrollTo调用不起作用的情况。

5、处理设备方向的变化

map的resize（）和reposition（）方法对于更新地图上的大小和位置很有用。本教程使用Dojo的头部小部件。标题表示导航栏，通常出现在视口的顶部。因此，当设备的方向改变时，我们需要使用一些其他属性来调整地图大小。

我们可以使用has功能来确定设备的操作系统和设备类别。可以使用window.matchMedia或mobile.getScreenSize来确定设备的当前方向（横向或纵向）。在这个例子中，我们使用mobile.getScreenSize技术。从地图大小中减去标题栏和任何浏览器自己的可见组件的高度，以使地图始终精确地填充可用空间，而不管设备或方向如何。

iPhone需要特别的注意和额外的调整。这些调整分为iphoneAdjustment功能。此功能可调整延迟地址栏隐藏和纵向模式下永久存在的底部按钮栏。它还设置了额外的单次使用事件侦听器来处理横向模式下的真实全屏切换。有关UI组件的精确尺寸，请参阅Apple的文档。

在iOS中，screen.availHeight给出了屏幕的边缘测量的总体边界，而window.innerHeight给出了浏览器的本机UI组件之间的尺寸。因此，screen.availHeight - window.innerHeight给出了本机浏览器UI的可见高度。

6、创建地图

无论目标平台如何，地图都以相同的方式创建。为了确保从任何其他“视图”返回时，地图的大小正确，我们也会在转换回地图之后调整地图大小。

本文第一时间发表在微信公众号：GISXXCOM

想了解更多GIS技术？

那就赶紧来关注我们

长按二维码关注我们

在移动设备中创建ArcGIS API for JavaScript地图应用程序相关推荐

ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...
用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...
地图小部件—ArcGIS API for JavaScript
电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...
ArcGIS API for JavaScript 开发笔记
1.Vue.js 中引入 ArcGIS API for JavaScript 4.x 安装 esri-loader npm install --save esri-loader 引入 ArcGIS A ...
ArcGIS API For JavaScript学习笔记
之前学习ArcGIS API For JavaScript的一些记录,有些是转载的,不过转载的自己有重新做过一遍,这里做个总结,方便后面来学习回顾. 1.ArcGIS API For JavaScri ...
创建类（点击获得位置信息）—ArcGIS API for JavaScript
不知道大家有没有这种体验,我们开始学web开发的时候,会把HTML.JavaScript.CSS代码都堆叠在一个HTML文件中,慢慢地,随着代码量的增多,不同的代码堆叠在一起显得很乱,我们开始把htm ...
ArcGIS API for javascript创建二维度地图
1.引用arcgis api for javascript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
arcgis api for javascript创建webscene
arcgis api for javascript创建webscene,核心代码如下: esriConfig.portalUrl = this.config.portal; var scene = n ...
arcgis api for javascript中使用proxy.jsp
当我们使用arcgis api for javascript 查询arcgis服务时,如果查询的参数很长时,通过get方式提交会查询不到结果,因为get方式提交的参数有长度限制,需要通过代理的方式使用 ...

在移动设备中创建ArcGIS API for JavaScript地图应用程序

在移动设备中创建ArcGIS API for JavaScript地图应用程序相关推荐

最新文章

热门文章