ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框
Posted xiaotian_小天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框相关的知识，希望对你有一定的参考价值。
描述
本例展示了当用户放大或缩小地图时如何定义地图的动画。zoomDuration和zoomRate是Dojo动画属性，他们确定了动画的duration和帧刷新的rate 。这些属性单位是毫秒，zoomDuration默认值是250，zoomRate默认值是25。
在本例中，可以通过调整这些属性为数据和应用获得更好的样子。例如，如果地图需要很长的时间加载，可以增加zoomDuration以便用户在等待加载缩放地图时看到空的或扭曲的屏幕时间较短。反之，如果地图加载很快，可以降低zoomDuration值来给地图更快的感觉。
本例展示了单击并拖拽鼠标期间按下Shift键时如何改变显示的缩放框的默认符号。能够定义任意填充符号作esriConfig里面的zoomSymbol。如同这个代码行所示：
esriConfig.defaults.map.zoomSymbol = {"color":[255,255,255,127],"outline":{"color":[255,0,0,255],"width":1.5,"style":"esriSLSDash"},"style":"esriSFSSolid"};
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>定制缩放动画</title> 7 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"> 8 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> 9 <script type="text/javascript"> 10 11 dojo.require("esri.map"); 12 function init() { 13 14 //定制缩放动画 15 /* esriConfig.defaults.map.zoomDuration = 1000; //time in milliseconds; default is 250 16 esriConfig.defaults.map.zoomRate = 50; //refresh rate of zoom animation; default is 25 */ 17 18 //定制缩放框 19 var zoomSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 20 new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, 21 new dojo.Color([0,0,255]), 2), new dojo.Color([255,255,0,0.5])); 22 23 esriConfig.defaults.map.zoomSymbol = zoomSymbol.toJson(); 24 var map = new esri.Map("map",{nav:false}); 25 var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); 26 map.addLayer(layer); 27 } 28 dojo.addOnLoad(init); 29 30 </script> 31 </head> 32 <body class="tundra"> 33 <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div> 34 </body> 35 </html> 36 37
以上是关于ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框的主要内容，如果未能解决你的问题，请参考以下文章
arcgis api for javascript 4.10版本的本地部署
Map学习(arcgis api for javascript3.18)
ArcGIS API for JavaScript学习：第一个地图