深入浅出 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,如需转载请自行联系原作者
相关文章
|
2月前
|
JSON 监控 供应链
京东商品详情API参数构造指南:必填参数与自定义字段配置
京东商品详情API由京东开放平台提供,支持获取商品基础信息、价格库存、SKU规格等120+字段,适用于价格监控、库存管理等场景。接口采用HTTPS协议、JSON格式,数据延迟≤30秒,支持高并发。提供Python请求示例,便于快速接入。
|
4月前
|
运维 数据可视化 测试技术
从混乱到清晰:API开发追踪工具实用技巧与工具配置完整拆解
API开发追踪工具是提升团队协作效率、实现接口全流程管理的关键。它整合任务看板、文档同步、版本控制与多角色协作,助力前后端及第三方高效对接。本文详解其核心功能、选型建议与落地实践,助你打造透明、规范的API协作体系。
|
1月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
443 1
|
2月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
130 2
|
4月前
|
Java 分布式数据库 Docker
使用Docker配置并连接HBase的Java API
本流程概要的解释了如何在Docker上配置并启动HBase服务,并通过Java API进行连接和操作表,不涉及具体的业务逻辑处理和数据模型设计,这些因应用而异需由开发者根据实际需求进行实现。
245 13
|
7月前
|
JSON 监控 API
1688 商品列表 API 深度拆解:从参数配置到数据获取
1688 是重要的批发采购平台,其商品列表 API 接口为开发者、商家和数据分析人员提供批量获取商品基础信息(如名称、价格、销量等)的能力。该接口支持市场调研、竞品分析等场景,助力商业决策与效率提升。接口基于 HTTPS 协议,采用 GET 或 POST 请求方式,需提供通用参数(如 app_key、timestamp 等)和业务参数(如 category_id、page_no 等)。响应数据以 JSON 格式返回,包含商品详情及分页信息。
262 13
|
10月前
|
程序员 API 开发者
实战阿里qwen2.5-coder 32B,如何配置Cline的Ollama API接口。
阿里Qwen2.5大模型开源免费,适合编程应用。在Ollama平台下载时,推荐选择带有“cline”字样的Qwen2.5-Coder版本,仅需额外下载适配文件,无需重复下载模型文件。Ollama环境永久免费,配置简单,效果出色,适合开发者使用。
5240 77
|
7月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7546 23
|
8月前
|
Prometheus 监控 JavaScript
Node.js连接池配置的五个隐形陷阱与防御体系:从创业公司血泪史说起
文章以创业公司血泪史为例,详细阐述了 Node.js 连接池配置的五个隐形陷阱及防御体系。包括连接泄漏、配置参数算术错误、异步异常导致崩溃、跨连接事务问题、监控缺失,并介绍了相应的解决办法和终极防御手段,强调在确定性与不确定性中寻找平衡,建立自适应机制。
343 13