使用客户端图形创建要素图层
这是示例演示了使用客户端图形如何创建要素图层。这些图形来自 USGS 的 GeoJSON 的地震数据。
使用客户端图形创建要素图层需要给图层设置 5 个属性。
- 图形数组必须被设置到 source 属性。
- 必须指定图形的 geometryType （所有的要素必须有相同的几何类型）。
- 要素的空间参考必须指定。
- 必须提供给每个属性字段的模式（名称，别名和类型）的字段对象数组。
- 必须指定 objectID 。
lyr = new FeatureLayer({
source: graphics,
fields: fields,
objectIdField: "ObjectID",
geometryType: "point",
spatialReference: { wkid: 4326 },
popupTemplate: pTemplate,
renderer: quakesRenderer
});
map.add(lyr);
一旦在图层上设置了图形，就可以设置其他图层属性（如 renderer 和 popupTemplate ），从而使你可以利用 FeatureLayer 的优势来实现客户端图形。
和 FeatureLayer 不同，GraphicsLayer 不支持 rendered 和 popupTemplate 属性。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a FeatureLayer with client side graphics - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute;
bottom: 15px;
right: 0;
max-height: 80%;
max-width: 300px;
background-color: black;
padding: 8px;
border-top-left-radius: 5px;
color: white;
opacity: 0.8;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/widgets/Legend",
"esri/request",
"dojo/domReady!"
], function(MapView, Map, FeatureLayer, Point, Legend, esriRequest) {
var lyr, legend;
/**************************************************
* 定义图层中的每个字段的规范
**************************************************/
var fields = [
{
name: "ObjectID",
alias: "ObjectID", //别名
type: "oid"
}, {
name: "title",
alias: "title",
type: "string"
}, {
name: "type",
alias: "type",
type: "string"
}, {
name: "place",
alias: "place",
type: "string"
}, {
name: "depth",
alias: "depth",
type: "string"
}, {
name: "time",
alias: "time",
type: "date"
}, {
name: "mag",
alias: "Magnitude",
type: "double"
}, {
name: "url",
alias: "url",
type: "string"
}, {
name: "mmi",
alias: "intensity",
type: "double"
}, {
name: "felt",
alias: "Number of felt reports",
type: "double"
}, {
name: "sig",
alias: "significance",
type: "double"
}];
// 设置弹窗模板
var pTemplate = {
title: "{title}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "place",
label: "Location",
visible: true
}, {
fieldName: "time",
label: "Date and time",
visible: true
}, {
fieldName: "mag",
label: "Magnitude",
visible: true
}, {
fieldName: "mmi",
label: "Intensity",
visible: true
}, {
fieldName: "depth",
label: "Depth",
visible: true
}, {
fieldName: "felt",
label: "Number who felt the quake",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "sig",
label: "Significance",
visible: true
}, {
fieldName: "url",
label: "More info",
visible: true
}]
}],
fieldInfos: [{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}]
};
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-144.492, 62.771],
zoom: 5,
// 为 图例 设置 padding
ui: {
padding: {
bottom: 15,
right: 0
}
}
});
/**************************************************
* 为地震点符号设置渲染器
**************************************************/
var quakesRenderer = {
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: "unknown",
minDataValue: 2,
maxDataValue: 7,
// 基于比例尺设置 2 级地震符号大小
minSize: {
type: "size",
expression: "view.scale",
stops: [
{
value: 1128,
size: 12
},
{
value: 36111,
size: 12
},
{
value: 9244649,
size: 6
},
{
value: 73957191,
size: 4
},
{
value: 591657528,
size: 2
}]
},
// 基于比例尺设置 7 级地震符号大小
maxSize: {
type: "size",
expression: "view.scale",
stops: [
{
value: 1128,
size: 80
},
{
value: 36111,
size: 60
},
{
value: 9244649,
size: 50
},
{
value: 73957191,
size: 50
},
{
value: 591657528,
size: 25
}]
}
}]
};
view.then(function() {
// 当视图加载完成时，请求 USGS 的地震数据
getData()
.then(createGraphics) //创建图形
.then(createLayer) //创建图层
.then(createLegend) //创建图例
.otherwise(errback);
});
// function 请求的证数据
function getData() {
// data downloaded from the USGS at http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/ on 4/4/16
// month.geojson represents recorded earthquakes between 03/04/2016 and 04/04/2016
// week.geojson represents recorded earthquakes betwen 03/28/2016 and 04/04/2016
var url = "data/week.geojson";
return esriRequest(url, {
responseType: "json"
});
}
/**************************************************
* 为返回的数据创建图形
**************************************************/
function createGraphics(response) {
// 原始 json 数据
var geoJson = response.data;
// 为每个 geoJSON 要素创建一个图形数组
return geoJson.features.map(function(feature, i) {
return {
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
}
};
});
}
/**************************************************
* 使用图形数组创建图层
**************************************************/
function createLayer(graphics) {
lyr = new FeatureLayer({
source: graphics,
fields: fields,
objectIdField: "ObjectID",
renderer: quakesRenderer,
spatialReference: {
wkid: 4326
},
geometryType: "point",
popupTemplate: pTemplate
});
map.add(lyr);
return lyr;
}
/******************************************************************
* 在图例中添加图层信息
******************************************************************/
function createLegend(layer) {
if (legend) {
legend.layerInfos = [{
layer: layer,
title: "Magnitude"
}];
} else {
legend = new Legend({
view: view,
layerInfos: [
{
layer: layer,
title: "Earthquake"
}]
}, "infoDiv");
}
}
// 获取数据失败时执行
function errback(error) {
console.error("Creating legend failed. ", error);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
<h2>全球地震</h2>
03/28/16 至 04/04/16 报道的
</div>
</body>
</html>
程序运行效果：
（完）