ArcGIS API for JavaScript 4.x 教程（四）添加点、线和多边形

了解如何在地图中显示点、线和多边形图形。

图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成，单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库（即GPS位置）的地理数据。
在本教程中，您将学习如何将地图上的点、线和多边形显示为图形。

笔记
有关在应用程序中实现图形的更多背景信息，请访问《映射API和位置服务》指南中的图形、样式和数据可视化。

步骤

创建新笔

若要开始，请完成“显示地图”教程或使用此笔。

设置API键

要访问ArcGIS服务，您需要一个API密钥。
转到您的仪表板以获取API密钥。
在CodePen中，将apiKey设置为您的密钥，这样它就可以用于访问basemap层和位置服务。

esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({basemap: "arcgis-topographic" // Basemap layer service
});

添加模块

在require语句中，添加Graphics和GraphicsLayer模块。

  require(["esri/config","esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer"], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

添加图形层

图形层是图形的容器。它与地图视图一起用于显示地图上的图形。可以将多个图形图层添加到地图视图中。图形图层显示在所有其他图层的顶部。
创建并添加GraphicsLayer以存储图形。

  const view = new MapView({map: map,center: [-118.80500,34.02700], //Longitude, latitudezoom: 13,container: "viewDiv"});const graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);

添加点图形

点图形是使用点和标记符号创建的。一个点用经度（x）和纬度（y）坐标定义，一个简单的符号用颜色和轮廓定义。Point和SimpleMarkerSymbol类用于创建点图形。
创建将用于创建图形的点和simpleMarkerSymbol。

 const point = { //Create a pointtype: "point",longitude: -118.80657463861,latitude: 34.0005930608889};const simpleMarkerSymbol = {type: "simple-marker",color: [226, 119, 40],  // Orangeoutline: {color: [255, 255, 255], // Whitewidth: 1}};

创建图形并设置几何图形和符号特性。Graphic类在构造时将自动播放point和simpleMarkerSymbol。

 const pointGraphic = new Graphic({geometry: point,symbol: simpleMarkerSymbol});graphicsLayer.add(pointGraphic);

验证点图形是否位于point Dume Beach。

添加线条图形

直线图形是使用多段线和直线符号创建的。多段线定义为一系列点和空间参照。Polyline和SimpleLineSymbol类用于创建线形图形。
定义将用于创建图形的多段线和simpleLineSymbol。

 // Create a line geometryconst polyline = {type: "polyline",paths: [[-118.821527826096, 34.0139576938577], //Longitude, latitude[-118.814893761649, 34.0080602407843], //Longitude, latitude[-118.808878330345, 34.0016642996246]  //Longitude, latitude]};const simpleLineSymbol = {type: "simple-line",color: [226, 119, 40], // Orangewidth: 2};

创建图形并设置几何图形和符号特性。Graphic类将在创建多段线和simpleLineSymbol时自动播放。

 const polylineGraphic = new Graphic({geometry: polyline,symbol: simpleLineSymbol});graphicsLayer.add(polylineGraphic);

验证线条图形是否沿Westward Beach定位。

添加多边形图形

多边形图形是使用多边形和填充符号创建的。多边形被定义为描述闭合边界和空间参考的一系列点（环）。Polygon和SimpleFillSymbol类用于创建和显示多边形图形。
定义将用于创建图形的多边形和simpleFillSymbol

 // Create a polygon geometryconst polygon = {type: "polygon",rings: [[-118.818984489994, 34.0137559967283], //Longitude, latitude[-118.806796597377, 34.0215816298725], //Longitude, latitude[-118.791432890735, 34.0163883241613], //Longitude, latitude[-118.79596686535, 34.008564864635],   //Longitude, latitude[-118.808558110679, 34.0035027131376]  //Longitude, latitude]};const simpleFillSymbol = {type: "simple-fill",color: [227, 139, 79, 0.8],  // Orange, opacity 80%outline: {color: [255, 255, 255],width: 1}};

创建图形并设置几何图形和符号特性。Graphic类将在创建多边形和simpleFillSymbol时自动播放它。

 const polygonGraphic = new Graphic({geometry: polygon,symbol: simpleFillSymbol,});graphicsLayer.add(polygonGraphic);

验证多边形图形是否位于马湖里维埃拉。

创建弹出窗口

单击图形时，可以显示图形的弹出窗口。创建多边形图形以显示包含图形名称和描述的弹出窗口的代码使用attributes和popupTemplate属性。
在主函数中，定义popupTemplate和attributes。

 const popupTemplate = {title: "{Name}",content: "{Description}"}const attributes = {Name: "Graphic",Description: "I am a polygon"}

更新polygonGraphic以包含popupTemplate和属性属性。

 const polygonGraphic = new Graphic({geometry: polygon,symbol: simpleFillSymbol,attributes: attributes,popupTemplate: popupTemplate});graphicsLayer.add(polygonGraphic);

完整代码

<html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>ArcGIS Maps SDK for JavaScript Tutorials: Add a point, line, and polygon</title><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.27/"></script><script>require(["esri/config","esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer"], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {esriConfig.apiKey = "YOUR_API_KEY";const map = new Map({basemap: "arcgis-topographic" //Basemap layer service});const view = new MapView({map: map,center: [-118.80500,34.02700], //Longitude, latitudezoom: 13,container: "viewDiv"});const graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);const point = { //Create a pointtype: "point",longitude: -118.80657463861,latitude: 34.0005930608889};const simpleMarkerSymbol = {type: "simple-marker",color: [226, 119, 40],  // Orangeoutline: {color: [255, 255, 255], // Whitewidth: 1}};const pointGraphic = new Graphic({geometry: point,symbol: simpleMarkerSymbol});graphicsLayer.add(pointGraphic);// Create a line geometryconst polyline = {type: "polyline",paths: [[-118.821527826096, 34.0139576938577], //Longitude, latitude[-118.814893761649, 34.0080602407843], //Longitude, latitude[-118.808878330345, 34.0016642996246]  //Longitude, latitude]};const simpleLineSymbol = {type: "simple-line",color: [226, 119, 40], // Orangewidth: 2};const polylineGraphic = new Graphic({geometry: polyline,symbol: simpleLineSymbol});graphicsLayer.add(polylineGraphic);// Create a polygon geometryconst polygon = {type: "polygon",rings: [[-118.818984489994, 34.0137559967283], //Longitude, latitude[-118.806796597377, 34.0215816298725], //Longitude, latitude[-118.791432890735, 34.0163883241613], //Longitude, latitude[-118.79596686535, 34.008564864635],   //Longitude, latitude[-118.808558110679, 34.0035027131376]  //Longitude, latitude]};const simpleFillSymbol = {type: "simple-fill",color: [227, 139, 79, 0.8],  // Orange, opacity 80%outline: {color: [255, 255, 255],width: 1}};const popupTemplate = {title: "{Name}",content: "{Description}"}const attributes = {Name: "Graphic",Description: "I am a polygon"}const polygonGraphic = new Graphic({geometry: polygon,symbol: simpleFillSymbol,attributes: attributes,popupTemplate: popupTemplate});graphicsLayer.add(polygonGraphic);});
</script>
</head>
<body><div id="viewDiv"></div>
</body>
</html>