欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-21 08:54:15
先看效果图: 包含三个部分:信息窗口(标题是要素的某个属性信息,其余是感兴趣的属性信息)、图上图形按照某一属性大小不一显示,图例 1、创建底图用于存放以上三部分: "esri/Map","esri/views/MapView" var map = new Map({ basemap:"dark-gr ......

先看效果图:利用请求的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);

}