您的位置:

详解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数据,希望对读者有所帮助。

详解ArcGIS for JS

2023-05-19
ArcGIS for Android:地图应用开发的完美解决

2023-05-20
ArcGIS for Android:地图应用开发的最佳拍档

一、ArcGIS for Android的简介 ArcGIS是由Esri公司开发的一套地理信息系统软件,ArcGIS for Android则是其Android平台下的应用程序。ArcGIS for

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
python笔记二(2python)

2022-11-11
java方法整理笔记(java总结)

2022-11-08
ArcGIS影像拼接

2023-05-22
重学java笔记,java笔记总结

2022-11-23
发篇java复习笔记(java课程笔记)

2022-11-09
javascript简要笔记,JavaScript读书笔记

2022-11-17
ArcGIS超级工具详解

2023-05-17
python基础学习整理笔记,Python课堂笔记

2022-11-21
java学习笔记(java初学笔记)

2022-11-14
ArcGIS缓冲区分析的详细解析

2023-05-20
印象笔记记录java学习(Java成长笔记)

2022-11-12
js待办事项列表添加删除代码的简单介绍

本文目录一览: 1、“点击此处可添加笔记”的代码怎么写 2、js动态添加、删除html代码 3、vivo手机便签怎么一起删 “点击此处可添加笔记”的代码怎么写 输入符号就可以了第一步打开手机,点击备忘

2023-12-08
java客户端学习笔记(java开发笔记)

2022-11-14
Arcgis 10.7安装教程

2023-05-20
ArcGIS 10.2安装步骤详解

2023-05-24
ArcGIS Pro 2.8 详解

2023-05-19