添加点、线和面

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

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

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

步骤

创建新 Pen

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

添加模块

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.8,39], //经度，纬度
       zoom: 13,
       container: "viewDiv"
    });
   
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
   

   展开

添加点图形

点图形通过点和标记符号创建。使用经度 (x) 和纬度 (y) 定义点坐标，使用颜色和轮廓定义一个简单符号。使用Point 和 SimpleMarkerSymbol 类就可以创建一个点图形。

1. 创建 point 和 simpleMarkerSymbol。

   展开

   代码块使用深色

                                                                                                                                       

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

   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],  
       outline: {
           color: [255, 255, 255], 
           width: 1
       }
    };
   

   展开

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

   点图形支持多种符号类型，如 SimpleMarkerSymbol、PictureMarkerSymbol 和 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
    const point = { //Create a point
       type: "point",
       longitude: 116.80657463861,
       latitude: 39.0005930608889
    };
    const simpleMarkerSymbol = {
       type: "simple-marker",
       color: [226, 119, 40],  
       outline: {
           color: [255, 255, 255], 
           width: 1
       }
    };
   
    const pointGraphic = new Graphic({
       geometry: point,
       symbol: simpleMarkerSymbol
    });
    graphicsLayer.add(pointGraphic);
   

   展开

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

添加线图形

线图形通过折线和线符号创建。折线是一个点序列，有时候还需要指定空间参考。使用Polyline 和 SimpleLineSymbol 类就可以创建一个线图形。

1. 创建 polyline 和 simpleLineSymbol。

   展开

   代码块使用深色

                                                                                                                                       

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

   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], 
       width: 2
    };
   

   展开

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

   折线图形支持多种符号类型，如 SimpleLineSymbol 和 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 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], 
       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], //经度，纬度
           [116.806796597377, 39.0215816298725], //经度，纬度
           [116.791432890735, 39.0163883241613], //经度，纬度
           [116.79596686535, 39.008564864635],   //经度，纬度
           [116.808558110679, 39.0035027131376]  //经度，纬度
       ]
    };
   
    const simpleFillSymbol = {
       type: "simple-fill",
       color: [227, 139, 79, 0.8],  , 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], //经度，纬度
           [116.806796597377, 39.0215816298725], //经度，纬度
           [116.791432890735, 39.0163883241613], //经度，纬度
           [116.79596686535, 39.008564864635],   //经度，纬度
           [116.808558110679, 39.0035027131376]  //经度，纬度
       ]
    };
   
    const simpleFillSymbol = {
       type: "simple-fill",
       color: [227, 139, 79, 0.8],  , 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],  , 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 功能，请参阅以下教程：

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