深入浅出 Javascript API(三)--地图配置

简介:
地图配置围绕对地图基本操作的一些效果进行定制,有的是从程序调试考虑,有的从界面美观上考虑,有的从服务器响应速度上考虑。
    内容目录:


1.程序调试
2.自定义导航按钮
3.自定义移动、放大缩小动画
4.滑动条标注、刻度、位置、大小


1.程序调试是开发中必不可少的一个重要过程,js调试在Firefox浏览器上有一个大家耳熟能详的工具Firebug,但是在IE环境下暂时还没有这么好的调试插件,因此可以利用dojo的debug控制台管理调试过程中的信息,帮助开发。

    在head区域声明:

< script type ="text/javascript" > djConfig =
{ isDebug: true } ; </ script >

    然后在客户端事件响应过程中加入对事件的监控,并写入日志:
dojo.connect(map, " onExtentChange " , function (extent) { console.log( " Extent changed : "
+ dojo.toJson(extent.toJson())); } );



2.导航按钮的定制很简单,esri.Map类提供了八个方位角所对应的方法:
map.panUpperLeft()
map.panUp()
map.panUpperRight()

    分别对应西北、北、东北,其他的可以在文档中查找,这些方法可以直接在客户端js脚本事件中调用,如按钮的onclick事件。

3.移动和放大缩小的动画效果取决于客户的视觉感受,包括地图变化持续时间和移动(放大缩小)速度,但也要考虑服务器的负载,比如服务器访问量比较大,我们可以使用较长的持续时间和较慢的速度来改善用户体验,不至于让用户看到空白等待地图的出现。

移动(默认):
esriConfig.defaults.map.panDuration = 250; //0-1000ms
esriConfig.defaults.map.panRate = 25; //0-100

放大缩小(默认):
esriConfig.defaults.map.zoomDuration = 250;
esriConfig.defaults.map.zoomRate = 25;

    esriConfig可以用来重写Javascript API的默认配置参数,除了上面列举的移动和放大缩小效果外,还有滑动条样式、标注,放大框形状,以及连接REST连接点的代理等。

4.滚动条指的是地图默认左上方的放大缩小滑动条,类似于其他大众webgis应用站点googlemap、mapbar。通过简单的编程,可以修改滚动条的显示效果,如标注、刻度、位置、大小。创建esri.Map对象的时候,可以指定option参数,其中slider参数为Boolean类型,默认为true,写为false则不显示滚动条。

    滚动条标注指每一级放大缩小刻度所需显示的标注,通过针对cache地图,比如1级、2级、……或每个级别的比例尺


    图中显示的是比例尺的大小,通过layer.tileInfo.lods获取每个级别比例尺的信息
var lods = layer.tileInfo.lods;
for ( var i = 0 , il = lods.length; i < il; i ++ ) {
    labels
= lods.scale;
}


    然后配置esriConfig.defaults.map.sliderLabel即可。默认状态和设置了"esriConfig.defaults.map.sliderLabel=false"效果分别为:
   

   位置和大小主要通过"esriConfig.defaults.map.slider"指定,可以让滚动条水平放置,还有设置离map边框的距离。以上这些都是客户端开发和网站界面设计时所需要考虑的,Javascript API提供了一套比较方便的方法来实现各种效果。

    博客园链接:http://www.cnblogs.com/flyingis/archive/2008/07/21/1247636.html
 
 
本文转自温景良(Jason)博客园博客,原文链接: http://www.cnblogs.com/wenjl520/archive/2009/06/02/1494598.html,如需转载请自行联系原作者
相关文章
|
1月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
42 4
|
8天前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
19天前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
36 4
|
22天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
201 4
|
12天前
|
JavaScript 前端开发 NoSQL
深入浅出:使用Node.js构建RESTful API
【10月更文挑战第35天】在数字时代的浪潮中,后端技术如同海洋中稳固的灯塔,为前端应用提供数据和逻辑支撑。本文旨在通过浅显易懂的方式,带领读者了解如何利用Node.js这一强大的后端平台,搭建一个高效、可靠的RESTful API。我们将从基础概念入手,逐步深入到代码实践,最终实现一个简单的API示例。这不仅是对技术的探索,也是对知识传递方式的一次创新尝试。让我们一起启航,探索Node.js的奥秘,解锁后端开发的无限可能。
|
1月前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
1月前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API 服务器
【10月更文挑战第3天】使用 Node.js 和 Express 构建 RESTful API 服务器
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
146 0
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
17 0
|
1月前
|
JSON JavaScript API
Node.js RESTful API
10月更文挑战第8天
14 0
下一篇
无影云桌面