先看效果图：
包含三个部分：信息窗口（标题是要素的某个属性信息，其余是感兴趣的属性信息）、图上图形按照某一属性大小不一显示，图例
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);
}
如对本文有疑问， 点击进行留言回复！！
JavaScript中某一标签内函数用this获取不到当前标签的问题笔记
MSAL.js 2.0发布 支持授权代码流 (authorization code flow)
我要评论
网友评论