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  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM