ArcGIS Scalebar 比例尺充满div

Posted 2021-02-05 net064

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ArcGIS Scalebar 比例尺充满div相关的知识，希望对你有一定的参考价值。

说明：本篇博文地图充满div，上一篇博文是充满整个body

运行效果：

技术分享图片

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Scalebar应用</title>
   <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/esri/css/esri.css" />

<style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{padding:0;}
    </style> 
 
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script type="text/javascript" src="http://localhost/arcgis_js3_api/library/3.3/jsapi/init.js"></script>
<script type="text/Javascript">
    var MyMap;
    var MyTiledMapServiceLayer;
    dojo.require("dojo.parser");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.map");
    dojo.require("esri.dijit.Scalebar");
    var map;

    function init() {
        map = new esri.Map("map", {
            basemap: "topo", // 指定的地图底图.有效选项:"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm". 
            center: [-116.093, 34.218],
            zoom: 7
        });

        dojo.connect(map, "onLoad", function (theMap) {
            var scalebar = new esri.dijit.Scalebar({
                map: map, // 必须的
                scalebarUnit: "english"  // 指定比例尺单位,有效值是"english" or "metric".默认"english"
            });
        });
    }

    dojo.ready(init);  // 初始化加载
    </script> 
  </head> 
  
  <body class="claro"> 
      <div style="width:700px;height:600px;">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:‘headline‘, gutters:false"
         style="width: 100%; height: 100%; margin: 0;"> 
 
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:‘center‘" 
           style="overflow:hidden;"> 
      </div> 
 
    </div> 
          </div>
  </body>


</html>

其中代码

     map = new esri.Map("map", {
            basemap: "topo", // 指定的地图底图.有效选项:"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm". 
            center: [-116.093, 34.218],
            zoom: 7
        });
也可以改写为如下形式：

map = new esri.Map("map", { center: [-122.445, 37.752], zoom: 4 });
MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
map.addLayer(MyTiledMapServiceLayer);

以上是关于ArcGIS Scalebar 比例尺充满div的主要内容，如果未能解决你的问题，请参考以下文章

ArcGIS10全图功能，比例尺很小，如何调整全图功能下的比例尺缩放范围

CSS设置div层充满整个网页

arcmap如何制图

arcgis按方格网分副比例不对

Arcgis使用教程ARCGIS地图制图之固定比例尺设计

Arcgis使用教程ARCGIS地图制图之比例尺设置参数详解

ArcGIS Scalebar 比例尺 充满div

ArcGIS Scalebar 比例尺充满div