ArcGIS Web APIJavaScript API4.6在客户端浏览器生成FeatureLayer并进行渲染

Posted 2020-10-22 mnxxz

当在调用arcgis sever上发布的地图服务的某一图层时，需要根据特定字段进行渲染，但发布的服务并没有该字段，可使用该方法。

/********************************************************************************
 **************************FeatureLayer***********************************
 ********************************************************************************/
//新建FeatureLayer
featureLayer.queryFeatures().then(function(results){
    var features = results.features;
    for(var feature in features){
    
        features[feature].attributes["nico"] = feature;                    
    }
    
    var popupTemplate = {
      title: "{NAME}",
      content: [{
        type: "fields",
        fieldInfos: [{
          fieldName: "Name"
        }, {
          fieldName: "FID"
        },{
          fieldName: "XZDM"
        },{
          fieldName: "nico"
        }]
      }]
    };

    var fields = [{
        name: "XZDM",
        alias: "XZDM",
        type: "oid",
      },{
        name: "FID",
        alias: "FID",
        type: "double",
      },{
        name: "nico",
        alias: "nico",
        type: "integer",
      }];
    
    // See the sample snippet for the source and fields properties
    const layer = new FeatureLayer({
      source: features,
      fields: fields,
      objectIdField: "XZDM",  // field name of the Object IDs
      geometryType: "polygon",
    });
    
    var renderer = {
      type: "simple",  // autocasts as new SimpleRenderer()
      symbol: { type: "simple-fill" },  // autocasts as new SimpleFillSymbol()
      visualVariables: [{
        type: "color",
        field: "nico",
        stops: [{ value: 0, color: {r: 125, g: 255,  b: 103,  a: 0.3} },
                { value: 11, color: {r: 255, g: 25,  b: 123,  a: 0.6} }]
      }]
    };

    layer.renderer = renderer;                
    map.add(layer);
});    

这里写了两种分类渲染方法

第一种

 

/********************************************************************************
 **************************SimpleRenderer***********************************
 ********************************************************************************/
//根据最大最小值以及分类数生成随机色，等间距分类
var minClassValue = 0;
var maxClassValue = 10;
var classNum = 4;
var dis = Math.round((maxClassValue - minClassValue)/classNum);

//构建stops数组
var stops = new Array();

for (var i=minClassValue; i<maxClassValue; i += dis){
    
    //构建颜色对象
    var color = new Object();
    color.r = parseInt(Math.random()*100);
    color.g = parseInt(Math.random()*100);
    color.b = parseInt(Math.random()*100);
    color.a = Math.round(Math.random()*10)/10;
    
    //构建有value和color属性对象
    var a = new Object();
    a.value = i;
    a.color = color;
    stops.push(a);
}

//SimpleRenderer
var citiesRenderer01 = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: { type: "simple-fill" },  // autocasts as new SimpleFillSymbol()
  visualVariables: [{
    type: "color",
    field: "nico",
    stops: stops,
  }]
};

第二种

 

/********************************************************************************
 **************************ClassBreaksRenderer***********************************
 ********************************************************************************/
//根据最大最小值以及分类数生成随机色，等间距分类
var minClassValue = 0;
var maxClassValue = 10;
var classNum = 4;
var dis = Math.round((maxClassValue - minClassValue)/classNum);

//构建classBreakInfos数组
var classBreakInfos = new Array();
for (var i=minClassValue; i<maxClassValue; i += dis){
    
    //构建颜色对象
    var color = new Object();
    color.r = parseInt(Math.random()*100);
    color.g = parseInt(Math.random()*100);
    color.b = parseInt(Math.random()*100);
    color.a = Math.round(Math.random()*10)/10;
    
    //构建包含type和color属性的symbol对象
    var symbol = new Object();
    symbol.type = "simple-fill",
    symbol.color = color;
    
    //构建包含minValue、maxValue、symbol、label的obj对象
    var obj = new Object();
    obj.minValue = i,
    obj.maxValue = i + dis,
    obj.symbol = symbol;
    obj.label = i + "~" + i + dis;
    
    classBreakInfos.push(obj);
}

//ClassBreaksRenderer
var citiesRenderer01 = {
  type: "class-breaks",  // autocasts as new ClassBreaksRenderer()
  field: "nico",
  classBreakInfos: classBreakInfos,
};