• 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="1024px; height:512px; border:1px solid #000;"></div>
    34   </body>
    35 </html>
    36  
    37  
  • 相关阅读:
    C语言实验报告
    C语言实验报告
    第四次作业4-树和二叉树
    第03次作业-栈和队列
    第02次作业-线性表
    Data_Structure01-绪论作业
    C语言第二次实验报告
    C语言实验报告
    第04次作业-树
    第03次作业-栈和队列
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6541973.html
Copyright © 2020-2023  润新知