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, latitude
zoom: 13,
container: "viewDiv"
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
添加点图形
点图形是使用点和标记符号创建的。一个点用经度（x）和纬度（y）坐标定义，一个简单的符号用颜色和轮廓定义。Point和SimpleMarkerSymbol类用于创建点图形。
创建将用于创建图形的点和simpleMarkerSymbol。
const point = { //Create a point
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
创建图形并设置几何图形和符号特性。Graphic类在构造时将自动播放point和simpleMarkerSymbol。
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
验证点图形是否位于point Dume Beach。
添加线条图形
直线图形是使用多段线和直线符号创建的。多段线定义为一系列点和空间参照。Polyline和SimpleLineSymbol类用于创建线形图形。
定义将用于创建图形的多段线和simpleLineSymbol。
// Create a line geometry
const 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], // Orange
width: 2
};
创建图形并设置几何图形和符号特性。Graphic类将在创建多段线和simpleLineSymbol时自动播放。
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: simpleLineSymbol
});
graphicsLayer.add(polylineGraphic);
验证线条图形是否沿Westward Beach定位。
添加多边形图形
多边形图形是使用多边形和填充符号创建的。多边形被定义为描述闭合边界和空间参考的一系列点（环）。Polygon和SimpleFillSymbol类用于创建和显示多边形图形。
定义将用于创建图形的多边形和simpleFillSymbol
// Create a polygon geometry
const 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 polygontitle>
<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, latitude
zoom: 13,
container: "viewDiv"
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const point = { //Create a point
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
// Create a line geometry
const 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], // Orange
width: 2
};
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: simpleLineSymbol
});
graphicsLayer.add(polylineGraphic);
// Create a polygon geometry
const 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>
运行应用程序
在CodePen中，运行代码以显示地图。
地图应显示所有三种图形。当您单击多边形时，它应该显示一个弹出窗口。
注明：翻译自esri，仅供个人查阅使用，侵删