添加点、线和面

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

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

在本教程中，将在地图上显示点、线和面以作为图形。

步骤

创建新 Pen

1. 要开始使用，请完成显示地图教程 或 使用此 Pen。

添加模块

1. 在 require 语句中，添加 Graphic 和 GraphicsLayer 模块。

   更多信息

   GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。更改行

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
     require([
       "geoscene/config",
       "geoscene/Map",
       "geoscene/views/MapView",
   
       "geoscene/Graphic",
       "geoscene/layers/GraphicsLayer"
   
       ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {
    

   展开

添加图形图层

图形图层是图形的容器。它与地图视图一起使用以在地图上显示图形。您可以将多个图形图层添加到地图视图中。图形图层显示在所有其他图层之上。

1. 创建并添加 GraphicsLayer 以存储图形。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
     const view = new MapView({
       map: map,
       center: [116.80500,39.02700], //Longitude, latitude
       zoom: 13,
       container: "viewDiv"
    });
   
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    

   展开

添加点图形

可使用点和标记符号创建点图形。点可使用经度 (x) 和纬度 (y) 坐标进行定义，简单符号可使用颜色和轮廓进行定义。Point 和 SimpleMarkerSymbol 类可用于创建点图形。

1. 创建 point 和 simpleMarkerSymbol， 以用于创建 Graphic。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
   
    const point = { //Create a point
       type: "point",
       longitude: 116.80657463861,
       latitude: 39.0005930608889
    };
    const simpleMarkerSymbol = {
       type: "simple-marker",
       color: [226, 119, 40],  // Orange
       outline: {
           color: [255, 255, 255], // White
           width: 1
       }
    };
    

   展开

2. 创建 Graphic 并设置 geometry 和 symbol 属性。Graphic 类在构造时将自动转换 point 和 simpleMarkerSymbol。

   更多信息

   点图形支持多种符号类型，如 SimpleMarkerSymbol、PictureMarkerSymbol 和 TextSymbol。了解有关 API 文档中符号的更多信息。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    const point = { //Create a point
       type: "point",
       longitude: 116.80657463861,
       latitude: 39.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);
    

   展开

3. 验证点图形位置是否正确。

添加线图形

可使用折线和线符号创建线图形。折线定义为一个点序列和一个空间参考。Polyline 和 SimpleLineSymbol 类可用于创建线图形。

1. 定义 polyline 和 simpleLineSymbol，以用于创建 Graphic。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    const pointGraphic = new Graphic({
       geometry: point,
       symbol: simpleMarkerSymbol
    });
    graphicsLayer.add(pointGraphic);
   
       // Create a line geometry
    const polyline = {
       type: "polyline",
       paths: [
           [116.821527826096, 39.0139576938577], //经度、纬度
           [116.814893761649, 39.0080602407843], //经度、纬度
           [116.808878330345, 39.0016642996246]  //经度、纬度
       ]
    };
    const simpleLineSymbol = {
       type: "simple-line",
       color: [226, 119, 40], // Orange
       width: 2
    };
    

   展开

2. 创建 Graphic 并设置 geometry 和 symbol 属性。Graphic 类在创建时将自动转换 polyline 和 simpleLineSymbol。

   更多信息

   折线图形支持多种符号类型，如 SimpleLineSymbol 和 TextSymbol。了解有关 API 文档中符号的更多信息。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
       // Create a line geometry
    const polyline = {
       type: "polyline",
       paths: [
           [116.808878330345, 39.0016642996246]  //经度、纬度
           [116.814893761649, 39.0080602407843], //Longitude, latitude
           [116.808878330345, 39.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);
    

   展开

3. 验证线图形位置是否正确。

添加面图形

可使用面和填充符号创建面图形。面是闭合边界的点序列 (环)，具有一个空间参考。Polygon 和 SimpleFillSymbol 类可用于创建和显示面图形。

1. 定义 polygon 和 simpleFillSymbol ，以用于创建 Graphic

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    const polylineGraphic = new Graphic({
       geometry: polyline,
       symbol: simpleLineSymbol
    });
    graphicsLayer.add(polylineGraphic);
   
    // Create a polygon geometry
    const polygon = {
       type: "polygon",
       rings: [
           [116.818984489994, 39.0137559967283], //Longitude, latitude
           [116.806796597377, 39.0215816298725], //Longitude, latitude
           [116.791432890735, 39.0163883241613], //Longitude, latitude
           [116.79596686535, 39.008564864635],   //Longitude, latitude
           [116.808558110679, 39.0035027131376]  //Longitude, latitude
       ]
    };
   
    const simpleFillSymbol = {
       type: "simple-fill",
       color: [227, 139, 79, 0.8],  // Orange, opacity 80%
       outline: {
           color: [255, 255, 255],
           width: 1
       }
    };
    

   展开

2. 创建 Graphic 并设置 geometry 和 symbol 属性。Graphic 类在创建时将自动转换 polygon 和 simpleFillSymbol。

   更多信息

   面图形支持许多 Symbol 类，例如 SimpleFillSymbol、PictureFillSymbol、SimpleMarkerSymbol 和 TextSymbol。同样需要注意的是，外多边形环坐标应按顺时针顺序添加，而内环坐标（岛）应按逆时针顺序添加。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    // Create a polygon geometry
    const polygon = {
       type: "polygon",
       rings: [
           [116.818984489994, 39.0137559967283], //Longitude, latitude
           [116.806796597377, 39.0215816298725], //Longitude, latitude
           [116.791432890735, 39.0163883241613], //Longitude, latitude
           [116.79596686535, 39.008564864635],   //Longitude, latitude
           [116.808558110679, 39.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 polygonGraphic = new Graphic({
       geometry: polygon,
       symbol: simpleFillSymbol,
   
    });
    graphicsLayer.add(polygonGraphic);
    

   展开

3. 验证面图形位置是否正确。

创建弹出窗口

单击图形时，可以显示图形的弹出窗口。创建面图形以显示包含图形名称和描述的弹出窗口，首先代码中使用了 attribute 和 popupTemplate 属性。

1. 在主函数中，定义 popupTemplate 和 attributes。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。添加行。添加行。添加行。添加行。添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    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"
    }
    

   展开

2. 修改 polygonGraphic，将之前的变量赋给 popupTemplate 和 attribute 属性。

   展开

   代码块使用深色

                                                                                                                                       

   添加行。添加行。

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    const polygonGraphic = new Graphic({
       geometry: polygon,
       symbol: simpleFillSymbol,
   
       attributes: attributes,
       popupTemplate: popupTemplate
   
    });
    graphicsLayer.add(polygonGraphic);
    

   展开

运行应用程序

在 CodePen 中，运行代码以显示地图。

地图应显示所有三个图形。单击面时，它应该显示一个弹出窗口。

下一步是什么？

要了解如何使用其他 API 功能，请参阅以下教程：

• 添加要素图层
• 搜索地址