1.点、线、面

企业微信截图_20210623153058.png
官方：链接

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8" />
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  5.     <title>Intro to graphics | Sample | ArcGIS API for JavaScript 4.19</title>
  7.     <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
  8.     <script src="https://js.arcgis.com/4.19/"></script>
  10.     <style>
  11.       html,
  12.       body,
  13.       #viewDiv {
  14.         padding: 0;
  15.         margin: 0;
  16.         height: 100%;
  17.         width: 100%;
  18.       }
  19.     </style>
  21.     <script>
  22.       require(["esri/Map", "esri/views/MapView", "esri/Graphic"], (Map, MapView, Graphic) => {
  23.         const map = new Map({
  24.           basemap: "hybrid"
  25.         });
  27.         const view = new MapView({
  28.           center: [-80, 35],
  29.           container: "viewDiv",
  30.           map: map,
  31.           zoom: 3
  32.         });
  34.         /*************************
  35.          * Create a point graphic
  36.          *************************/
  38.         // First create a point geometry (this is the location of the Titanic)
  39.         const point = {
  40.           type: "point", // autocasts as new Point()
  41.           longitude: -49.97,
  42.           latitude: 41.73
  43.         };
  45.         // Create a symbol for drawing the point
  46.         const markerSymbol = {
  47.           type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  48.           color: [226, 119, 40],
  49.           outline: {
  50.             // autocasts as new SimpleLineSymbol()
  51.             color: [255, 255, 255],
  52.             width: 2
  53.           }
  54.         };
  56.         // Create a graphic and add the geometry and symbol to it
  57.         const pointGraphic = new Graphic({
  58.           geometry: point,
  59.           symbol: markerSymbol
  60.         });
  62.         /****************************
  63.          * Create a polyline graphic
  64.          ****************************/
  66.         // First create a line geometry (this is the Keystone pipeline)
  67.         const polyline = {
  68.           type: "polyline", // autocasts as new Polyline()
  69.           paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
  70.         };
  72.         // Create a symbol for drawing the line
  73.         const lineSymbol = {
  74.           type: "simple-line", // autocasts as SimpleLineSymbol()
  75.           color: [226, 119, 40],
  76.           width: 4
  77.         };
  79.         // Create an object for storing attributes related to the line
  80.         const lineAtt = {
  81.           Name: "Keystone Pipeline",
  82.           Owner: "TransCanada",
  83.           Length: "3,456 km"
  84.         };
  86.         /*******************************************
  87.          * Create a new graphic and add the geometry,
  88.          * symbol, and attributes to it. You may also
  89.          * add a simple PopupTemplate to the graphic.
  90.          * This allows users to view the graphic's
  91.          * attributes when it is clicked.
  92.          ******************************************/
  93.         const polylineGraphic = new Graphic({
  94.           geometry: polyline,
  95.           symbol: lineSymbol,
  96.           attributes: lineAtt,
  97.           popupTemplate: {
  98.             // autocasts as new PopupTemplate()
  99.             title: "{Name}",
  100.             content: [
  101.               {
  102.                 type: "fields",
  103.                 fieldInfos: [
  104.                   {
  105.                     fieldName: "Name"
  106.                   },
  107.                   {
  108.                     fieldName: "Owner"
  109.                   },
  110.                   {
  111.                     fieldName: "Length"
  112.                   }
  113.                 ]
  114.               }
  115.             ]
  116.           }
  117.         });
  119.         /***************************
  120.          * Create a polygon graphic
  121.          ***************************/
  123.         // Create a polygon geometry
  124.         const polygon = {
  125.           type: "polygon", // autocasts as new Polygon()
  126.           rings: [[-64.78, 32.3], [-66.07, 18.45], [-80.21, 25.78], [-64.78, 32.3]]
  127.         };
  129.         // Create a symbol for rendering the graphic
  130.         const fillSymbol = {
  131.           type: "simple-fill", // autocasts as new SimpleFillSymbol()
  132.           color: [227, 139, 79, 0.8],
  133.           outline: {
  134.             // autocasts as new SimpleLineSymbol()
  135.             color: [255, 255, 255],
  136.             width: 1
  137.           }
  138.         };
  140.         // Add the geometry and symbol to a new graphic
  141.         const polygonGraphic = new Graphic({
  142.           geometry: polygon,
  143.           symbol: fillSymbol
  144.         });
  146.         // Add the graphics to the view's graphics layer
  147.         view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);
  148.       });
  149.     </script>
  150.   </head>
  152.   <body>
  153.     <div id="viewDiv"></div>
  154.   </body>
  155. </html>