利用请求的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);
}
利用请求的JSON数据创建图形图层的更多相关文章
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
作者:ssslinppp 时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...
- Struts2.5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
- 一种从JSON数据创建Java类的高效办法
<一种从JSON数据创建Java类的高效办法> 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs JSON格式的数据经常会遇到,比如调用Web服 ...
- PHP/Post 提交请求获取json数据,并转化为所需要的数组
/** * Post 提交请求获取json数据,并转化为所需要的数组 */ function request_post($url = '', $param = '') { if (empty($url ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- 【VueJS】VueJS开发请求本地json数据的配置
VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...
- Java JSON数据创建和读取
Java json数据创建 package com.JavaTest; import com.google.gson.JsonArray; import com.google.gson.JsonOb ...
- Nginx下HTML页面POST请求静态JSON数据返回405状态
在浏览器访问HTML页面,发现一些静态JSON数据没有显示,F12查看,如下图所示: 可以看到请求方式为POST 将请求链接复制在浏览器地址栏访问,可以正常请求到数据 F12查看,可以看到请求方式为G ...
- Beego框架POST请求接收JSON数据
原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...
随机推荐
- 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
// 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...
- 利用vue-gird-layout 制作可定制桌面 (二)
添加资源池 根据项目需求 添加, 实例两个数据 { "mainData": [ { "x": 0, "y": 0, "w" ...
- js:Array对象常用方法介绍
前言 在js中,数组作为一个特殊的对象.是我们常用的数据格式.今天就来梳理一下常用的数组方法. 1.基础 几种基础的就简单介绍一下:创建数组 var arr1 = new Array(); //括号可 ...
- Python学习笔记(3)for循环和while循环
2019-02-25 (1)break语句:终止当前循环,跳出循环体. (2)continue语句:终止本轮循环并开始下一轮循环(在下一轮循环开始前,会先测试循环条件). (3)for循环 ① ran ...
- 洛谷 P1137 旅行计划 (拓扑排序+dp)
在DAG中,拓扑排序可以确定dp的顺序 把图的信息转化到一个拓扑序上 注意转移的时候要用边转移 这道题的dp是用刷表法 #include<bits/stdc++.h> #define RE ...
- Git clone时出现Please make sure you have the correct access rights and the repository exists.问题已解决。
看了好多资料终于搞定了git 中clone命令报错这个问题,废话不多说直接上步骤希望对大家有帮助. 1 删除.ssh文件夹(直接搜索该文件夹)下的known_hosts(手动删除即可,不需要git ...
- 关系数据库标准语言SQL
篇幅过长,恐惧者慎入!!!基础知识,大神请绕道!!! 本节要点: l SQL概述 l 学生-课程关系 l 数据定义 基本表的定义.删除与修改 索引的建立与删除 l 查询 单表查询 连接查询 嵌 ...
- [BZOJ 3884][欧拉定理]上帝与集合的正确使用方法
看看我们机房某畸形写的题解:http://blog.csdn.net/sinat_27410769/article/details/46754209 此题为popoQQQ神犇所出,在此orz #inc ...
- HttpClient 4.4 请求
4.2 版本 /** * url 请求 paramUrl * * @time 2015年11月10日下午4:40:22 * @packageName com.rom.utils * @param ur ...
- JMX学习笔记(一)-MBean
JMX学习笔记(一)-MBean 标签: jmxstringjavainterfaceexceptionclass 2010-12-07 22:20 15360人阅读 评论(5) 收藏 举报 分类: ...