将geoJSON以FeatuerLayer方式加载并获取其属性
程序员文章站
2022-03-08 08:01:31
效果：代码： GeoJSON with FeatureLayer - 4.15 ....
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>GeoJSON with FeatureLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters", "esri/tasks/support/Query"
], function (Map, MapView, FeatureLayer, Graphic, IdentifyTask, IdentifyParameters, Query) {
var identifyTask, params, flayer;
const map = new Map({
basemap: "gray"
});
const view = new MapView({
center: [-80, 35],
zoom: 8,
map,
container: "viewDiv"
});
view.when()
.then(fetchData)
.then(createGraphics)
.then(createLayer)
.then(addToView)
.catch(function (e) {
console.error("Creating FeatureLayer failed", e);
})
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
return result.graphic.layer
})[0].graphic;
var oid = graphic.attributes.OBJECTID;
const query = new Query();
query.where = "OBJECTID=" + oid;
query.outSpatialReference = { wkid: 4326 };
query.returnGeometry = true;
query.outFields = ["*"];
flayer.queryFeatures(query).then(function (results) {
console.log(results.features);
})
}
});
});
function fetchData() {
return fetch(
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
)
.then(response => {
return response.json()
});
}
function createGraphics(data) {
return data.features.map((feature, i) => {
return new Graphic({
attributes: {
OBJECTID: i,
title: feature.properties["title"],
mag: feature.properties["mag"],
type: feature.properties["type"],
place: feature.properties["place"],
time: feature.properties["time"]
},
geometry: {
type: "point",
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
},
});
})
}
function createLayer(graphics) {
const popupTemplate = {
title: "{title}",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
],
outFields: ["title", "mag", "type", "place", "time"]
}
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "10px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
flayer = new FeatureLayer({
source: graphics,
fields: [{
name: "OBJECTID",
alias: "ObjectID",
type: "oid"
}, {
name: "title",
alias: "Title",
type: "string"
}
, {
name: "mag",
alias: "Magnitude",
type: "double"
}
, {
name: "type",
alias: "Type",
type: "string"
}, {
name: "place",
alias: "Place",
type: "string"
}, {
name: "time",
alias: "Time",
type: "date"
}],
objectIdField: "OBJECTID",
popupTemplate,
renderer
});
return flayer;
}
function addToView(layer) {
if (layer) {
view.map.add(layer);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_44616652/article/details/110138969