地图小部件—ArcGIS API for JavaScript

太过爱你忘了你带给我的痛 2022-06-10 03:42 602阅读 0赞

> 电子地图和传统的纸质地图最大的区别就是交互的程度不一样，而交互性很大程度上由地图的小部件所控制。传统的纸制地图主要有三个基本的部件（要素）：比例尺、指北针、图例，而电子地图有更多的交互性小部件选择，在ArcGIS API for JavaScript地图小部件类主要放在`esri/dijit`包中。

### 比例尺（Scalebar） ###

> 比例尺是表示图上一条线段的长度与地面相应线段的实际长度之比。

示例：

require(["esri/dijit/Scalebar"], function(Scalebar) { 
        var scalebar = new Scalebar({
              map: map,
              attachTo: "bottom-left",
              scalebarUnit: "dual"
            });
     });

![比例尺][SouthEast]

*  **attachTo**：代表比例尺在地图的位置，可以是”top-right”,”bottom-right”,”top-center”,”bottom-center”,”bottom-left”,”top-left”。默认是 “bottom-left”。
 *  **map**：表示标识的地图
 *  **scalebarStyle**：比例尺样式，可以是：”ruler” 或”line”。
 *  **scalebarUnit**：比例尺单位。可以是”english” 或”metric”或”dual”（同时显示english和metric）。默认是english（英尺）

--------------------

### 鹰眼图（OverviewMap） ###

> 鹰眼图是GIS中一个基本的功能，顾名思义，在鹰眼图上可以象从空中俯视一样查看地图框中所显示的地图在整个图中的位置

require(["esri/dijit/OverviewMap"], function(OverviewMap) { 
        var overviewMapDijit = new OverviewMap({
            map: map,
            attachTo: "bottom-right",
            color:" #D84E13",
            visible: true
        });
        overviewMapDijit.startup();
    });`

![OverviewMap][]

*  **map**：标识的地图。
 *  **attachTo**：鹰眼图位置。
 *  **color**：鹰眼图边框颜色。
 *  **baseLayer**：添加到鹰眼图上的底图（必须已经加载）
 *  **width**：鹰眼宽度。默认地图的四分之一。
 *  **height**：鹰眼图高度。默认地图的四分之一。
 *  **maximizeButton**：最大最小化控制按钮的可见性，默认为false，不可见。
 *  **opacity**：鹰眼图的透明度，默认是0.5。
 *  **visible**：鹰眼图的可见性，默认是false

--------------------

### 底图库（BasemapGallery） ###

BasemapGallery小部件装载了ArcGIS.com中的底图库或用户定义的一组地图或图像服务。当从BasemapGallery中选择一个新的底图时，将从地图中删除原底图图层，并添加新的底图图层。

require([
      "esri/map", "esri/dijit/BasemapGallery", ... 
    ], function(Map, BasemapGallery, ... ) {
      var map = new Map( ... );
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGalleryDiv");
    });

![BasemapGallery][]

*  **showArcGISBasemaps**：是否显示ArcGIS.com上的在线底图。
 *  **map**：标识的地图

--------------------

### 底图切换器（BasemapToggle） ###

和BasemapGallery不同，BasemapToggle提供了一个简单的按钮用来在两个底图之间切换。

var toggle = new BasemapToggle({
            map: map,
            basemap: "satellite"
          }, "BasemapToggle");
    toggle.startup();

![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

*  **basemap**：要切换的底图名，默认是“hybrid”
 *  **map**：标识的地图。

--------------------

### 图例（Legend） ###

> 图例是集中于地图一角或一侧的地图上各种符号和颜色所代表内容与指标的说明，有助于更好的认识地图。

require([
      "esri.Map", "esri/dijit/Legend", ... 
    ], function(Map, Legend, ... ) {
      var map = new Map( ... );
      var legend = new Legend({
        map: map
      }, "legendDiv");
      legend.startup();
    });

![这里写图片描述][SouthEast 3]

--------------------

### 定位按钮（LocateButton） ###

> LocateButton提供了一个简单的按钮来定位和缩放到用户的位置。  
> “定位”小部件仅在安全网页（https）和localhost上支持。

var locateButton = new LocateButton({
      map: map
    }, "<dom_id>");

![LocateButton][]  
\- **centerAt**：定位后是否将地图中心移到所在位置。  
\- **scale**：定位后的地图比例  
\- **symbol**：自定义高亮位置的符号。

--------------------

### 测量工具（Measurement） ###

> 测量小部件包含计算当前位置、测量距离和面积等工具

require([
      "esri/map", "esri/dijit/Measurement", "esri/units", "dojo/dom", ... 
    ], function(Map, Measurement, Units, dom, ... ) {
      var map = new Map( ... );
      var measurement = new Measurement({
        map: map,
        defaultAreaUnit: Units.SQUARE_MILES,
        defaultLengthUnit: Units.KILOMETERS
      }, dom.byId('measurement'));
    });

![这里写图片描述][SouthEast 4]

*  **defaultAreaUnit**：默认的面积单位。
 *  **defaultLengthUnit**：默认的长度单位。
 *  **fillSymbol**：测量面积时绘制区域的符号。
 *  **lineSymbol**：测量长度时线的符号。

--------------------

### 书签（Bookmarks） ###

> 书签窗口小部件可以将当前的地图范围保存为书签。该小部件提供了一个用户界面，允许用户添加，删除和编辑书签。

require([
      "esri/map", "esri/dijit/Bookmarks", "dojo/dom", ... 
    ], function(Map, Bookmarks, dom, ... ) {
      var map = new Map( ... );
      var bookmarks = new Bookmarks({
        map: map, 
        bookmarks: bookmarks
      }, dom.byId('bookmarks'));
    });

![这里写图片描述][SouthEast 5]  
\- **bookmarks**：默认书签数组，具体可以参考BookmarkItem  
\- **editable**：否是可以编辑。

--------------------

GIS技术交流：[GISGO（http://www.gisgo.top）][GISGO_http_www.gisgo.top]

关注微信公众号 GISXXCOM，GET更多技能  
![这里写图片描述][SouthEast 6]

[SouthEast]: /images/20220610/a8546c2aaaef43ffae3bb4cc7afe50ed.png
[OverviewMap]: /images/20220610/0c6c2b63de214b8e89a67cf3d5e9fb6c.png
[BasemapGallery]: /images/20220610/81c9a796b9604b668627531bb0501dd3.png
[SouthEast 1]: /images/20220610/34672f55db0f46169593682539857611.png
[SouthEast 2]: /images/20220610/26189ba1e2b142f38b2dfef563f16a3e.png
[SouthEast 3]: /images/20220610/f7237075b80e4f4d84dd964ac1cac168.png
[LocateButton]: /images/20220610/07d38c41ab5a4d42b68e175e9955d80a.png
[SouthEast 4]: /images/20220610/fa97e39aae174401b47908d2ecb2d111.png
[SouthEast 5]: /images/20220610/ad766b4e593a485d91fcfe69b1f536f0.png
[GISGO_http_www.gisgo.top]: http://www.gisgo.top/
[SouthEast 6]: /images/20220610/eed8bcb04f724e7faf11509919d9b639.png