ArcGIS For JavaScript API Resizable Map（可调整大小的地图）————（十）

最新推荐文章于 2024-01-26 10:37:03 发布

X-rapido

最新推荐文章于 2024-01-26 10:37:03 发布

阅读量3.7k

点赞数

分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8485419

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

描述：

此示例演示如何使用dojox.layout.ResizeHandle小工具来显示一个可调整大小的地图。当你运行这个样本右下角的地图包含了一个调整图片大小。单击并拖动鼠标调整地图的大小的图像。

查看原文：http://www.ibloger.net/article/376.html

在线演示：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>

效果如下：

X-rapido

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS For JavaScript API Resizable Map（可调整大小的地图）————（十）

描述：此示例演示如何使用dojox.layout.ResizeHandle小工具来显示一个可调整大小的地图。当你运行这个样本右下角的地图包含了一个调整图片大小。单击并拖动鼠标调整地图的大小的图像。在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_resize/index.html参考联接
复制链接

扫一扫