地图探索：在地图上显示和分析GeoJSON数据
在本文中，我们将使用美国地质调查局 (USGS) 的地震数据来显示和分析世界各地的地震。
GeoJSON 提供了一种有趣且简单的方式，可以帮助您快速构建包含地理位置数据的地图应用。在本文中，您将使用美国地质调查局 (USGS) 的地震数据来显示和分析世界各地的地震。
在开始之前，请务必查看此 快速入门指南，以注册免费的 ArcGIS for Developers 订阅。本文档内容相对概括，以保持流程顺畅；如果您想深入了解细节，文章末尾提供了相关链接。
Hello World 地图
作为第一步，让我们使用 ArcGIS API for JavaScript 作为地图引擎来创建一个基本的地图应用。这将是一个二维地图，但您也可以轻松地使用二维数据创建三维可视化。
将下面的代码复制到您选择的 IDE 或文本编辑器中，并将其保存为 .html 文件（例如 index.html），或者您也可以 fork 此 CodePen 示例，然后将其用于文章的其余步骤：https://codepen.io/andygup/pen/mNyNLY。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Hello World Map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
let map = new Map({
basemap: "gray-vector"
});
let view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
center: [-168, 60] // longitude, latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
您应该会看到一个类似这样的基本地图
显示 GeoJSON 数据
现在，真正的乐趣开始了——添加 GeoJSON 数据。要做到这一点，您将向地图添加一个图层，该图层将在应用加载时自动显示地震数据。在这种情况下，我们将使用 GeoJSONLayer，它专门用于处理 GeoJSON 数据。
从“Hello World 地图”应用的现有代码开始，在 require 语句中添加对 GeoJSONLayer 模块的引用，并在回调函数中添加其别名。
require([
"esri/Map",
"esri/views/MapView",
// *** ADD *** //
"esri/layers/GeoJSONLayer"],
(Map, MapView, /* Add this alias */ GeoJSONLayer) => {
接下来，在 Map 初始化代码的上方，创建 GeoJSONLayer，如下所示：
const geoJSONLayer = new GeoJSONLayer({
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
copyright: "USGS Earthquakes"
});
然后，将新的 geoJSONLayer 对象添加到 Map.layers 属性中。
const map = new Map({
basemap: "gray",
layers: [geoJSONLayer]
});
快速提示：如果您的 GeoJSON 文件是从不支持 CORS 的独立域提供的，那么您需要代理才能让您的应用加载这些文件。
根据您的网络速度，检索和加载 GeoJSON 可能需要几秒钟。您应该会看到一个类似这样的地图：
通过震级调整符号大小
现在，您可以通过自定义圆形符号，使其根据地震的震级变大或变小，从而开始为可视化增添色彩。
在应用中，直接在初始化 GeoJSONLayer 的地方上方，添加一个简单的渲染器。SimpleRenderer 是用于创建强大可视化的几种不同类型渲染器之一。它使用单一类型的符号渲染图层中的所有要素——在本例中，我们使用的是圆形符号。为了调整圆形符号的大小，我们将在渲染器中使用 visualVariables。视觉变量与渲染器结合使用，根据颜色、大小、不透明度和旋转来为整个数据集应用主题。
对于我们的地图，我们只需要向 visualVariables 添加一个 size 类型，然后定义停止值。介于这些停止值之间的地震震级将按比例分配一个从 4px 到 40px 不等的大小。
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: "4px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
然后，将 renderer 对象附加到 GeoJSONLayer.renderer 属性。渲染器将完成所有繁重的工作。
const geoJSONLayer = new GeoJSONLayer({
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
copyright: "USGS Earthquakes",
//*** ADD ***//
renderer: renderer
});
现在您的应用应该看起来像这样：
为地震符号创建颜色渐变
为了增加更多的视觉上下文，让我们根据震级的增加为圆形符号设置一系列颜色。这次我们将向 visualVariables 添加一个 color 类型，然后定义颜色停止。介于这些停止值之间的地震震级现在将按比例分配一个从 orange 到 darkred 的颜色。
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: "4px"
},
{
value: 8,
size: "40px"
}
]
},
//*** ADD ***//
{
type: "color",
field: "mag",
stops: [
{
value: 2.5,
color: "orange"
},
{
value: 8,
color: "darkred"
}
]
}
]
};
您的地图现在应该看起来像这样：
显示弹出窗口
我们还希望能够通过点击不同的地震来探索地图并发现详细信息。为此，您需要向地图添加一个弹出窗口。在 SimpleRenderer 的上方，添加以下代码来配置将在弹出窗口中显示的数据，我们称此对象为 popupTemplate。
const popupTemplate = {
title: "Earthquake Info",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
};
接下来，像这样将 popupTemplate 添加到 GeoJSONLayer.popupTemplate 属性中：
const geoJSONLayer = new GeoJSONLayer({
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
copyright: "USGS Earthquakes",
renderer: renderer,
//*** ADD ***//
popupTemplate: popupTemplate
});
您只需要做这些。现在，当您点击一个地震符号时，您应该会看到一个类似这样的弹出窗口：
总结
如果您想实时查看完整的、已完成的应用，请点击此处。
希望您喜欢本教程。通过几行代码，您就学会了如何从 GeoJSON 文件中显示地理地震数据，如何使用渲染器进行符号化并构建颜色渐变，以及如何添加弹出窗口以便您可以探索有关单个地震的信息。
如果您还没有注册免费的 ArcGIS Developer Subscription，这里只是您可以使用它做到的许多事情中的一小部分：
- 可用于 Web、原生和移动平台的 Esri 所有 API 和 SDK 的使用。
- 每月 1,000,000 次底图和地理搜索事务。
- 用于生成路线的积分。
- 无限的非营利性应用。
- 无限用户。
- 访问托管在 ArcGIS Online 上的各种丰富的地理内容和服务。
- 样式化底图并管理您的地图内容。
- 托管、查询和分析地理内容。
额外学分
作为额外学分，将 GeoJSON 文件上传到 ArcGIS Online 并将其转换为托管要素服务。要素服务与静态文件相比具有显著优势，包括更快的加载性能（尤其是对于大型数据集）、存储数据属性更改并通过服务共享的能力、访问权限控制等等。这是一个入门教程：https://developers.arcgis.com/labs/arcgisonline/import-data/。然后，使用 FeatureLayer 将数据加载到地图上，而不是使用 GeoJSONLayer。
如果您想进一步了解 API 的功能，我们提供了二十多个十分钟的教程、数百个示例、一个概述主题指南，以及在 https://developers.arcgis.com/javascript/ 上的详细 API 参考。