arcgis js 学习之路(二)

前言

一般我们加载图层都是提供服务url通过arcgis js给定的接口(ArcgisDynamiticMapService、FeatureLayer)，创建新的图层，那么在没有安装arcgis server，具体点说不依赖地图服务怎么创建图层呢？这就是我们今天要讲的自定义图层。

1. 自定义动态图层和渲染方式
   了解一下基本概念，每个动态服务都会绑定两个数组：DynamiticLayerInfo和LayerDrawOptions。
   1、动态服务图层的数据源信息是存储在DynamiticLayerInfo类型数组中，动态图层的渲染信息是储存在LayerDrawOptions类型数组中，每个动态服务图层都会关联这两者。
   2、每次向动态服务添加动态图层都会在DynamiticLayerInfo中添加一条记录，图层在地图上的绘制与该数组索引号相关，索引号越大，在地图最下方，添加的新图层需要定义渲染方式，渲染方式定义在LayerDrawOptions中，不然不能显示在地图上。

那怎么得到DynamiticLayerInfo数组呢？

// 获取与该动态服务关联的所有图层信息，未添加动态图层信息时，则返回地图服务本身包含的图层信息数组
var _dynamiticLayerInfos = dynamitic.createDynamicLayerInfosFromLayerInfos();

实现自定义动态图层：

// 定义DynamiticLayerInfo
var _dynamiticLayerInfo = new DynamiticLayerInfo();
_dynamiticLayerInfo.id = _dynamiticLayerInfos.length;
_dynamiticLayerInfo.name = '服务名';
_dynamiticLayerInfo.defaultVisibility = true;

var _tabelDataSource = new TabelDataSource();
_tabelDataSource.workspaceId = 'workspaceId';
_tabelDataSource.dataSourceName = '服务名';

var _layerSource = new LayerSource();
_layerSource.dataSource = _tabelDataSource; 

_dynamiticLayerInfo .source = _layerSource;
// 这两种可选一种，push将动态图层放在最下面，splice将动态图层放在最上面
_dynamiticLayerInfos.push(_dynamiticLayerInfo);
_dynamiticLayerInfos.splice(0,0,_dynamiticLayerInfo);
dynamiticLayer.setDynamiticLayerInfos(_dynamiticLayerInfos);

实现自定义动态图层渲染方式：

var _LayerDrawingOptions = new LayerDrawingOptions();
_LayerDrawingOptions.render = new SimpleRender(createSymbol(geometry.type));
_LayerDrawingOptionsList[_dynamiticLayerInfos.length] = _LayerDrawingOptions;
dynamiticLayer.setLayerDrawingOptions(_LayerDrawingOptionsList);
dynamiticLayer.setVisibleLayers(_layerIds)

注:layerDrawOptions还有一些属性:transparency(图层透明度)、showLabels(是否显示label)、scaleSymbol(是否依比例缩放样式)、labelingInfo(label实例)，例：layerDrawOptions.labelingInfo=[lb](var lb = new LabelClass(json))
这样实现了动态图层的自定义方式和自定义渲染。
2.自定义符号
arcgis js 提供三种方式构建符号：
1、无参方式

var symbol = new SimpleLineSymbol();
symbol.setStyle(SimpleLineSymbol.STYLE_DASH);
symbol.setWidth(5);
symbol.setColor(new Color([255,0,0,0.5]));
symbol.setMarker({
  style: "arrow",
  placement: "end"
})

2、有参方式

// style color width
var symbol = new SimbolLineSymbol(
    SimpleLineSymbol.STYLE_DASH,
    new Color([255,0,0]),
    3
)

3、json方式

var symbol_json = {
            "tags": ["solid"],
            "title": "Blue Thin",
            "style": "esriSLSSolid",
            "color": [79, 129, 189, 255],
            "width": 3,
            "name": "Blue 1",
            "type": "esriSLS"
}
var line_json = jsonUtils.fromJson(symbol_json);
var symbol = new SimpleLineSymbol(line_json);

3.自定义FeatureLayer
arcgis js提供两种构建FeatureLayer的方式：

arcgis js 学习之路(二)
1、通过xhr请求得到featurelayer json数据

var xhr = new XMLHttpRequest();
xhr.open('get','dc1.json',true);
xhr.onreadystatechange = function(){
  if(xhr.status == 200 || xhr.stateCode == 4){
    handle(JSON.parse(xhr.responseText));
  }
}
xhr.send(null);

示例：

// 得到的json数据则可以看到主要由fields、features和geometryType等构成
var layer_json = {
  displayName:'',
  fieldsAlises:{},
  spatialReference:{},
  geometry:'',
  fields:[],
  features:[]
}

2、通过几何类型和字段构建图层定义

var layerDefinition = {
  geometryType:'',
  fileds:[
  
  ]
}

3、构建featureLayer

var featureCollection = new FeatureSet(layer_json);
var featureLayer = new FeatureLayer({
  layerDefinition:layerDefintion,
  featureSet:featureCollection
})

结束

图层自定义方式就说到这里了，这里涉及到其他的在进行补充，也欢迎大家纠错。
参考来源：
辛立-简书