ArcGIS For JavaScript APi Map with scalebar(地图比例尺内/外)————（二十三）

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

X-rapido

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

阅读量1w

点赞数

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

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

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

（1）内部比例尺

此示例演示如何添加一个比例尺地图。可以被添加到在地图上，或在一个用户指定的位置的比例尺。下面的代码片段显示了默认的比例尺显示在地图的左下角。

var scalebar=new esri.dijit.Scalebar({
map: map
});

您可以修改该位置的地图由中设置attachTo选项之一以下值"top-right","bottom-right","top-center","bottom-center","bottom-left","top-left".

var scalebar=new esri.dijit.Scalebar({

map:map,
attachTo:"bottom-left"
});

查看原文：ArcGIS For JavaScript APi Map with scalebar —— 地图比例尺

引用联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebar

在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebar/index.html

代码如下：

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map with scalebar</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/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 src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script> 
      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",
          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 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> 
  </body> 
</html>

效果如下：

（2）比例尺在外部

参考联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebarext

在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebarExt/index.html

此示例演示如何显示一个比例尺的地图之外，在指定的位置。下面的代码片段创建了一个新的比例尺，并把它的比例尺的构造函数中指定的在div。

var scalebar=new esri.dijit.Scalebar({
map: map,
scalebarUnit:"metric"
}, dojo.byId("scalebar"));

代码如下：

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Scalebar</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script> 
      dojo.require("dojo.parser");
      dojo.require("esri.dijit.Scalebar");
      dojo.require("esri.map");

      var map;
 
      function initialize() {
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-116.093, 34.218],
          zoom: 7
        });

        dojo.connect(map, "onLoad", function() {
          var scalebar = new esri.dijit.Scalebar({
            map: map,
            scalebarUnit: "english"
          }, dojo.byId("scalebar"));
        });
      }
 
      dojo.ready(initialize);
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="map" style="position: relative; width: 900px; height: 500px; border: 1px solid #000;"></div>
    <div id="scalebar" style="position:absolute;left:100px;top:530px;"></div>
  </body> 
 
</html>

效果如图：

（3）问题：

不知道什么原因，很多示例中都是第一次加载没问题，刷新页面时候不会再显示，比如这个比例尺也是一样，我用的是IE9浏览器

X-rapido

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS For JavaScript APi Map with scalebar(地图比例尺内/外)————（二十三）

（1）内部比例尺此示例演示如何添加一个比例尺地图。可以被添加到在地图上，或在一个用户指定的位置的比例尺。下面的代码片段显示了默认的比例尺显示在地图的左下角。var scalebar=new esri.dijit.Scalebar({ map: map});您可以修改该位置的地图由中设置attachTo选项之一以下值"top-right","bottom-right","t
复制链接

扫一扫