1.简介

1.1ArcGIS是什么

用来构建2D和3D地图应用的一套简单,易用的API

具备强大制图能力和基于数据驱动的地图可视化能力

用来构建WebGIS系统

1.2工作机制

image.png

1.3ArcGIS的引用

1.3.1CDN引入

  1. <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
  2. <script src="https://js.arcgis.com/4.18/"></script>

1.3.2离线部署

image.png

1.3.2使用NPM

下载

  1. npm install @arcgis/core
  2. yarn add @arcgis/core

在文件中引入

  1. import Map from "@arcgis/core/Map";

2.升级指南

2.1属性

image.png

2.2监听属性变化

image.png
举例: 每次地图的底图的标题发生变化时,都会触发回调

  1. map.watch('basemap.title',function(newValue, oldValue,property, object){
  2.   console.log('New Value: ',newValue)
  3.   console.log('Old Value: ',oldValue)
  4.   console.log('Watched property: ',property)
  5.   console.log('Watched object: ',object)
  6. })

2.3增加Views

对地图的所有操作是通过views来操作
map只提供数据和图层
image.png

2.3.1创建2D视图(MapView)

  1. function (Map, MapView){
  2.   map = new Map({
  3.     basemap: 'topo'
  4.   })
  5.   view = new MapView({
  6.     container:'viewDiv',
  7.     map:map
  8.   })
  9. }

2.3.2创建3D视图(SceneView)

  1. function (Map, SceneView){
  2.   map = new Map({
  3.     basemap:'topo'
  4.   })
  5.   view = new SceneView({
  6.     container: 'viewDiv',
  7.     map: map
  8.   })
  9. }

2.4Autocasting自动隐射

用于将js对象转化为Arc GIS类类型

render属性就是用来储存传递给构造函数的属性值

在内部实例化对象

2.4.1老用法

首先需要require包

然后将它们实例化
image.png

2.4.2新用法

在render属性中自动映射

自动实例化这些类
image.png

2.5Promise

image.png

3.入门

3.1Map

Map对象仅仅是个容器,储存了baselayers和operational layers包含的地理相关信息

Map对象包含一系列属性和方法来储存,管理和叠加图层到2D和3D场景中
image.png

3.2View

View为Map对象提供一种渲染和交互的方式

View是MapView和SceneView的基类,本身没有构造函数,只能通过MapView和SceneView来创建实例

3.2.1View和Map的关系

image.png
image.png

3.2.2服务和Map的关系

image.png

3.3Geometry

image.png
image.png

3.4点击事件

View对象允许用户对地图组件进行交互

例如当用户点击地图时

事件是与指向地图的view或者指向图层的layerView进行处理

事件不直接通过map或者layer来处理
image.png

3.5Layers

image.png

3.5.1用于查询,可视化,数据分析的图层

image.png
image.png

3.5.2用于提供地理背景的图层

image.png

3.5.3核心图层类型

image.png

3.5.4加载示例

image.png
资源
image.png