描述:此示例演示如何使用dojox.layout.ResizeHandle小工具来显示一个可调整大小的地图。当你运行这个样本右下角的地图包含了一个调整图片大小。单击并拖动鼠标调整地图的大小的图像。
在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_resize/index.html
参考联接;http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm?OpenStreetMapLayer
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http - equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http - equiv="X-UA-Compatible" content="IE=7,IE=9" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>Resizable Map</title> <!-- 导入"Claro"主题的样式表 --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> <!-- 导入CSS样式表需要ResizeHandle模块 --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dojox/layout/resources/ResizeHandle.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <style type="text/css"> <!--Adjust the position of map resize handle a little bit --> .dojoxResizeHandle { right: 0px; bottom: 0px; } </style> <script> var dojoConfig = { // 在你的HTML标记中,如果用到 dojo widgets(aka.dijits) 需要加入下面语句 parseOnLoad: true // 解析 }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"> </script> <script type="text/javascript"> dojo.require("dojo.parser"); // 控制小部件的生成。 // 导入调整大小的模块 dojo.require("dojox.layout.ResizeHandle"); dojo.addOnLoad(pageReady); // 初始化加载 var map; function pageReady() { var initialExtent = new esri.geometry.Extent( 17198, 6008256, 506394, 6497452, new esri.SpatialReference({ wkid: 102100 }) ); map = new esri.Map("mapDiv", { extent: initialExtent, // 范围 sliderStyle: "small" // 滑块样式 }); // 创建图层 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"); map.addLayer(tiledMapServiceLayer); } </script> </head> <body class="claro"> <!-- Map 元素 --> <div id="mapDiv" style="position: relative; width: 400px; height: 400px; border:2px solid #575757;"> <!-- ResizeHandle widget: 父节点 mapDiv 是 "position: relative" 其样式属性 - 这是当你需要将浮动元素里面的mapDiv --> <div data-dojo-type="dojox.layout.ResizeHandle" data-dojo-props="targetId:'mapDiv',activeResize:true,intermediateChanges:true"> <script type="dojo/method" event="onResize"> if (window.map) { window.map.resize(); } </script> </div> </div> </body> </html>
效果如下:
未经允许请勿转载:程序喵 » ArcGIS For JavaScript API Resizable Map —— 可调整地图大小