利用请求的JSON数据创建图形图层

先看效果图：

包含三个部分：信息窗口（标题是要素的某个属性信息，其余是感兴趣的属性信息）、图上图形按照某一属性大小不一显示，图例

1、创建底图用于存放以上三部分：

"esri/map","esri/views/mapview"

var map = new map({

　　basemap:"dark-gray"
});

var view = new mapview({

　　map:map,

　　container:"viewdiv",

　　center:[-144.492, 62.771],

　　zoom:5,

　　ui:{　　//自定义ui用于存放图例的位置

　　　　padding:{bottom:15,right:0}

　　}

})；

2、为了完成以上三个部分，框架设置为实现主要的五个函数，分别是获取数据、创建图形、创建图形图层、创建图例、捕捉错误信息。

view.when(function(){

　　getdata()　　//获取数据

　　.then(creategraphics)　　//创建图形数组

　　.then(createlayer)　　//创建图形图层

　　.then(createlegend)　　//创建图例

　　.then(errback)　　//捕捉错误信息

})

3、获取json数据函数实现

"esri/config","esri/request"

function getdata(){

　　var url = "https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/live/data/week.json";

　　esriconfig.request.corsenabledservers.push(url);　　//配置请求

　　return esrirequest(url,{responsetype:"json"});　　//返回获取的json数据

}

4、创建图形

"esri/geometry/point"

function creategraphics(response){

　　var geojson = response.data;

　　//返回的是每个json数据对应的图形组成的数组

　　return geojson.features.map(function(feature,i){

　　　　geometry:new point({

　　　　　　x:feature.geometry.coordinates[0],

　　　　　　y:feature.geometry.coordinates[1]

　　　　}),

　　　　attributes:{

　　　　　　objectid:i,

　　　　　　title:feature.properties.title,

　　　　　　type:feature.properties.type,

　　　　　　place:feature.properties.place,

　　　　　　depth: feature.geometry.coordinates[2] + " km",

　　　　　　time:feature.properties.time,

　　　　　　mag:feature.properties.mag,　　　　　　

　　　　　　mmi:feature.properties.mmi,

　　　　　　felt:feature.properties.felt,

　　　　　　sig:feature.properties.sig,

　　　　　　url:feature.properties.url

　　　　}

　　})

}

5、创建图形图层

"esri/layers/featurelayer"

//设置全局变量要素图层

var layer;

function createlayer(graphics){

　　//设置图形图层必须的属性设置：source fields objectidfield renderer

　　layer = new featurelayer({

　　　　sources:graphics,

　　　　fields:fields,

　　　　objectidfield:"objectid",

　　　　renderer:quakerenderer,

　　　　popuptemplate:ptemplate　　

　　});

　　map.add(layer);

　　return layer;

}

//设置fields

var fields = [{

　　name:"objectid",　　//全程必须要自己定义一个objectid因为这是图形图层创建的必须属性

　　alias:"objectid",

　　type:"oid"

},{

　　name:"title",

　　alias:"title",

　　type:"string"

},...{

　　name:"time",

　　alias:"time",

　　type:"date"

},{

　　name:"mag",

　　alias:"magnitude",

　　type:"double"

}];

//设置渲染方式

var quakerenderer = {

　　type:"simple",

　　symbol:{

　　　　type:"simple-marker",

　　　　style:"circle",

　　　　size:20,

　　　　color:[211,255,0,0],

　　　　outline:{

　　　　　　width:1,

　　　　　　color:"#ff0055",

　　　　　　style:"solid"

　　　　}

　　},

　　visualvariables:[{

　　　　type:"size",

　　　　field:"mag",

　　　　valueunit:"unknow",

　　　　mindatavalue:2,

　　　　maxdatavalue:7,

　　　　minsize:{

　　　　　　type: "size",
            valueexpression: "$view.scale",
            stops: [
            {
              value: 1128,
              size: 12
            },
            {
              value: 36111,
              size: 12
            },
            {
              value: 9244649,
              size: 6
            },
            {
              value: 73957191,
              size: 4
            },
            {
              value: 591657528,
              size: 2
            }]

　　　　},

　　　　maxsize:{

　　　　　　type: "size",
            valueexpression: "$view.scale",
            stops: [
            {
              value: 1128,
              size: 80
            },
            {
              value: 36111,
              size: 60
            },
            {
              value: 9244649,
              size: 50
            },
            {
              value: 73957191,
              size: 50
            },
            {
              value: 591657528,
              size: 25
            }]

　　　　}

　　}]

}

//设置信息窗口

var ptemplate = [{

　　title:{title},

　　content:[{

　　　　type:"fields",

　　　　fieldinfos:[{

　　　　　　fieldname:"place",

　　　　　　label:"location",

　　　　　　visible:true

　　　　}...{

　　　　　　filedname:"felt",

　　　　　　label:"number who felt the quake",

　　　　　　visible:true,

　　　　　　format:{places:0,digitseparator:true}

　　　　},...{

　　　　　　fieldname:"time",

　　　　　　label:"date and time",

　　　　　　format:{dateformat:"short-date-short-time"}

　　　　}]

　　}]

}]

6、创建图例

"esri/widgets/legend"

var legend;

function createlegend(layer){

　　//如果图例已经存在了就更新，未存在就创建

　　if(legend){

　　　　legend.layerinfos = [{

　　　　　　layer:layer,

　　　　　　title:"magnitude"

　　　　}];

　　}

　　else{

　　　　legend = new legend({

　　　　　　view:view,

　　　　　　layerinfos:[{

　　　　　　　　layer:layer,

　　　　　　　　title:"earthquake"

　　　　　　}]

　　　　},"infodiv");　　//放置在infodiv的标签当中

　　}

}

7、捕捉错误信息

function errback(error){

　　console.error("create legend failed!",error);

}