地圖小部件—ArcGIS API for JavaScript

電子地圖和傳統的紙質地圖最大的區別就是交互的程度不一樣,而交互性很大程度上由地圖的小部件所控制。傳統的紙製地圖主要有三個基本的部件(要素):比例尺、指北針、圖例,而電子地圖有更多的交互性小部件選擇,在ArcGIS API for JavaScript地圖小部件類主要放在esri/dijit包中。

比例尺(Scalebar)

比例尺是表示圖上一條線段的長度與地面相應線段的實際長度之比。

示例:

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

比例尺

  • 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();

這裏寫圖片描述
這裏寫圖片描述

  • 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();
});

這裏寫圖片描述


定位按鈕(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'));
});

這裏寫圖片描述

  • 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'));
}); 

這裏寫圖片描述
- bookmarks:默認書籤數組,具體可以參考BookmarkItem
- editable:否是可以編輯。


GIS技術交流:GISGO(http://www.gisgo.top)

關注微信公衆號GISXXCOM,GET更多技能
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章