深入浅出 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,如需转载请自行联系原作者
相关文章
|
5天前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
3天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
16 3
|
10天前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
7天前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
7天前
|
JavaScript 前端开发 API
深入浅出:使用Node.js搭建RESTful API的实践之旅
【8月更文挑战第31天】本文将带你踏上一次Node.js的探险之旅,通过实际动手构建一个RESTful API,我们将探索Node.js的强大功能和灵活性。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的实践经验和深刻的技术洞见。
|
5天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第34天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
7天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第31天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
7天前
|
JavaScript 前端开发 API
深入浅出:使用Node.js打造简易Web API
【8月更文挑战第31天】本文旨在通过一个简单实例,引导读者快速入门Node.js并创建自己的Web API。我们将从零开始,一步步搭建起服务端应用,涉及环境搭建、基本语法、路由处理等关键知识点,最后以代码实例加深理解。无论你是前端开发者还是后端新手,这篇文章都能让你轻松上手,体验后端开发的乐趣。
|
8天前
|
JavaScript 前端开发 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第30天】本文是一篇针对初学者的Node.js教程,旨在引导读者通过实践学习如何利用Node.js和Express框架快速搭建一个RESTful API。文章将介绍Node.js的基本概念、环境配置、以及如何使用Express框架创建API端点。此外,我们还将探讨如何进行数据操作和错误处理,最终实现一个简单的待办事项管理系统API。通过本教程的学习,读者将能够掌握构建RESTful API的基础技能,并了解如何将其应用于实际项目开发中。
|
8天前
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
22 0
下一篇
DDNS