ArcGis 是一款流行的地理信息系统开发平台,本文主要是对ArcGis for JS 学习过程中的一些基础总结,方便了解大致API的使用,详细学习请到官网学习,欢迎联系交流
1. Map -> 地图
属性:
- basemap: 底图
- ground:3D地图的地形特性,2D地图不需要
- layers: 指定图层 (数组集合)
- map.basemap.baseLayers = [layer] 设置图层为底图
- map.add(layer) 添加图层
2. View -> 视图,负责渲染
(1) MapView 用于渲染2D视图
属性:
- container 装载的页面元素
- map Map实例
- center 视图中心点
- scale 比例尺
- zoom 缩放比例
- extent 可见范围
- popupTemplate 详情弹窗
实例方法:
- goTo() 改变位置
- on(type,obj,callback) 添加事件
demo:
view.on('click', function(event){
view.hitTest(event).then(function(response){ //使用hitTest在每次单击交互时查找鼠标指针下的所有对象 })
})
- when(func,func) 加载完成回调
- view.goTo(layer.fullExtent) || view.extent = layer.fullExtent; //定位到图层范围,图层加载完成后回调
(2) SceneView 用于渲染3D视图
属性:
- container 装载的页面元素
- map Map实例
- camara 视角
实例方法:
同MapView
3. Layer图层
- TileLayer server缓存服务图层
When adding a TileLayer to a map in a SceneView, the following limitations exist:
- This layer needs to be published from ArcGIS Server 10.3 and later or ArcGIS Server 10.2.2 with this applied fix.
- If viewingMode is
global, then only services with ArcGIS Online/Bing Maps/Google Maps (Web Mercator) or WGS84 Geographic Coordinate System, Version 2 tiling scheme are supported. - If viewingMode is
local, then only services with projected coordinate systems are supported.
Only Tile layers with the following tiling scheme specifications are supported:
- 256x256 or 512x512 pixel tiles
- Scale levels must increase or decrease by a power of two
- At level
0there shouldn't be more than 30 root tiles. - All tiled layers must have the same tiling scheme and SpatialReference.
- FeatureLayer 空间图层的要素是几何图形
属性:
- url 通过图层地址引入
- portalItem 通过portalItem对象引入
- renderer 图层渲染
- popupTemplate 要素弹窗
- definitionExpression 筛选条件语句,true时显示
- outField 重组返回的属性
- opacity 图层透明度
创建实例:
new FeatureLayer({
url: "services.arcgis.com/V6ZHFr6zdgN…"
})
new FeatureLayer({
portalItem: {
id: "8d26f04f31f642b6828b7023b84c2188"
}
});
操作实例
- layer.visible = true or false 控制图层隐藏显示
- layer.when(func, func) 图层加载完成后回调
- SceneLayer 要素是点或3D对象
同上
4. Renderer 图层渲染器
属性:
type: 不同用途有不同类型 simple & unique-value 等
Visualization typeRendererLocation only SimpleRenderer, HeatmapRenderer Unique (typed) values UniqueValueRenderer Class breaks ClassBreaksRenderer Continuous color/size SimpleRenderer or UniqueValueRenderer with visualVariables Multivariate SimpleRenderer or UniqueValueRenderer with visualVariables symbol 不同视图有不同类型
demo:
(1)SimpleRenderer 使用一个符号呈现图层中的所有要素。一个图层上只有一种渲染效果
renderer = {
type: "simple",
symbol: oneSym
}
(2)UniqueValueRenderer允许您基于一个或多个匹配的字符串属性对图层中的要素进行符号化。一个图层上多种渲染效果(颜色,大小等)
renderer = {
type: "unique-value",
field: "name", //根据此字段区分
defaultSymbol: defaultSym // 默认渲染符号,
defaultLabel: "Other major highways", // 默认标签
// 设定条件
uniqueValueInfos: [
{
value: "I", // 值为 I 时 渲染符号
symbol: fwySym,
label: "Interstate"
},
{
value: "U", // 值为 U 时 渲染符号
symbol: hwySym,
label: "US Highway"
} ]
};
5. Symbol 渲染符号
MapView:
几何类型 | 有效的符号类型 |
|---|---|
| 点 | SimpleMarkerSymbol,PictureMarkerSymbol,TextSymbol |
| 折线 | SimpleLineSymbol,TextSymbol |
| 多边形 | SimpleFillSymbol,PictureFillSymbol,SimpleMarkerSymbol,TextSymbol |
(1) 点
symbol: {
type: 'simple-marker',
color: color,
size: '6px',
outline: {
width: 0.5,
color: "white"
}
}
(2) 线
symbol: {
type: 'simple-line',
color: color,
width: '2px',
}
(3)面
symbol:{
type: 'simple-fill',
color: color.replace('1)', '0.4)'),
outline: {
width: 0.5,
color: color.replace('1)', '0.8)')
}
},
SceneView:
几何类型 | 有效的符号类型 |
|---|---|
| 点 | PointSymbol3D,LabelSymbol3D |
| 折线 | LineSymbol3D,LabelSymbol3D |
| 多边形 | PolygonSymbol3D,LabelSymbol3D |
| 网格 | MeshSymbol3D,LabelSymbol3D |
3D Symbol 有 symbolLayers 属性
(1) 点
symbol = {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{ type: "object", // autocasts as new ObjectSymbol3DLayer()
width: 5,
height: 10,
depth: 15,
resource: { primitive: "cube" },
material: { color: "red" }
}]
};
(2)线
symbol = {
type: "line-3d", // autocasts as new LineSymbol3D()
symbolLayers: [{
type: "path", // autocasts as new PathSymbol3DLayer()
size: 500,
material: { color: [ 128,128,128 ] }
}]
};
(3)面
symbol = {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [
{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
material: {
color: "#9E559C"
},
edges: {
type: "solid",
color: "#4c294b",
size: 1.5
}
}]
};
6. Widgets 地图小工具
常用工具
- BasemapToggle 底图切换
- Search 搜索栏
- Legend 图例组件
添加方法:
- view.ui.add(widgets, position)
-view: view实例
-widget: widget实例
-position: 'top-left' 'bottom-right' 等






