先看效果图:

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

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);

}

利用请求的JSON数据创建图形图层的更多相关文章

  1. 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  2. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  3. 一种从JSON数据创建Java类的高效办法

    <一种从JSON数据创建Java类的高效办法> 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs JSON格式的数据经常会遇到,比如调用Web服 ...

  4. PHP/Post 提交请求获取json数据,并转化为所需要的数组

    /** * Post 提交请求获取json数据,并转化为所需要的数组 */ function request_post($url = '', $param = '') { if (empty($url ...

  5. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  6. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  7. Java JSON数据创建和读取

    Java  json数据创建 package com.JavaTest; import com.google.gson.JsonArray; import com.google.gson.JsonOb ...

  8. Nginx下HTML页面POST请求静态JSON数据返回405状态

    在浏览器访问HTML页面,发现一些静态JSON数据没有显示,F12查看,如下图所示: 可以看到请求方式为POST 将请求链接复制在浏览器地址栏访问,可以正常请求到数据 F12查看,可以看到请求方式为G ...

  9. Beego框架POST请求接收JSON数据

    原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...

随机推荐

  1. 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装

    // 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...

  2. 利用vue-gird-layout 制作可定制桌面 (二)

    添加资源池 根据项目需求 添加, 实例两个数据 { "mainData": [ { "x": 0, "y": 0, "w" ...

  3. js:Array对象常用方法介绍

    前言 在js中,数组作为一个特殊的对象.是我们常用的数据格式.今天就来梳理一下常用的数组方法. 1.基础 几种基础的就简单介绍一下:创建数组 var arr1 = new Array(); //括号可 ...

  4. Python学习笔记(3)for循环和while循环

    2019-02-25 (1)break语句:终止当前循环,跳出循环体. (2)continue语句:终止本轮循环并开始下一轮循环(在下一轮循环开始前,会先测试循环条件). (3)for循环 ① ran ...

  5. 洛谷 P1137 旅行计划 (拓扑排序+dp)

    在DAG中,拓扑排序可以确定dp的顺序 把图的信息转化到一个拓扑序上 注意转移的时候要用边转移 这道题的dp是用刷表法 #include<bits/stdc++.h> #define RE ...

  6. Git clone时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    看了好多资料终于搞定了git 中clone命令报错这个问题,废话不多说直接上步骤希望对大家有帮助. 1   删除.ssh文件夹(直接搜索该文件夹)下的known_hosts(手动删除即可,不需要git ...

  7. 关系数据库标准语言SQL

    篇幅过长,恐惧者慎入!!!基础知识,大神请绕道!!! 本节要点: l  SQL概述 l  学生-课程关系 l  数据定义 基本表的定义.删除与修改 索引的建立与删除 l  查询 单表查询 连接查询 嵌 ...

  8. [BZOJ 3884][欧拉定理]上帝与集合的正确使用方法

    看看我们机房某畸形写的题解:http://blog.csdn.net/sinat_27410769/article/details/46754209 此题为popoQQQ神犇所出,在此orz #inc ...

  9. HttpClient 4.4 请求

    4.2 版本 /** * url 请求 paramUrl * * @time 2015年11月10日下午4:40:22 * @packageName com.rom.utils * @param ur ...

  10. JMX学习笔记(一)-MBean

    JMX学习笔记(一)-MBean 标签: jmxstringjavainterfaceexceptionclass 2010-12-07 22:20 15360人阅读 评论(5) 收藏 举报  分类: ...