Arcgis学习

1 初始化

const mapLoadReady = new Promise((resolve)=>{
	require(["esri/config", "esri/Map", "esri/views/MapView"], function (
          esriConfig,
          Map,
          MapView
        ) {
          esriConfig.apiKey = "YOUR_API_KEY";

          const map = new Map({
            basemap: "arcgis-topographic", // Basemap layer service
          });

          const view = new MapView({
            map: map,
            center: [-118.805, 34.027], // Longitude, latitude
            zoom: 13, // Zoom level
            container: "viewDiv", // Div element
          });
          view.when(()=>{
            resolve(view)
          })
})

2 使用ui

mapLoadReady.then(e=>{
	const view = e.view
	view.ui.add('zoom','top-right')
	view.ui.add(document.querySelector('#viewUi','top-left'))
})

3 设置圆形

const geometry = new Circle({
	//圆心位置
	center: new Point({
		longitude: -109.254161,
		latitude: 44.920980,
	}),
	//设置半径
	radius: 50,
	//当中心点参考设置为wkid：3857或4326，以最小化失真
	geodesic: true,
	radiusUnit: 'meter',
})

3 纯色填充

const symbol = new SimpleFillSymbol({
	color: [255, 0, 0, .5],
})

4 显示图形

<VaMapView>
	<VaGraphic :geometry='geometry' symbol="symbol" />
</VaMapView>

5 约束scale、zoom、rotation

使用Extend描述MapView的可见部分

const geometry = new Extent({
	xmax: 90,
  xmin: -169.8999245727299,

  ymax: 88.13649929457745,
  ymin: -90.42600300213113 ,
})

const defaultOptions = {
	constarints:{
		lods: lods.slice(1,18) as any,
		geometery: geometry	
	}
}

<VaMapView :defaultOptions="defaultOptions">
	<VaSkyBasemap/>
	<VaGraphicsLayer :opacity="1">
		<VaGraphic :geometry="geometry" :symbol="symbol"/>
	</VaGraphicsLayer>
	
</VaMapView>

6 限制拖拽范围

const limitExtent = new Extent({
	xmax:90,
	xmin:-90,
	ymax:90,
	ymin:-90,
})

<VaLimitExtent :limitExtent="limitExtent" />

7 展示三维地图

使用SceneView可以展示3D地图，如果要展示2D地图，可以使用MapView

8 在view.when()后加载节点

<VaViewWhen>
	<SubNode></SubNode>
</VaViewWhen>

9 使用属性生成底图

TileLayer允许使用缓存添加图层到map中，这种方式要比MapImageLayer要快

const baseLayer: __esri.LayerProperties[] = [
	new TileLayer({
		url:''
	})
]

<VaBaseMap :base-layers="baseLayer" />

10 使用图层组件生成底图

<VaBaseMap>
	<VaTileLayer :orphan='true' :url=''>
		<VaBaseMapLayers/>
	</VaTileLayer>

</VaBaseMap>

11 使用天地图作为底图

<VaMapView>
	<VaSkyBaseMap type='img_c' anno='false' :spatial-reference="{wkid: 4326}">
	//添加切换
	<VaBasemapToggleNextBasemap/>
</VaSkyBaseMap>

</VaMapView>

12 GeoJsonLayer

用于创建基于GeoJson的层，GeoJson数据必须符合RFC7946规范，该规范规定坐标位于WGS84中

const layerLoad:__VaGeojsonLayer.OnLoad = async(e)=>{
	await e.layer.when()
	const view = e.view as __esri.MapView
	view.goto(e.layer.fullExtent)
}

<VaMapView>
	<VaGeojsonLayer
	:cursor="'pointer'"
	:geometry-type="'polygon'"
	:url="url"
	@click="layerClick"
	@load="layerLoad">
		<VaPopupTemplate>
			<template #default="{attributes}">
				{{attributes}}
			</template>
		</VaPopupTemplate>
		 <VaFeaturePopupLayer>
       <template #default="{attributes}">
        {{ attributes }}
      </template>
	    </VaFeaturePopupLayer>
	</VaGeojsonLayer>
</VaMapView>

13 所有图层

• BuildingSceneLayer：可视化建筑物的复杂模型，允许与建筑物的所有组件进行交互
• DimensionLayer：显示3D视图的长度和距离的测量注释
• ElevationLayer：用于在3D视图中渲染高程的平铺层
• FeatureLayer：可以通过url直接展示，点击要素图层可以查看要素属性，并设置一些属性名显示在图层上
• ImageryLayer：从动态图像服务中检索和显示数据
• ImageTileLayer：显示来自平铺图像服务的光栅数据
• IntergratedMeshLayer：用于从大量堆叠图像中构建3D对象
• LineOfSightLayer：计算从单个观察者位置到一组目标的实现，结果在3D视图中可视化
• MapImageLayer：允许显示和分析来自地图服务中定义的子层数据，导出图像而不是特征
• MapNotesLayer：允许从地图查看器中显示和修改地图注释
• PointCloudLayer：用于可视化大量点
• RouteLayer：主要显示路线
• SceneLayer：将场景数据以网格形式加载
• StreamLayer：可以连接到流服务或websocket服务，实时显示一组跟踪对象相关的观察流，观察结果可以包括对位置、属性或两者的更改
• SubtypeGrouplayer：为每个子类型创建一个SubtypeSublayer，允许每个子类型都有自己配置的层属性，因此每个子层可以使用不同的可见性、渲染器和弹出属性来可视化其特征数据。这允许子层之间进行交互，但他们共享相同的特征源
• TileLayer：允许使用缓存地图服务，比mapImageLayers渲染更快
• VectorTileLayer：访问缓存的数据块，并以矢量格式呈现
• VoxelLayer：表示多维体积数据，如大气或海洋数据
• CSVLayer：基于CSV文件的点层，数据通常包括地理点特征（经纬度），CSVLayer一次获取所有数据，并在加载时将它们存储在客户端
• GeoJSONLayer：用于创建基于GeoJson的层
• GraphicsLayer：包含一个或多个客户端图像，每个图像都呈现在一个LayerView中
• GroupLayer：可以将几个子层组织成一个公共层的能力
• MediaLayer：用于将图像和视频添加到指定地理位置的地图中，可以用来显示旧的天气数据、卫星图像等