詳解ArcGIS for JS

ArcGIS for JS是Esri公司提供的一種基於JavaScript API的Web GIS開發平台。通過ArcGIS for JS，開發人員可以利用圖層、地圖和3D場景等組件快速搭建出豐富、交互性高的Web GIS應用。本文將從多個方面對ArcGIS for JS進行詳細介紹。

一、ArcGIS for JS介紹

ArcGIS for JS歷經多年的發展，已經從最初的二維地圖API逐漸發展成一套功能強大、集成多種地理信息技術的Web GIS開發平台。目前，ArcGIS for JS主要支持以下功能：

• 製圖和可視化：通過ArcGIS API，可以將數據在地圖上進行可視化呈現。
• GIS分析：可以進行空間分析、數據挖掘、模型分析等GIS分析操作。
• 數據編輯：支持在線對地圖進行編輯，包括屬性編輯、幾何編輯等。
• 應用程序開發：可以通過ArcGIS for JS進行Web GIS應用程序的開發，可以在任何設備上訪問。

ArcGIS for JS依賴於Esri ArcGIS Online或ArcGIS Enterprise，使得用戶可以快速、輕鬆的搭建開發環境，開發Web GIS應用程序。

二、ArcGIS for JS的使用

1、載入地圖

require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) {
    var webmap = new WebMap({
        portalItem: { 
            id: "webmap_id" 
        }
    });

    var view = new MapView({
        map: webmap,
        container: "viewDiv"
    });
});

上述代碼使用ArcGIS for JS創建了一個地圖，並將地圖添加到指定的容器中，可以在任何設備上訪問。

2、載入圖層

require(["esri/layers/FeatureLayer"], function(FeatureLayer) {
    var featureLayer = new FeatureLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3"
    });

    map.add(featureLayer);
});

上述代碼使用ArcGIS for JS載入一個FeatureLayer，並將其添加到地圖上。

3、數據查詢

require(["esri/tasks/support/Query"], function(Query) {
    var query = new Query({
        where: "POP2000 > 20000",
        outFields: ["NAME", "POP2000", "POP_RANK"]
    });

    featureLayer.queryFeatures(query).then(function(results) {
        // results.features返回查詢到的要素列表
    });
});

上述代碼使用ArcGIS for JS進行數據查詢，並將查詢到的結果返回。

4、3D場景開發

require(["esri/views/SceneView", "esri/WebScene"], function(SceneView, WebScene) {
    var webscene = new WebScene({
        portalItem: {
            id: "webscene_id" 
        }
    });

    var view = new SceneView({
        map: webscene,
        container: "viewDiv"
    });
});

上述代碼使用ArcGIS for JS創建一個3D場景，並將其添加到指定的容器中。

三、ArcGIS for JS載入slpk數據

1、載入slpk數據

require([
  "esri/WebScene",
  "esri/layers/SceneLayer",
  "esri/views/SceneView"
], function(WebScene, SceneLayer, SceneView) {
  const webscene = new WebScene({
    portalItem: {
      id: "de8f3adbcf3441efb1ea1caf6db8d2a6"
    }
  });
  const view = new SceneView({
    container: "viewDiv",
    map: webscene
  });

  const slpkLayer = new SceneLayer({
    portalItem: {
      id: "4fdf1531c7384481a36d96cf7521c88d"
    }
  });

  webscene.add(slpkLayer);
});

2、載入slpk並設置邊界框(BoundingBox)

require([
  "esri/layers/SceneLayer",
  "esri/layers/support/Raster",
  "esri/geometry/Extent",
], function(SceneLayer, Raster, Extent) {

  const url = "http://srvags6qisvr001/arcgis/rest/directories/arcgisplatform/content/items/b07413a8be6c4 cf29fdb60dada52d94f/data";
  //載入slpk數據
  const slpkLayer = new SceneLayer({
    title: "Building",
    url: url,
    outFields: ["*"],
  });

  //設置邊界框
  const bbox = new Extent({
    xmin: -13501915.078277311,
    ymin: 4429443.939927257,
    xmax: -13496639.499738102,
    ymax: 4433217.518466467,
    spatialReference: {
      wkid: 3857,
    },
  });

  slpkLayer.when(() => {
    //設置圖層範圍
    slpkLayer.fullExtent = bbox;
    //添加到地圖中
    map.add(slpkLayer);
  });
});

3、載入slpk數據並進行數據查詢

require([
  "esri/layers/SceneLayer",
  "esri/tasks/support/Query"
], function(SceneLayer, Query){

  const slpkLayer = new SceneLayer({
    portalItem:{
      id: "6b9f09925b2948f4b6939122f15ebab1"
    },
    outFields:["*"]
  });

  //設置查詢條件
  const query = new Query();
  query.where = "buildingheight > 100";

  slpkLayer.queryFeatures(query).then((featureSet) => {
    // featureSet.features包含查詢到的要素
  });
});

四、總結

本文從多個方面對ArcGIS for JS進行了詳細的介紹，從基礎的地圖、圖層載入到高級的數據查詢、3D場景開發，都進行了詳細說明。同時，本文還會了如何載入並使用slpk數據，希望對讀者有所幫助。