图形介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
  // Create the Map
  const map = new Map({
    basemap: "hybrid"
  });

  // Create the MapView
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-80, 35],
    zoom: 3
  });
});

1
2
3
4
5
6
7
8
9
10
11
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
  //
  // This is where you created a Map and MapView in the previous steps
  //

  // Create a line geometry with the coordinates of the line
  const polyline = {
    type: "polyline", // autocasts as new Polyline()
    paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
  };
});

1
2
3
4
5
6
7
8
9
10
11
12
13
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
  //
  // This is where you created a Map, MapView,
  // and geometry in the previous steps
  //

  // Create a simple line symbol for rendering the line in the view
  const lineSymbol = {
    type: "simple-line", // autocasts as new SimpleLineSymbol()
    color: [226, 119, 40], // RGB color values as an array
    width: 4
  };
});

1
2
3
4
5
6
7
8
9
10
11
12
13
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
  //
  // This is where you created a Map, MapView,
  // geometry, and symbol in the previous steps
  //

  // Create a simple object containing useful information relating to the feature
  const lineAtt = {
    Name: "Keystone Pipeline", // The name of the pipeline
    Owner: "TransCanada", // The owner of the pipeline
    Length: "3,456 km" // The length of the pipeline
  };
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
require(["geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic"], (Map, MapView, Graphic) => {
  //
  // This is where you created a Map, MapView,
  // geometry, symbol, and attributes in the previous steps
  //

  // Create the graphic
  const polylineGraphic = new Graphic({
    geometry: polyline, // Add the geometry created in step 4
    symbol: lineSymbol, // Add the symbol created in step 5
    attributes: lineAtt // Add the attributes created in step 6
  });

  // Add the graphic to the view's default graphics view
  // If adding multiple graphics, use addMany and pass in the array of graphics.
  view.graphics.add(polylineGraphic);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
require(["geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic"], (Map, MapView, Graphic) => {
  //
  // This is where you created a Map, MapView,
  // geometry, symbol, and attributes in the previous steps
  //

  // Create the graphic
  const polylineGraphic = new Graphic({
    geometry: polyline, // Add the geometry created in step 4
    symbol: lineSymbol, // Add the symbol created in step 5
    attributes: lineAtt, // Add the attributes created in step 6
    popupTemplate: {
      title: "{Name}",
      content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "Name"
            },
            {
              fieldName: "Owner"
            },
            {
              fieldName: "Length"
            }
          ]
        }
      ]
    }
  });

  // Add the graphic to the view's default graphics view
  view.graphics.add(polylineGraphic);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
require(["geoscene/Map", "geoscene/views/MapView", "geoscene/Graphic"], (Map, MapView, Graphic) => {
  const map = new Map({
    basemap: "hybrid"
  });

  const view = new MapView({
    center: [-80, 35],
    container: "viewDiv",
    map: map,
    zoom: 3
  });

  // First create a line geometry (this is the Keystone pipeline)
  const polyline = {
    type: "polyline", // autocasts as new Polyline()
    paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
  };

  // Create a symbol for drawing the line
  const lineSymbol = {
    type: "simple-line", // autocasts as SimpleLineSymbol()
    color: [226, 119, 40],
    width: 4
  };

  // Create an object for storing attributes related to the line
  const lineAtt = {
    Name: "Keystone Pipeline",
    Owner: "TransCanada",
    Length: "3,456 km"
  };

  /*******************************************
   * Create a new graphic and add the geometry,
   * symbol, and attributes to it. You may also
   * add a simple PopupTemplate to the graphic.
   * This allows users to view the graphic's
   * attributes when it is clicked.
   ******************************************/
  const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: lineSymbol,
    attributes: lineAtt,
    popupTemplate: {
      // autocasts as new PopupTemplate()
      title: "{Name}",
      content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "Name"
            },
            {
              fieldName: "Owner"
            },
            {
              fieldName: "Length"
            }
          ]
        }
      ]
    }
  });

  // Add the line graphic to the view's GraphicsLayer
  view.graphics.add(polylineGraphic);
});