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

这篇具有很好参考价值的文章主要介绍了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 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, 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>