利用请求的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);

}

原文地址:https://www.cnblogs.com/GIS-Yangol/p/10399882.html

时间: 2024-10-05 03:09:27

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

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

作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MVC与json参考文章:[spring学习笔记-mvc-3]返回json数据-方式1  和 [spring学习笔记-mvc-4]返回json数据-方式2. 使用到的技术主要如下: Ajax:使用JQuery 提供的ajax:==>需要引入jquery.min.js文件: Spring MVC: Jso

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

AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范

Java JSON数据创建和读取

Java  json数据创建 package com.JavaTest; import com.google.gson.JsonArray; import com.google.gson.JsonObject; public class CreatJson { public static void main(String[] args) { JsonObject object = new JsonObject(); object.addProperty("cat", "it&

android通过httpClient请求获取JSON数据并且解析

android通过httpClient请求获取JSON数据并且解析:http://www.cnblogs.com/gzggyy/archive/2013/05/08/3066288.html Android--使用Http向服务器发送请求并取得返回结果,下载图片:http://www.2cto.com/kf/201307/229489.html Android系列之网络(一)----使用HttpClient发送HTTP请求(通过get方法获取数据):http://blog.csdn.net/he

swift http请求返回json数据并解析

1 AppDelegate.swift // // AppDelegate.swift // QQDemo // // Created by 赵超 on 14-6-21. // Copyright (c) 2014年 赵超. All rights reserved. // import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? fun

Unity:通过LitJson对JSON数据创建与使用

本文章首发于Unity:通过litjson对json数据创建与使用 科普时间: LitJSON是一个使用C#编写的.NET库,我们可以通过它来处理JSON数据. JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生

异步请求(删除json数据)

异步请求(删除json数据) 删除数据库信息, 同时页面对应的样式也随之删除 Demo: 删除雇员信息1.在控制层定义删除的方法 //删除数据 public void jsonRemove(HttpServletRequest req,HttpServletResponse resp) throws Exception { //获取要删除的雇员的编号 Integer empno = Integer.valueOf(req.getParameter("id")); //调用业务层的删除方

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

在浏览器访问HTML页面,发现一些静态JSON数据没有显示,F12查看,如下图所示: 可以看到请求方式为POST 将请求链接复制在浏览器地址栏访问,可以正常请求到数据 F12查看,可以看到请求方式为GET,状态码为200 可知问题为:Nginx下HTML页面POST请求静态JSON数据返回405状态,但用GET请求则正常返回数据. 百度后,有说,Apache.IIS.Nginx等绝大多数Web服务器,都不允许静态文件响应POST请求. 下面进行测试: 系统为CentOS7.5,Nginx(版本:

利用Gson将JSON数据进行格式化(pretty print)

我们可以利用Gson包将String类型的JSON数据进行格式化. Gson gson = new GsonBuilder().setPrettyPrinting().create(); JsonParser jp = new JsonParser(); JsonElement je = jp.parse(uglyJSONString); String prettyJsonString = gson.toJson(je); 使用 new GsonBuilder.setPrettyPrinting