ArcGIS JavaScript 核心概念

原文來自于
Maps and Views:https://developers.arcgis.com/javascript/latest/guide/maps-and-views/

介紹

地圖(Map)是用于管理對圖層(layers )底圖(basemaps)的引用的容器烤咧。視圖(Views)用于顯示地圖圖層并處理用戶交互恰响,彈出窗口,窗口小部件和地圖位置遮糖。

類關(guān)系示意圖.png

關(guān)于地圖

地圖是從Map類創(chuàng)建的嫌变。Map對象始終傳遞給View對象璃饱。有兩個View類用于顯示地圖:MapView用于2D地圖 和 SceneView類用于3D地圖胖笛。

創(chuàng)建地圖

創(chuàng)建地圖的一種方法是:Map類在指定一個底圖(basemap)和可選的圖層集合(layers)時創(chuàng)建類的新實例。

const myMap = new Map({                // 創(chuàng)建一個Map對象
  basemap: "streets-vector",
  layers: additionalLayers             // 可選画切,添加其他圖層集合
});

const mapView = new MapView({          // 新建View對象竣稽,Map對象添加到View對象中
  map: myMap,
  container: "mapDiv"
});

詳細了解可以添加到地圖的不同類型的圖層

從Web地圖或Web場景創(chuàng)建地圖

創(chuàng)建地圖的第二種方法是:加載Web地圖(用于2D地圖)或 Web場景(用于3D地圖)。

Web地圖和Web場景是包含地圖或場景設(shè)置的JSON結(jié)構(gòu)毫别。這包括底圖娃弓,圖層,圖層樣式拧烦,彈出窗口忘闻,圖例钝计,標(biāo)簽等的設(shè)置恋博。它們通常與ArcGIS Online地圖查看器ArcGIS Online場景查看器以交互方式創(chuàng)建。ArcGIS Online或ArcGIS Enterprise為其分配唯一ID并將其存儲為門戶項目私恬。

WebMap類和WebScene類可分別通過其獨特的ID來訪問加載Web地圖和Web場景债沮。標(biāo)識項目的ID可以用在地圖查看器場景查看器或者項目頁面中中的URL的參數(shù)。默認門戶網(wǎng)站是ArcGIS Online本鸣,URL是https://www.arcgis.com疫衩。如果使用ArcGIS Enterprise,則必須指定門戶URL荣德。

例: https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30

當(dāng)WebMapWebScene對象加載Web地圖和Web場景時闷煤,所有設(shè)置都會自動應(yīng)用于MapScene。例如涮瞻,設(shè)置底圖和圖層鲤拿,應(yīng)用圖層樣式,并為每個圖層定義彈出窗口署咽。

注意:配置MapScene的最快方法是近顷,以交互方式創(chuàng)建Web地圖和Web場景并通過唯一ID加載它們。在創(chuàng)建Web地圖”顯示W(wǎng)eb地圖教程中了解如何創(chuàng)建和加載Web地圖宁否。

  • 用WebMap創(chuàng)建地圖

const webMap = new WebMap({                        // 定義Web地圖實例
  portalItem: {
    id: "41281c51f9de45edaf1c8ed44bb10e30",
    portal: "https://www.arcgis.com"               // 默認值:ArcGIS門戶網(wǎng)站
  }
});

const view = new MapView({
  map: webMap,                                     // 加載Web地圖
  container: "viewDiv"
});

顯示W(wǎng)eb地圖教程中了解更多信息窒升。

  • 用WebScene創(chuàng)建場景

const webScene = new WebScene({                    // Define the web scene reference
  portalItem: {
    id: "579f97b2f3b94d4a8e48a5f140a6639b",
    portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal
  }
});

const view = new SceneView({                       // Load the web scene
  map: webScene,
  container: "viewDiv"
});

顯示W(wǎng)eb場景教程中了解更多信息。

關(guān)于視圖

視圖的主要作用是顯示圖層慕匠,彈出窗口和UI小部件饱须,處理用戶交互,以及指定地圖應(yīng)該關(guān)注的世界的哪個部分(即地圖的“范圍”)台谊。

創(chuàng)建視圖

有單獨的類用于為地圖和場景創(chuàng)建視圖:MapViewSceneView類蓉媳。MapView用于顯示對象的2D視圖,和SceneView用于顯示3D視圖Map青伤。

要使地圖可見督怜,視圖對象需要一個Map對象,并且container屬性正確引用div元素的id屬性狠角。

const mapView = new MapView({          // Create MapView object
  map: myMap,
  container: "mapViewDiv"
});

const sceneView = new SceneView({      // Create SceneView object
  map: myMap,
  container: "sceneViewDiv"
});

設(shè)置地圖的顯示內(nèi)容

創(chuàng)建視圖SceneViewMapView時可以通過在設(shè)置中心點center和(縮放級別zoom或比例尺scale)屬性來設(shè)置的初始位置号杠。

const view = new MapView({
  center: [ -112, 38 ],          // 地圖的中心 經(jīng)度/緯度
  zoom: 13                      // 將細節(jié)的縮放級別(LOD 細節(jié)層次(en:Level of detail))設(shè)置為13
});

注意:通過以編程方式更新屬性,視圖初始位置也可以改變。

使用SceneView(3D)時姨蟋,可以通過定義鏡頭camera屬性來設(shè)置觀察者的位置屉凯。

var view = new SceneView({
  camera: {
    position: [
       -122, // 經(jīng)度lon
         38, // 緯度lat
      50000  // 海拔(米)
    ],
    heading: 95, // 相機的羅盤角度
    tilt: 65 // 相機相對于地面的傾斜
  }
});

了解如何在創(chuàng)建入門應(yīng)用程序教程中創(chuàng)建2D和3D視圖。

將視圖設(shè)置為新位置的動畫

goTo方法還可以更改視圖MapView的位置眼溶,而且提供了平滑過渡的附加選項悠砚。該技術(shù)通常用于地圖中心從一個位置“飛行”到另一個位置或者縮放到搜索結(jié)果。

goTo方法可以接受Geometry堂飞,GraphicViewpoint對象灌旧。其他選項可以控制動畫。

view.goTo({                            // 自定義動畫移動到設(shè)定的點
  target: {
      center: [ -114, 39 ]
    }, {
      duration: 5000
  });
});

與視圖交互

該視圖還負責(zé)處理用戶交互和顯示彈出窗口绰筛。該視圖為用戶交互提供了多個事件處理程序枢泰,例如鼠標(biāo)單擊,鍵盤輸入铝噩,觸摸屏交互衡蚂,操縱桿和其他輸入設(shè)備。

當(dāng)用戶單擊地圖時骏庸,默認行為是顯示已在圖層中預(yù)先配置的任何彈出窗口毛甲。可以使用以下代碼具被,通過監(jiān)聽click事件并使用該hitTest()方法查找用戶單擊的功能玻募。

view.popup.autoOpenEnabled = false;  // 禁用默認彈出行為

view.on("click", function(event) { // 監(jiān)聽點擊事件
  view.hitTest(event).then(function (hitTestResults){ // 用戶單擊的功能實現(xiàn)
    if(hitTestResults.results) {
      view.popup.open({ // 打開一個彈出窗口以顯示結(jié)果
        location: event.mapPoint,
        title: "Hit Test Results",
        content: hitTestResults.results.length + "Features Found"
      });
    }
  })
});

了解有關(guān)視圖事件手動配置彈出窗口的詳細信息。

將小部件和UI組件添加到視圖中

視圖也是用于添加窗口小部件HTML元素的容器硬猫。在view.ui提供了一個DefaultUI其用于顯示視圖的缺省窗口小部件补箍。還可以使用view.ui.add方法將其他窗口小部件和HTML元素添加到視圖中。下面的代碼片段演示了添加搜索地址或地點的小部件啸蜜。

  var searchWidget = new Search({
    view: view
  });

  // 將搜索小部件添加到視圖的右上角
  view.ui.add(searchWidget, {
    position: "top-right"
  });

了解有關(guān)向視圖添加小部件的詳細信息坑雅。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市衬横,隨后出現(xiàn)的幾起案子裹粤,更是在濱河造成了極大的恐慌,老刑警劉巖蜂林,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件遥诉,死亡現(xiàn)場離奇詭異,居然都是意外死亡噪叙,警方通過查閱死者的電腦和手機矮锈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來睁蕾,“玉大人苞笨,你說我怎么就攤上這事债朵。” “怎么了瀑凝?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵序芦,是天一觀的道長。 經(jīng)常有香客問我粤咪,道長槽卫,這世上最難降的妖魔是什么键俱? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任屿聋,我火速辦了婚禮黎比,結(jié)果婚禮上笋庄,老公的妹妹穿的比我還像新娘扒磁。我一直安慰自己糕档,他們只是感情好拔第,可當(dāng)我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著艾疟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪敢辩。 梳的紋絲不亂的頭發(fā)上蔽莱,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天,我揣著相機與錄音戚长,去河邊找鬼盗冷。 笑死,一個胖子當(dāng)著我的面吹牛同廉,可吹牛的內(nèi)容都是我干的仪糖。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼迫肖,長吁一口氣:“原來是場噩夢啊……” “哼锅劝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蟆湖,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤故爵,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后隅津,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诬垂,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年伦仍,在試婚紗的時候發(fā)現(xiàn)自己被綠了结窘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡充蓝,死狀恐怖隧枫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤悠垛,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布线定,位于F島的核電站,受9級特大地震影響确买,放射性物質(zhì)發(fā)生泄漏斤讥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一湾趾、第九天 我趴在偏房一處隱蔽的房頂上張望芭商。 院中可真熱鬧,春花似錦搀缠、人聲如沸铛楣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽簸州。三九已至,卻和暖如春歧譬,著一層夾襖步出監(jiān)牢的瞬間岸浑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工瑰步, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留矢洲,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓缩焦,卻偏偏與公主長得像读虏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子袁滥,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容